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 thefigure
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 thefigure
are only “tangentially related” to the content around it, you’d want to use anaside
element, which could in turn wrap afigure
.
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
div
s can come in handy, is by usingclass
,lang
, andtitle
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
ornav
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.
- to support keyboard nav to the
- Not intended to denote the main section of a subsection in the document.
- Should use ARIA
role=“main”
attribute on themain
while we wait on UAs to implement the default role.
And that’s the end of 4.4 Grouping content!