Hot HTML Summer: Document structure
This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer.
This post covers the Document structure module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.
<!DOCTYPE html>
(permalink)Go to this section at Learn HTML.
If omitted, browsers will use a different rendering mode known as quirks mode
I didn’t know this. And, I can’t say that I could explain quirks mode in detail if asked about it, so off to the quirks mode page…
There are now three modes used by the layout engines in web browsers: quirks mode, limited-quirks mode, and no-quirks mode. In quirks mode, layout emulates behavior in Navigator 4 and Internet Explorer 5. This is essential in order to support websites that were built before the widespread adoption of web standards. In no-quirks mode, the behavior is (hopefully) the desired behavior described by the modern HTML and CSS specifications. In limited-quirks mode, there are only a very small number of quirks implemented.
Fascinating. Off to the history section of the WHATWG quirks spec to learn more…
Browsers have several rendering modes to render HTML documents. The reason for this is basically a historical accident. The CSS specification was incompatible with the behavior of existing browsers which existing Web content relied on. In order to comply with the specification while not breaking existing content, browsers introduced a new rendering mode (no-quirks mode).
It’s great to know the backstory of how things came about. The particulars of the spec for quirks mode are worth a look if you’ve never read it, or had to deal with it directly.
Content language
(permalink)Go to this section at Learn HTML.
The
langattribute is not limited to the<html>tag. If there is text within the page that is in a language different from the main document language, thelangattribute should be used to identify exceptions to the main language within the document.
I only recently learned this because some smart person somewhere included it in article I was reading, or mentioned it on Mastodon, although I can’t remember who or where. But I do remember thinking I should make note and check some of my sites to see where to add it, specifically in my TV posts at the Junk Drawer where I try to use the language of the country of origin for the title of non-US shows.
Other uses of the <link> element
(permalink)Go to this section at Learn HTML.
There are currently 25 available values for the
relattribute that can be used with<link>,<a>and<area>, or<form>, with a few that can be used with all.
I’ve used around 10 or so of the 25, and after reviewing them all more closely at MDN I will be on the lookout for examples of rel="author" and rel="bookmark" in the wild.
Scripts
(permalink)Go to this section at Learn HTML.
With
defer, HTML rendering is not blocked during the download, and the JavaScript only executes after the document has otherwise finished rendering. Withasync, rendering isn’t blocked during the download either, but once the script has finished downloading, the rendering is paused while the JavaScript is executed.
There’s a good image illustrating the difference in rendering between the defer and async attributes of <script>. The written description above is good too, but the illustration locked it in for me.
