Skip to main content

Day 68 of 100DaysOfSpec, figure, figcaption, div, and main 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.4 Grouping content

UAs = user agents = browsers and other HTML document parsers/renderers

4.4.11 The figure element

“The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.”

  • Self-contained in this context simply means a complete thought, as opposed to an article that can be published independently, outside of the original content.
  • Can contain flow content, followed or proceeded by one optional fig caption element.
  • Use cases: marking up illustrations, diagrams, photos, code listings, etc.
  • When writing content for the figcaption, provide identifying info that would allow you to move the figure element to any position or order in the document, rather than using relative labelling (“below”, for ex).
  • “A figure element's contents are part of the surrounding flow.” So if the contents of the figure are only “tangentially related” to the content around it, you’d want to use an aside element, which could in turn wrap a figure.

4.4.12 The figcaption element

No additional comments here.

4.4.13 The div element

Funny that one of the most common HTML elements has such a short stub of an writeup. I suppose that matches its semantic vagueness: “The div element has no special meaning at all.”

  • “Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.”
  • Where divs can come in handy, is by using class, lang, and title attributes to lend common styles and semantics to groupings of elements.

4.4.14 The main element

“The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.”

  • No article, aside, footer, header or nav element ancestors allowed!
  • Has no effect on document outline (which is not implemented in browsers anyway).
  • Doesn’t contain content that appears site-wide; should just be content unique to this page.
  • Only one main per page.
  • UAs are encouraged:
    • to support keyboard nav to the main element.
    • Make the main’s first child element the next element to gain focus.
  • Not intended to denote the main section of a subsection in the document.
  • Should use ARIA role=“main” attribute on the main while we wait on UAs to implement the default role.

And that’s the end of 4.4 Grouping content!


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.