Skip to main content

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 htmlelement'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.

Responses

My blog uses Webmentions. Responses from Mastodon and other sites that send Webmentions will show up here.

No Webmentions have been sent to this post yet.