Day 50 of 100DaysOfSpec, html, head, and title elements
I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.
Currently reading in 4 The elements of HTML
Awww yea, I’m halfway through the 100 day challenge and have made it to possibly the most exciting section: the documentation on HTML elements!
4.1 The root element
root element === html
element
Apparently there are some cases in which you can omit the html
element's start or end tag (when the first thing inside html
is not a comment, when the html
element is not immediately followed by a comment, respectively). Seems bizarre and messy to do so, especially when you’re encouraged to set the lang
attribute on the element.
Global aria- attributes are allowed on the html
element.
4.2.1 Document metadata: The head
element
The head element is the first child of an html
element, and it contains metadata about the page.
A single title
element HAS to be used inside of the head
, unless “the document is an iframe srcdoc document or if title information is available from a higher-level protocol”. The example they give for such a protocol is the subject line of an HTML email.
You can only have one base
element in the head
.
Like the html
element, there are also some special cases in which you can omit start/end tags for the head
element. But why would you do that? Keep your code clean and logical to humans.
4.2.2 The title element
There can only be one!
When writing your title text, you should think about how it reads divorced from the context of the page, like in a bookmark list. “Dinner Menu” => “Dinner Menu at Cafe Richards”, for example. I most commonly see a pipe |
separating the name of the page and the name of the site the page is on. Which is great, but it kind of reads out funny in a screen reader, like VoiceOver. Possibly this is something you just get used to when you’re a screen reader user, but bonus points for human-readable titles never hurt.
If you try to jam non-text child elements into a title
element, they will be ignored when the title is parsed.
You can dynamically set the document.text
value with a scripting language.
When the UA uses the title
value in their interface, like on a tab, the directionality of the title text has to match the directionality of the title
element within the webpage. So the tab for an R-to-L document will have text displayed R-to-L.