title ... ⁄title vs element title
title ELEMENT versus title ATTRIBUTE
| <title> ... <⁄title> | <element title> ... <⁄element> |
|---|---|
| 1. Utility: | |
| allows you to mark up the title of your document | allows you to add advisory information about an element, or give the name of a style sheet , or ... (it depends on the element on which is added) |
| 2. Syntax: | |
| has a start tag: <title> and an end tag <⁄title> | added only on the start tag of an HTML element |
| 3. Place in page: | |
| can be add only inside head element | is a global attribute → can be added to any HTML element |
| 4. Semantics: | |
| defines the title of the document | depends on the element on which is added |
| 5. Occurrences: | |
| only 1 title element is allowed per HTML document | only 1 title attribute is allowed per element, and multiple title attributes per page on multiple elements |
| 6. Browser display: | |
| displays in browser tab, browser toolbar and as result to users when performing an engine-web-search | the display depends on the element on which is added |
Video demonstration title element versus title attribute
HTML5 title element versus title attribute, Tutorial
| min | video details |
|---|---|
| 00:09 | video tutorial: title element versus title attribute objective: understanding the difference |
| 00:16 | title element |
| 00:16 | title element goes only inside head section ⁄element |
| 00:19 | title element has a: - start tag, <title> - and an end tag, <title⁄> |
| 00:26 | title attribute |
| 00:26 | title attribute goes in both sections: head, body |
| 00:35 | title attribute is applied ONLY on the start tag of an html element |
| | |
| 00:43 | title element: value |
| 00:43 | the value of the title element displays in browser tab and toolbar, giving the title of the html document |
| 00:53 | title attribute: value |
| 00:54 | because title attribute is a global attribute, it can be applied on all html elements; its semantic and display depend on the element on which is applied |
| 01:00 | a) if title is added on a link element: the value "About the author" represents the title of the linked resource "author.php", which is purely advisory information; - does not display in browser |
| 01:07 | b) if title is added on a style element: the value "default" or darker represents the name of the alternative style sheet; - display in browser: View → Page Style |
| 01:24 | c) if title is added on a body element: the value "demo page" represents advisory information about that element - display in browser: when hover the mouse over that element |
| 01:26 | note: the value of the title attribute on body element is inherited by all elements inside the body |
| 01:35 | c) if title is added on a h1 element: the value "subject of the video demo" represents advisory information about h1 element - display in browser: when hover the mouse over th1 element |
| 01:43 | note: the value of the title attribute, in most of the cases, represents advisory information about that element |