From 6682bdeee6fb08f5972bea92064fe250f1b4ec9c Mon Sep 17 00:00:00 2001
From: Steve Faulkner Living Standard — Last Updated [DATE: 01 Jan 1901]
Commit Snapshot — Last Updated [DATE: 01 Jan 1901]
Review Draft — Published [DATE: 01 Jan 1901]
+
HTML: The Living Standard
Edition for Web Developers — Last Updated [DATE: 01 Jan 1901]
+
A tool that generates document outlines but - increases the nesting level for each paragraph and does not increase the nesting level for each - section would not be conforming.
+ increases the nesting level for each paragraph and does not increase the nesting level for + headings would not be conforming. @@ -10802,12 +10808,12 @@ partial interface Document { <h2>The leaders in arbitrary fast delivery since 1920</h2> ... -The hgroup
element is intended for these kinds of situations:
The hgroup
element can be used for these kinds of situations:
<body>
<hgroup>
<h1>ACME Corporation</h1>
- <h2>The leaders in arbitrary fast delivery since 1920</h2>
+ <p>The leaders in arbitrary fast delivery since 1920</p>
</hgroup>
...
@@ -11671,8 +11677,8 @@ console.assert(image.height === 200);
Sectioning content is content that defines the scope of headings and footers.
+Sectioning content is content that defines the scope of header
+ and footer
elements.
section
Each sectioning content element potentially has a heading and an - outline. See the section on headings and sections for further - details.
- -There are also certain elements that are sectioning - roots. These are distinct from sectioning content, but they can also have an - outline.
-Heading content defines the header of a section (whether explicitly marked +
Heading content defines the heading of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).
@@ -11704,7 +11702,7 @@ console.assert(image.height === 200);h4
h5
h6
hgroup
hgroup
(if it has a descendant h1
to h6
element)<section>
- <h1>Example of paragraphs</h1>
+ <h2>Example of paragraphs</h2>
This is the <em>first</em> paragraph in this example.
<p>This is the second.</p>
<!-- This is not a paragraph. -->
@@ -12097,7 +12095,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
del
element straddles the boundary between the two paragraphs.
<section>
- <ins><h1>Example of paragraphs</h1>
+ <ins><h2>Example of paragraphs</h2>
This is the <em>first</em> paragraph in</ins> this example<del>.
<p>This is the second.</p></del>
<!-- This is not a paragraph. -->
@@ -12170,7 +12168,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
content. For example, in the following section:
<section>
- <h1>My Cats</h1>
+ <h2>My Cats</h2>
You can play with my cat simulator.
<object data="cats.sim">
To see the cat simulator, use one of the following links:
@@ -12209,7 +12207,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<section>
- <h1>My Cats</h1>
+ <h2>My Cats</h2>
<p>You can play with my cat simulator.</p>
<object data="cats.sim">
<p>To see the cat simulator, use one of the following links:</p>
@@ -16934,7 +16932,7 @@ console.log(style.disabled); // false
- Categories:
- - Sectioning root.
+ - None.
- Contexts in which this element can be used:
- As the second element in an
html
element.
- Content model:
@@ -17095,7 +17093,7 @@ interface HTMLBodyElement : HTMLElement {
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <h2 itemprop="headline">The Very First Rule of Life</h2>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
@@ -17111,7 +17109,7 @@ interface HTMLBodyElement : HTMLElement {
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1 itemprop="headline">The Very First Rule of Life</h1>
+ <h2 itemprop="headline">The Very First Rule of Life</h2>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
@@ -17162,7 +17160,7 @@ interface HTMLBodyElement : HTMLElement {
<script src="/scripts/widgets.js"></script>
<link rel=stylesheet href="/styles/main.css">
<article is="stock-widget">
- <h1>Stocks</h1>
+ <h2>Stocks</h2>
<table>
<thead> <tr> <th> Stock <th> Value <th> Delta
<tbody> <template> <tr> <td> <td> <td> </template>
@@ -17170,7 +17168,7 @@ interface HTMLBodyElement : HTMLElement {
<p> <input type=button value="Refresh" onclick="this.parentElement.refresh()">
</article>
<article is="news-widget">
- <h1>News</h1>
+ <h2>News</h2>
<ul>
<template>
<li>
@@ -17231,26 +17229,22 @@ interface HTMLBodyElement : HTMLElement {
<article>
<hgroup>
- <h1>Apples</h1>
- <h2>Tasty, delicious fruit!</h2>
+ <h2>Apples</h2>
+ <p>Tasty, delicious fruit!</p>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
- <h1>Red Delicious</h1>
+ <h3>Red Delicious</h3>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
- <h1>Granny Smith</h1>
+ <h3>Granny Smith</h3>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
- Notice how the use of section
means that the author can use h1
- elements throughout, without having to worry about whether a particular section is at the top
- level, the second level, the third level, and so on.
-
@@ -17269,8 +17263,8 @@ interface HTMLBodyElement : HTMLElement {
><H1
>Graduation</H1
><Section
- ><H1
- >Ceremony</H1
+ ><H2
+ >Ceremony</H2
><P
>Opening Procession</P
><P
@@ -17283,8 +17277,8 @@ interface HTMLBodyElement : HTMLElement {
>Closing Speech by Headmaster</P
></Section
><Section
- ><H1
- >Graduates</H1
+ ><H2
+ >Graduates</H2
><Ul
><Li
>Molly Carpenter</Li
@@ -17312,37 +17306,37 @@ interface HTMLBodyElement : HTMLElement {
<style>
section { border: double medium; margin: 2em; }
- section.chapter h1 { font: 2em Roboto, Helvetica Neue, sans-serif; }
- section.appendix h1 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
+ section.chapter h2 { font: 2em Roboto, Helvetica Neue, sans-serif; }
+ section.appendix h2 { font: small-caps 2em Roboto, Helvetica Neue, sans-serif; }
</style>
<header>
<hgroup>
<h1>My Book</h1>
- <h2>A sample with not much content</h2>
+ <p>A sample with not much content</p>
</hgroup>
<p><small>Published by Dummy Publicorp Ltd.</small></p>
</header>
<section class="chapter">
- <h1>My First Chapter</h1>
+ <h2>My First Chapter</h2>
<p>This is the first of my chapters. It doesn't say much.</p>
<p>But it has two paragraphs!</p>
</section>
<section class="chapter">
- <h1>It Continues: The Second Chapter</h1>
+ <h2>It Continues: The Second Chapter</h2>
<p>Bla dee bla, dee bla dee bla. Boom.</p>
</section>
<section class="chapter">
- <h1>Chapter Three: A Further Example</h1>
+ <h2>Chapter Three: A Further Example</h2>
<p>It's not like a battle between brightness and earthtones would go
unnoticed.</p>
<p>But it might ruin my story.</p>
</section>
<section class="appendix">
- <h1>Appendix A: Overview of Examples</h1>
+ <h2>Appendix A: Overview of Examples</h2>
<p>These are demonstrations.</p>
</section>
<section class="appendix">
- <h1>Appendix B: Some Closing Remarks</h1>
+ <h2>Appendix B: Some Closing Remarks</h2>
<p>Hopefully this long example shows that you <em>can</em> style
sections, so long as they are used to indicate actual sections.</p>
</section>
@@ -17403,7 +17397,7 @@ interface HTMLBodyElement : HTMLElement {
</nav>
<article>
<header>
- <h1>Demos in Exampland</h1>
+ <h2>Demos in Exampland</h2>
<p>Written by A. N. Other.</p>
</header>
<nav>
@@ -17415,11 +17409,11 @@ interface HTMLBodyElement : HTMLElement {
</nav>
<div>
<section id="public">
- <h1>Public demonstrations</h1>
+ <h2>Public demonstrations</h2>
<p>...more...</p>
</section>
<section id="destroy">
- <h1>Demolitions</h1>
+ <h2>Demolitions</h2>
<p>...more...</p>
</section>
...more...
@@ -17459,7 +17453,7 @@ interface HTMLBodyElement : HTMLElement {
<main>
<article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
<header>
- <h1 itemprop="headline">My Day at the Beach</h1>
+ <h2 itemprop="headline">My Day at the Beach</h2>
</header>
<div itemprop="articleBody">
<p>Today I went to the beach and had a lot of fun.</p>
@@ -17571,7 +17565,7 @@ interface HTMLBodyElement : HTMLElement {
in a much longer news story on Europe.
<aside>
- <h1>Switzerland</h1>
+ <h2>Switzerland</h2>
<p>Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</p>
@@ -17620,13 +17614,13 @@ isn't his only passion. He also enjoys other pleasures.</p>
to the page, namely, links to other blogs, and links to blog posts
from this blog -->
<nav>
- <h1>My blogroll</h1>
+ <h2>My blogroll</h2>
<ul>
<li><a href="https://blog.example.com/">Example Blog</a>
</ul>
</nav>
<nav>
- <h1>Archives</h1>
+ <h2>Archives</h2>
<ol reversed>
<li><a href="/last-post">My last post</a>
<li><a href="/first-post">My first post</a>
@@ -17646,7 +17640,7 @@ isn't his only passion. He also enjoys other pleasures.</p>
</aside>
<article>
<!-- this is a blog post -->
- <h1>My last post</h1>
+ <h2>My last post</h2>
<p>This is my last post.</p>
<footer>
<p><a href="/last-post" rel=bookmark>Permalink</a>
@@ -17654,14 +17648,14 @@ isn't his only passion. He also enjoys other pleasures.</p>
</article>
<article>
<!-- this is also a blog post -->
- <h1>My first post</h1>
+ <h2>My first post</h2>
<p>This is my first post.</p>
<aside>
<!-- this aside is about the blog post, since it's inside the
<article> element; it would be wrong, for instance, to put the
blogroll here, since the blogroll isn't really related to this post
specifically, only to the page as a whole -->
- <h1>Posting</h1>
+ <h2>Posting</h2>
<p>While I'm thinking about it, I wanted to say something about
posting. Posting is fun!</p>
</aside>
@@ -17716,12 +17710,13 @@ interface HTMLHeadingElement : HTMLElement {
These elements represent headings for their sections.
- The semantics and meaning of these elements are defined in the section on headings and
- sections.
+ The semantics and meaning of these elements are defined in the section on headings and outlines.
- These elements have a rank given by the number in their name. The h1
- element is said to have the highest rank, the h6
element has the lowest rank, and two
- elements with the same name have equal rank.
+ These elements have a heading level given by the number in their name. The
+ heading level corresponds to the levels of nested sections. The h1
+ element is for a top-level section, h2
for a subsection, h3
for a
+ sub-subsection, and so on.
@@ -17739,33 +17734,6 @@ interface HTMLHeadingElement : HTMLElement {
<body>
<h1>Let's call it a draw(ing surface)</h1>
- <section>
- <h1>Diving in</h1>
- </section>
- <section>
- <h1>Simple shapes</h1>
- </section>
- <section>
- <h1>Canvas coordinates</h1>
- <section>
- <h1>Canvas coordinates diagram</h1>
- </section>
- </section>
- <section>
- <h1>Paths</h1>
- </section>
-</body>
-
- Authors might prefer the former style for its terseness, or the latter style for its
- convenience in the face of heavy editing; which is best is purely an issue of preferred authoring
- style.
-
- The two styles can be combined, for compatibility with legacy tools while still
- future-proofing for when that compatibility is no longer needed. This third snippet again has the
- same outline as the previous two:
-
- <body>
- <h1>Let's call it a draw(ing surface)</h1>
<section>
<h2>Diving in</h2>
</section>
@@ -17783,11 +17751,11 @@ interface HTMLHeadingElement : HTMLElement {
</section>
</body>
+ Authors might prefer the former style for its terseness, or the latter style for its
+ additional styling hooks. Which is best is purely an issue of preferred authoring style.
-
-
The hgroup
element
@@ -17798,8 +17766,9 @@ interface HTMLHeadingElement : HTMLElement {
- Contexts in which this element can be used:
- Where heading content is expected.
- Content model:
- - One or more
h1
, h2
, h3
, h4
,
- h5
, h6
elements, optionally intermixed with script-supporting
+ - Zero or more
p
elements, followed by one h1
, h2
,
+ h3
, h4
, h5
, or h6
element, followed by zero
+ or more p
elements, optionally intermixed with script-supporting
elements.
- Content attributes:
- Global attributes
@@ -17811,133 +17780,25 @@ interface HTMLHeadingElement : HTMLElement {
- Uses
HTMLElement
.
- The hgroup
element represents the heading of a section, which
- consists of all the h1
–h6
element children of the
- hgroup
element. The element is used to group a set of
- h1
–h6
elements when the heading has multiple levels, such as
- subheadings, alternative titles, or taglines.
-
- The rank of an hgroup
element is the rank of the highest-ranked
- h1
–h6
element descendant of the hgroup
element, if
- there are any such elements, or otherwise the same as for an h1
element (the highest
- rank). Other h1
–h6
elements of heading content in the
- hgroup
element indicate subheadings or subtitles or (secondary) alternative
- titles.
-
- The section on headings and sections defines how hgroup
elements are
- assigned to individual sections.
+ The hgroup
element represents a heading and related content. The
+ element may be used to group an h1
–h6
element with one or more
+ p
elements containing content representing a subheading, alternative title, or
+ tagline.
-
- Here are some examples of valid headings.
+ Here are some examples of valid headings contained within an hgroup
element.
<hgroup>
<h1>The reality dysfunction</h1>
- <h2>Space is not the only void</h2>
+ <p>Space is not the only void</p>
</hgroup>
<hgroup>
<h1>Dr. Strangelove</h1>
- <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
+ <p>Or: How I Learned to Stop Worrying and Love the Bomb</p>
</hgroup>
-
- The point of using hgroup
in these examples is to prevent the h2
- element (which acts as a secondary title) from creating a separate section of its own in any
- outline and to instead cause the contents of the h2
to be shown in
- rendered output from the outline algorithm in some way to indicate that it is not
- the title of a separate section but instead just a secondary title in a group of titles.
-
-
- How a user agent exposes such multi-level headings in user interfaces (e.g. in tables of
- contents or search results) is left open to implementers, as it is a user interface issue. The
- first example above could be rendered as:
-
- The reality dysfunction: Space is not the only void
-
- Alternatively, it could look like this:
-
-
The reality dysfunction (Space is not the only void)
-
- In interfaces where a title can be rendered on multiple lines, it could be rendered as
- follows, maybe with the first line in a bigger font size:
-
- The reality dysfunction
-Space is not the only void
-
-
-
-
- The following two examples show ways in which two h1
headings could be used
- within an hgroup
element to group the US and UK names for the same movie.
-
- <hgroup>
- <h1>The Avengers</h1>
- <h1>Avengers Assemble</h1>
-</hgroup>
-
-<hgroup>
- <h1>Avengers Assemble</h1>
- <h1>The Avengers</h1>
-</hgroup>
-
- The first example above shows how the movie names might be grouped in a publication in the US,
- with the US name The Avengers as the (primary) title, and the UK name Avengers
- Assemble as the (secondary) alternative title. The second example above shows how the movie
- names might be grouped in a publication in the UK, with the UK name as the (primary) title, and
- the US name as the (secondary) alternative title.
-
- In both cases it is important to note the use of the hgroup
element to group the
- two titles indicates that the titles are not equivalent; instead the first h1
gives
- the (primary) title while the second gives the (secondary) alternative title. Even though both
- the title and alternative title are marked up with h1
elements, in a rendered view
- of output from the outline algorithm, the second h1
in the
- hgroup
will be shown in some way that clearly indicates it is secondary; for
- example:
-
-
In a US publication:
- The Avengers (Avengers Assemble)
-
- In a UK publication:
- Avengers Assemble (The Avengers)
-
-
-
-
-
- In the following example, an hgroup
element is used to mark up a two-level
- heading in a wizard-style dialog box:
-
- <dialog onclose="walletSetup.continue(this.returnValue)">
- <hgroup>
- <h1>Wallet Setup</h1>
- <h2>Configure your Wallet funding source</h2>
- </hgroup>
- <p>Your Wallet can be used to buy wands at the merchant in town, to buy potions from travelling
- salesmen you may find in the dungeons, and to pay for mercenaries.</p>
- <p>We support two payment sources:</p>
- <form method=dialog>
- <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
- <legend> <label> <input type=radio name=payment-type value=cc> Credit Card </label> </legend>
- <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
- <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
- <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder="2020-02"></label>
- <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder="246"></label>
- </fieldset>
- <fieldset oninput="this.getElementsByTagName('input')[0].checked = true">
- <legend> <label> <input type=radio name=payment-type value=bank> Checking Account </label> </legend>
- <p><label>Name on account: <input name=bank1 autocomplete="section-bank cc-name"></label>
- <p><label>Routing number: <input name=bank2 inputmode=numeric></label>
- <p><label>Account number: <input name=bank3 inputmode=numeric></label>
- </fieldset>
- <button type=submit value="back"> ← Back </button>
- <button type=submit value="next"> Next → </button>
- </form>
-</dialog>
-
-
-
The header
element
@@ -17953,13 +17814,12 @@ Space is not the only void
- Global attributes
- Accessibility considerations:
- - If the nearest ancestor sectioning content or sectioning root
- element is the body element: If there is an ancestor sectioning content element: for authors; for implementers.
+ href="https://w3c.github.io/html-aam/#el-header">for implementers.
- Otherwise: for authors; for implementers.
+ href="https://w3c.github.io/html-aam/#el-header-ancestorbody">for implementers.
- DOM interface:
- Uses
HTMLElement
.
@@ -17967,7 +17827,7 @@ Space is not the only void
The header
element represents a group of introductory or navigational
aids.
- A header
element is intended to usually contain the section's heading
+
A header
element is intended to usually contain a heading
(an h1
–h6
element or an hgroup
element), but this is
not required. The header
element can also be used to wrap a section's table of
contents, a search form, or any relevant logos.
@@ -17987,7 +17847,7 @@ Space is not the only void
<header>
<hgroup>
<h1>Fullscreen API</h1>
- <h2>Living Standard — Last Updated 19 October 2015</h2>
+ <p>Living Standard — Last Updated 19 October 2015<p>
</hgroup>
<dl>
<dt>Participate:</dt>
@@ -18049,21 +17909,20 @@ Space is not the only void
- Global attributes
- Accessibility considerations:
- - If the nearest ancestor sectioning content or sectioning root
- element is the body element: If there is an ancestor sectioning content element: for authors; for implementers.
+ href="https://w3c.github.io/html-aam/#el-footer">for implementers.
- Otherwise: for authors; for implementers.
+ href="https://w3c.github.io/html-aam/#el-footer-ancestorbody">for implementers.
- DOM interface:
- Uses
HTMLElement
.
The footer
element represents a footer for its nearest ancestor
- sectioning content or sectioning root element. A footer typically
- contains information about its section such as who wrote it, links to related documents, copyright
- data, and the like.
+ sectioning content element, or for the body element if there is no such
+ ancestor. A footer typically contains information about its section such as who wrote it, links
+ to related documents, copyright data, and the like.
When the footer
element contains entire sections, they represent appendices, indices, long colophons, verbose license
@@ -18079,11 +17938,11 @@ Space is not the only void
Footers don't necessarily have to appear at the end of a section, though they usually
do.
- When the nearest ancestor sectioning content or sectioning root
- element is the body element, then it applies to the whole page.
+ When there is no ancestor sectioning content element, then it applies to the whole
+ page.
- The footer
element is not sectioning content; it doesn't
- introduce a new section.
+ The footer
element is not itself sectioning content; it
+ doesn't introduce a new section.
@@ -18301,103 +18160,45 @@ Space is not the only void
- Headings and sections
+ Headings and outlines
- The h1
–h6
elements and the hgroup
element are
- headings.
+ h1
–h6
elements have a heading level, which is given
+ by the number in the element's name.
- The first element of heading content in an element of sectioning
- content represents the heading for that section. Subsequent headings of equal
- or higher rank start new (implied) sections, headings of lower rank
- start implied subsections that are part of the previous one. In both cases, the element
- represents the heading of the implied section.
+ These elements represent headings. The lower a heading's heading level is, the fewer ancestor
+ sections the heading has.
- Certain elements are said to be sectioning roots, including
- blockquote
and td
elements. These elements can have their own outlines,
- but the sections and headings inside these elements do not contribute to the outlines of their
- ancestors.
+ The outline is all headings in a
+ document, in tree order.
-
-
- blockquote
- body
- details
- dialog
- fieldset
- figure
- td
-
+ The outline should be used for generating document outlines, for example when
+ generating tables of contents. When creating an interactive table of contents, entries should
+ jump the user to the relevant heading.
-
+ If a document has one or more headings, at least a
+ single heading within the outline should have
+ a heading level of 1.
- Sectioning content elements are always considered subsections of their nearest
- ancestor sectioning root or their nearest ancestor element of sectioning
- content, whichever is nearest, regardless of what implied sections other headings may have
- created.
+ Each heading following another heading lead in the outline must
+ have a heading level that is less than, equal to, or 1 greater than lead's
+ heading level.
- For the following fragment:
- <body>
- <h1>Foo</h1>
- <h2>Bar</h2>
- <blockquote>
- <h3>Bla</h3>
- </blockquote>
- <p>Baz</p>
- <h2>Quux</h2>
- <section>
- <h3>Thud</h3>
- </section>
- <p>Grunt</p>
-</body>
- ...the structure would be:
-
- -
- Foo (heading of explicit
body
section, containing the "Grunt" paragraph)
-
- -
- Bar (heading starting implied section, containing a block quote and the "Baz" paragraph)
-
- -
- Quux (heading starting implied section with no content other than the heading itself)
-
- -
- Thud (heading of explicit
section
section)
-
-
-
-
- Notice how the section
ends the earlier implicit section so that a later
- paragraph ("Grunt") is back at the top level.
-
+ The following example is non-conforming:
- Sections may contain headings of any rank, but authors are strongly encouraged to
- either use only h1
elements, or to use elements of the appropriate rank
- for the section's nesting level.
-
- Authors are also encouraged to explicitly wrap sections in elements of sectioning
- content, instead of relying on the implicit sections generated by having multiple headings
- in one element of sectioning content.
-
-
- For example, the following is correct:
-
- <body>
+ <body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
- <h6>Sweet</h6>
- <p>Red apples are sweeter than green ones.</p>
- <h1>Color</h1>
- <p>Apples come in various colors.</p>
</section>
</body>
- However, the same document would be more clearly expressed as:
+ It could be written as follows and then it would be conforming:
<body>
<h1>Apples</h1>
@@ -18405,80 +18206,21 @@ Space is not the only void
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
- <section>
- <h3>Sweet</h3>
- <p>Red apples are sweeter than green ones.</p>
- </section>
- </section>
- <section>
- <h2>Color</h2>
- <p>Apples come in various colors.</p>
- </section>
-</body>
-
- Both of the documents above are semantically identical and would produce the same outline in
- compliant user agents.
-
- This third example is also semantically identical, and might be easier to maintain (e.g. if
- sections are often moved around in editing):
-
- <body>
- <h1>Apples</h1>
- <p>Apples are fruit.</p>
- <section>
- <h1>Taste</h1>
- <p>They taste lovely.</p>
- <section>
- <h1>Sweet</h1>
- <p>Red apples are sweeter than green ones.</p>
- </section>
- </section>
- <section>
- <h1>Color</h1>
- <p>Apples come in various colors.</p>
</section>
</body>
- This final example would need explicit style rules to be rendered well in legacy browsers.
- Legacy browsers without CSS support would render all the headings as top-level headings.
-
-
-
-
- Creating an outline
-
-
-
-
-
- This section defines an algorithm for creating an outline for a sectioning content
- element or a sectioning root element. It is defined in terms of a walk over the nodes
- of a DOM tree, in tree order, with each node being visited when it is entered and when it
- is exited during the walk.
-
- The outline for a sectioning content element or a sectioning
- root element consists of a list of one or more potentially nested sections. The element for which an outline is created
- is said to be the outline's owner.
- A section is a container that corresponds to some nodes in
- the original DOM tree. Each section can have one heading associated with it, and can contain any
- number of further nested sections. The algorithm for the outline also
- associates each node in the DOM tree with a particular section and potentially a heading.
- (The sections in the outline aren't section
elements, though some may correspond to
- such elements — they are merely conceptual sections.)
+ Sample outlines
-
The following markup fragment:
<body>
<hgroup id="document-title">
- <h1>HTML</h1>
- <h2>Living Standard — Last Updated 12 August 2016</h2>
+ <h1>HTML: Living Standard</h1>
+ <p>Last Updated 12 August 2016</p>
</hgroup>
<p>Some intro to the document.</p>
<h2>Table of contents</h2>
@@ -18487,383 +18229,25 @@ Space is not the only void
<p>Some intro to the first section.</p>
</body>
- ...results in the following outline being created for the body
node (and thus the
- entire document):
+ ...results in 3 document headings:
- -
-
Section created for body
node.
- Associated with heading <hgroup
- id="document-title">...</hgroup>
consisting of primary heading <h1>HTML</h1>
and secondary heading <h2>Living
- Standard — Last Updated 12 August 2016</h2>
.
- Also associated with the paragraph <p>Some intro to the
- document.</p>
(though it likely would not be shown in a rendered view of the
- outline).
- Nested sections:
-
- -
-
Section implied for first h2
element.
- Associated with heading <h2>Table of contents</h2>
.
- Also associated with the ordered list <ol id=toc>...</ol>
- (though it likely would not be shown in a rendered view of the outline).
- No nested sections.
-
- -
-
Section implied for second h2
element.
- Associated with heading <h2>First section</h2>
.
- Also associated with the paragraph <p>Some intro to the first
- section.</p>
(though it likely would not be shown in a rendered view of the
- outline).
- No nested sections.
-
-
-
-
-
- The following image shows what a rendered view of the outline might look like.
-
-
-
-
-
-
- The algorithm that must be followed during a walk of a DOM subtree rooted at a sectioning
- content element or a sectioning root element to determine that element's
- outline is as follows:
-
-
- Let current outline target be null. (It holds the element whose
- outline is being created.)
-
- Let current section be null. (It holds a pointer to a section, so that elements in the DOM can all be associated with a
- section.)
-
- Create a stack to hold elements, which is used to handle nesting. Initialize this stack to
- empty.
-
- -
-
Walk over the DOM in tree order, starting with the sectioning
- content element or sectioning root element at the root of the subtree for
- which an outline is to be created, and trigger the first relevant step below for each element as
- the walk enters and exits it.
-
-
-
- - When exiting an element, if that element is the element at the top of the stack
-
- -
-
The element being exited is a heading content element or an
- element with a hidden
attribute.
-
- Pop that element from the stack.
-
-
-
- - If the top of the stack is a heading content element or an element with a
-
hidden
attribute
-
- Do nothing.
-
-
- - When entering an element with a
hidden
attribute
-
- -
-
Push the element being entered onto the stack. (This causes the algorithm to skip that
- element and any descendants of the element.)
-
-
-
- - When entering a sectioning content element
-
- -
-
Run these steps:
-
-
- -
-
If current outline target is not null, then:
-
-
- If the current section has no heading, create an implied
- heading and let that be the heading for the current section.
-
- Push current outline target onto the stack.
-
-
-
- Let current outline target be the element that is being
- entered.
-
- Let current section be a newly created section for the current outline target
- element.
-
- Associate current outline target with current
- section.
-
- Let there be a new outline for the new current outline
- target, initialized with just the new current section as the only
- section in the outline.
-
-
-
-
- - When exiting a sectioning content element, if the stack is not empty
-
- -
-
Run these steps:
-
-
- If the current section has no heading, create an implied heading
- and let that be the heading for the current section.
-
- Pop the top element from the stack, and let the current outline
- target be that element.
-
- Let current section be the last section in the
- outline of the current outline target element.
-
- Append the outline of the sectioning content element being
- exited to the current section. (This does not change which section is
- the last section in the outline.)
-
-
-
-
- - When entering a sectioning root element
-
- -
-
Run these steps:
-
-
- If current outline target is not null, push current outline target onto the stack.
-
- Let current outline target be the element that is being
- entered.
-
- Let current outline target's parent section be current section.
-
- Let current section be a newly created section for the current outline target
- element.
-
- Let there be a new outline for the new current outline
- target, initialized with just the new current section as the only
- section in the outline.
-
-
-
-
- - When exiting a sectioning root element, if the stack is not empty
-
- -
-
Run these steps:
-
-
- If the current section has no heading, create an implied heading
- and let that be the heading for the current section.
-
- Let current section be current outline
- target's parent section.
-
- Pop the top element from the stack, and let the current outline
- target be that element.
-
-
-
-
- - When exiting a sectioning content element or a sectioning root
- element (when the stack is empty)
-
- -
-
The current outline target is the element being exited,
- and it is the sectioning content element or a sectioning root
- element at the root of the subtree for which an outline is being generated.
-
- If the current section has no heading, create an implied heading and
- let that be the heading for the current section.
-
- Skip to the next step in the overall set of steps. (The walk is over.)
-
-
-
- - When entering a heading content element
-
- -
-
If the current section has no heading, let the element being entered be
- the heading for the current section.
-
- If the element being entered is an hgroup
element, that
- hgroup
as a whole is a multi-level heading for the current
- section, with the highest-ranked
- h1
–h6
descendant of the hgroup
providing the
- primary heading for the current section, and with other
- h1
–h6
descendants of the hgroup
providing
- secondary headings for the current section.
-
- Otherwise, if the element being entered has a rank equal to or higher than the
- heading of the last section of the outline of the current outline
- target, or if the heading of the last section of the outline of the current outline target is an implied heading, then create a new section and append it to the outline of the current outline target element, so that this new section is the new last
- section of that outline. Let current section be that new section. Let the
- element being entered be the new heading for the current section.
-
- Otherwise, run these substeps:
-
-
- Let candidate section be current
- section.
-
- Heading loop: If the element being entered has a rank lower than
- the rank of the heading of the candidate section, then create a new
- section, and append it to candidate
- section. (This does not change which section is the last section in the outline.) Let
- current section be this new section. Let the element being entered be the
- new heading for the current section. Abort these substeps.
-
- Let new candidate section be the section that contains candidate section in
- the outline of current outline target.
-
- Let candidate section be new candidate
- section.
-
- Return to the step labeled heading loop.
-
-
- Push the element being entered onto the stack. (This causes the algorithm to skip any
- descendants of the element.)
-
- Recall that h1
has the highest rank, and h6
- has the lowest rank.
-
-
-
- - Otherwise
-
- Do nothing.
-
-
- In addition, whenever the walk exits a node, after doing the steps
- above, if the node is not associated with a section yet,
- associate the node with the section current
- section.
-
-
- Associate all non-element nodes that are in the subtree for which an outline is being
- created with the section with which their parent element is
- associated.
-
- Associate all nodes in the subtree with the heading of the section with which they are associated, if any.
-
-
- The tree of sections created by the algorithm above, or a proper subset thereof, must be used
- when generating document outlines, for example when generating tables of contents.
-
- The outline created for the body element of a Document
is the
- outline of the entire document.
-
- When creating an interactive table of contents, entries should jump the user to the relevant
- sectioning content element, if the section was
- created for a real element in the original document, or to the relevant heading
- content element, if the section in the tree was
- generated for a heading in the above process.
+ <h1>HTML: Living Standard</h1>
- Selecting the first section of the document
- therefore always takes the user to the top of the document, regardless of where the first heading
- in the body
is to be found.
+ <h2>Table of contents</h2>
.
- The outline depth of a heading content element associated with a section section is the number of sections that are ancestors of section in the
- outermost outline that section finds itself in when the outlines of its Document
's elements are created, plus 1. The
- outline depth of a heading content element not associated with a section is 1.
-
- User agents should provide default headings for sections that do not have explicit section
- headings.
-
-
-
- Consider the following snippet:
-
- <body>
- <nav>
- <p><a href="/">Home</a></p>
- </nav>
- <p>Hello world.</p>
- <aside>
- <p>My cat is cute.</p>
- </aside>
-</body>
-
- Although it contains no headings, this snippet has three sections: a document (the
- body
) with two subsections (a nav
and an aside
). A user
- agent could present the outline as follows:
-
-
- - Untitled document
-
- - Navigation
- - Sidebar
-
-
+ <h2>First section</h2>
.
- These default headings ("Untitled document", "Navigation", "Sidebar") are not specified by
- this specification, and might vary with the user's language, the page's language, the user's
- preferences, the user agent implementer's preferences, etc.
-
-
-
-
-
- The following JavaScript function shows how the tree walk could be implemented. The root argument is the root of the tree to walk (either a sectioning
- content element or a sectioning root element), and the enter and exit arguments are callbacks that are called with
- the nodes as they are entered and exited.
-
- function (root, enter, exit) {
- var node = root;
- start: while (node) {
- enter(node);
- if (node.firstChild) {
- node = node.firstChild;
- continue start;
- }
- while (node) {
- exit(node);
- if (node == root) {
- node = null;
- } else if (node.nextSibling) {
- node = node.nextSibling;
- continue start;
- } else {
- node = node.parentNode;
- }
- }
- }
-}
-
-
+ A rendered view of the outline might look like:
+
-
- Sample outlines
-
-
-
-
- The following document shows a straight-forward application of the outline
- algorithm. First, here is the document, which is a book with very short chapters and
- subsections:
+ First, here is a document, which is a book with very short chapters and subsections:
<!DOCTYPE HTML>
<html lang=en>
@@ -18886,100 +18270,40 @@ Space is not the only void
<h3>Poor judgement</h3>
<p>Usually if you lose money it's because you made a mistake.</p>
- This book would form the following outline:
+ Its outline could be presented as follows:
- - The Tax Book
-
- - Earning money
-
- - Getting a job
-
- - Spending money
-
- - Cheap things
-
- Expensive things
-
- - Investing money
-
- Losing money
-
- - Poor judgement
-
-
-
-
- Notice that the title
element does not participate in the outline.
-
-
-
-
-
- Here is a similar document, but this time using section
elements to get the same
- effect:
-
- <!DOCTYPE HTML>
-<html lang=en>
-<title>The Tax Book (all in one page)</title>
-<h1>The Tax Book</h1>
-<section>
- <h1>Earning money</h1>
- <p>Earning money is good.</p>
- <section>
- <h1>Getting a job</h1>
- <p>To earn money you typically need a job.</p>
- </section>
-</section>
-<section>
- <h1>Spending money</h1>
- <p>Spending is what money is mainly used for.</p>
- <section>
- <h1>Cheap things</h1>
- <p>Buying cheap things often not cost-effective.</p>
- </section>
- <section>
- <h1>Expensive things</h1>
- <p>The most expensive thing is often not the most cost-effective either.</p>
- </section>
-</section>
-<section>
- <h1>Investing money</h1>
- <p>You can lend your money to other people.</p>
-</section>
-<section>
- <h1>Losing money</h1>
- <p>If you spend money or invest money, sooner or later you will lose money.
- <section>
- <h1>Poor judgement</h1>
- <p>Usually if you lose money it's because you made a mistake.</p>
- </section>
-</section>
-
- This book would form the same outline:
-
-
- - The Tax Book
+
-
+ The Tax Book
- - Earning money
+
-
+ Earning money
- - Getting a job
+
- Getting a job
- - Spending money
+
+ -
+ Spending money
- - Cheap things
-
- Expensive things
+
- Cheap things
+ - Expensive things
- - Investing money
-
- Losing money
+
+ - Investing money
+ -
+ Losing money
- - Poor judgement
+
- Poor judgement
+
+ Notice that the title
element is not a heading.
-
A document can contain multiple top-level headings:
<!DOCTYPE HTML>
@@ -18992,91 +18316,18 @@ Space is not the only void
<h1>Carambola</h1>
<p>Star.</p>
- This would form the following simple outline consisting of three top-level sections:
-
-
- - Apples
-
- Bananas
-
- Carambola
-
-
- Effectively, the body
element is split into three.
-
-
-
-
-
- Mixing both the h1
–h6
model and the
- section
/h1
model can lead to some unintuitive results.
-
- Consider for example the following, which is just the previous example but with the contents
- of the (implied) body
wrapped in a section
:
-
- <!DOCTYPE HTML>
-<html lang=en>
-<title>Alphabetic Fruit</title>
-<section>
- <h1>Apples</h1>
- <p>Pomaceous.</p>
- <h1>Bananas</h1>
- <p>Edible.</p>
- <h1>Carambola</h1>
- <p>Star.</p>
-</section>
-
- The resulting outline would be:
+ The document's outline could be presented as follows:
- - (untitled page)
-
- - Apples
-
- Bananas
-
- Carambola
-
+ - Apples
+ - Bananas
+ - Carambola
-
- This result is described as unintuitive because it results in three subsections even
- though there's only one section
element. Effectively, the section
is
- split into three, just like the implied body
element in the previous example.
-
- (In this example, "(untitled page)" is the implied heading for the body
- element, since it has no explicit heading.)
-
-
- Headings never rise above other sections. Thus, in the following example, the first
- h1
does not actually describe the page header; it describes the header for the
- second half of the page:
-
- <!DOCTYPE HTML>
-<html lang=en>
-<title>Feathers on The Site of Encyclopedic Knowledge</title>
-<section>
- <h1>A plea from our caretakers</h1>
- <p>Please, we beg of you, send help! We're stuck in the server room!</p>
-</section>
-<h1>Feathers</h1>
-<p>Epidermal growths.</p>
-
- The resulting outline would be:
-
-
- - (untitled page)
-
- - A plea from our caretakers
-
- - Feathers
-
-
-
-
-
-
- Thus, when an article
element starts with a nav
block and only later
- has its heading, the result is that the nav
block is not part of the same section as
- the rest of the article
in the outline. For instance, take this document:
+ header
elements do not influence the outline of a
+ document:
<!DOCTYPE HTML>
<html lang="en">
@@ -19089,7 +18340,7 @@ Space is not the only void
<a href="?t=-7d">Last week</a>;
<a href="?t=-1m">Last month</a>
</nav>
- <h1>We're adopting a child!</h1>
+ <h2>We're adopting a child!</h2>
</header>
<p>As of today, Janine and I have signed the papers to become
the proud parents of baby Diane! We've been looking forward to
@@ -19097,155 +18348,102 @@ Space is not the only void
</article>
</html>
- The resulting outline would be:
+ The document's outline could be presented as follows:
- Ray's blog
- - Untitled article
-
- - Untitled navigation section
-
- We're adopting a child!
-
- Also worthy of note in this example is that the header
element has no effect
- whatsoever on the document outline.
-
-
+
- The hgroup
element can be used for subheadings. For example:
+
+ The following example is conforming, but not encouraged as it has no heading whose heading level is 1:
<!DOCTYPE HTML>
-<html lang="en">
-<title>Chronotype: CS Student</title>
-<hgroup>
- <h1> The morning </h1>
- <h2> 06:00 to 12:00 </h2>
-</hgroup>
-<p>We sleep.</p>
-<hgroup>
- <h1> The afternoon </h1>
- <h2> 12:00 to 18:00 </h2>
-</hgroup>
-<p>We study.</p>
-<hgroup>
- <h2>Additional Commentary</h2>
- <h3>Because not all this is necessarily true</h3>
- <h6>Ok it's almost certainly not true</h6>
-</hgroup>
-<p>Yeah we probably play, rather than study.</p>
-<hgroup>
- <h1> The evening </h1>
- <h2> 18:00 to 00:00 </h2>
-</hgroup>
-<p>We play.</p>
-<hgroup>
- <h1> The night </h1>
- <h2> 00:00 to 06:00 </h2>
-</hgroup>
-<p>We play some more.</p>
-</html>
-
- The resulting outline would be:
-
-
- - The morning 06:00 to 12:00
-
- The afternoon 12:00 to 18:00
-
- - Additional Commentary Because not all this is necessarily true Ok it's almost certainly not true
-
- - The evening 18:00 to 00:00
-
- The night 00:00 to 06:00
-
+<html lang=en>
+<title>Alphabetic Fruit</title>
+<section>
+ <h2>Apples</h2>
+ <p>Pomaceous.</p>
+</section>
+<section>
+ <h2>Bananas</h2>
+ <p>Edible.</p>
+</section>
+<section>
+ <h2>Carambola</h2>
+ <p>Star.</p>
+</section>
- Exactly how this is represented by user agents, as most interface issues, is left as a matter
- of implementation preference, but the key part is that the hgroup
's descendant
- h1
–h6
elements are what form the element's heading. Thus, the
- following would be equally valid:
+ The document's outline could be presented as follows:
- - The morning — 06:00 to 12:00
-
- The afternoon — 12:00 to 18:00
+
-
- - Additional Commentary — Because not all this is necessarily true — Ok it's almost certainly not true
+
- Apples
+ - Bananas
+ - Carambola
- - The evening — 18:00 to 00:00
-
- The night — 00:00 to 06:00
+
+
- But so would the following:
+
+ The following example is conforming, but not encouraged as the first heading's heading level is not 1:
-
- - The morning
-
- The afternoon
-
- - Additional Commentary
-
- - The evening
-
- The night
-
+ <!DOCTYPE HTML>
+<html lang=en>
+<title>Feathers on The Site of Encyclopedic Knowledge</title>
+ <h2>A plea from our caretakers</h2>
+ <p>Please, we beg of you, send help! We're stuck in the server room!</p>
+<h1>Feathers</h1>
+<p>Epidermal growths.</p>
- The following would also be valid, though maybe less practical in most contexts:
+ The document's outline could be presented as follows:
-
- -
The morning
-
06:00 to 12:00
-
-
The afternoon
-
12:00 to 18:00
+
+ -
- -
Additional Commentary
-
Because not all this is necessarily true
-
Ok it's almost certainly not true
+
- A plea from our caretakers
- -
The evening
-
18:00 to 00:00
-
-
The night
-
00:00 to 06:00
+
+ - Feathers
-
Exposing outlines to users
- User agents are encouraged to expose page outlines to users to aid in navigation. This is
- especially true for non-visual media, e.g. screen readers.
-
- However, to mitigate the difficulties that arise from authors misusing sectioning
- content, user agents are also encouraged to offer a mode that navigates the page using
- heading content alone.
+ User agents are encouraged to expose page outlines to users to
+ aid in navigation. This is especially true for non-visual media, e.g. screen readers.
-
For instance, a user agent could map the arrow keys as follows:
- - Shift + ← Left
-
- Go to previous section, including subsections of previous sections
+
- Shift + ← Left
+ - Go to previous heading
- - Shift + → Right
-
- Go to next section, including subsections of the current section
+
- Shift + → Right
+ - Go to next heading
- - Shift + ↑ Up
-
- Go to parent section of the current section
+
- Shift + ↑ Up
+ - Go to next heading whose level is one less than the
+ current heading's level
- - Shift + ↓ Down
-
- Go to next section, skipping subsections of the current section
+
- Shift + ↓ Down
+ - Go to next heading whose level is the same as the
+ current heading's level
-
- Plus in addition, the user agent could map the j and
- k keys to navigating to the previous or next element of heading
- content, regardless of the section's outline depth and ignoring sections with no
- headings.
-
-
Usage summary
@@ -19318,7 +18516,7 @@ Space is not the only void
h1
–h6
- A section heading
+ A heading
<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
@@ -19332,19 +18530,19 @@ Space is not the only void
<hgroup>
<h1>Burning Music</h1>
- <h2>The Guide To Music On The Playa</h2>
+ <p>The Guide To Music On The Playa</p>
</hgroup>
<section>
<hgroup>
<h1>Main Stage</h1>
- <h2>The Fiction Of A Music Festival</h2>
+ <p>The Fiction Of A Music Festival</p>
</hgroup>
<p>If you want to play on a stage, you should bring one.</p>
</section>
<section>
<hgroup>
<h1>Loudness!</h1>
- <h2>Questions About Amplified Music</h2>
+ <p>Questions About Amplified Music</p>
</hgroup>
<p>Amplifiers up to 300W or 90dB are welcome.</p>
</section>
@@ -19656,7 +18854,6 @@ of Gralmond's winters.</p>
The hr
element does not affect the document's
outline.
-
The pre
element
@@ -19719,7 +18916,6 @@ interface HTMLPreElement : HTMLElement {
This element has rendering requirements involving the
bidirectional algorithm.
-
@@ -19781,7 +18977,6 @@ a friend lost to the
- Categories:
- Flow content.
- - Sectioning root.
- Palpable content.
- Contexts in which this element can be used:
- Where flow content is expected.
@@ -20840,7 +20035,6 @@ first matching case):</p>
- Categories:
- Flow content.
- - Sectioning root.
- Palpable content.
- Contexts in which this element can be used:
- Where flow content is expected.
@@ -42941,7 +42135,7 @@ interface HTMLTableRowElement : HTMLElement {
- Categories:
- - Sectioning root.
+ - None.
- Contexts in which this element can be used:
- As a child of a
tr
element.
- Content model:
@@ -43048,7 +42242,6 @@ interface HTMLTableCellElement : HTMLElement {
- Content model:
- Flow content, but with no
header
, footer
,
sectioning content, or heading content descendants.
-
- Content attributes:
- Global attributes
colspan
@@ -54617,7 +53810,6 @@ out of 233 257 824 bytes available</meter></p>
- Categories:
- Flow content.
- - Sectioning root.
- Listed and autocapitalize-inheriting form-associated element.
- Palpable content.
- Contexts in which this element can be used:
@@ -59405,7 +58597,6 @@ dictionary FormDataEventInit : EventInit {
- Categories:
- Flow content.
- - Sectioning root.
- Interactive content.
- Palpable content.
- Contexts in which this element can be used:
@@ -59932,7 +59123,6 @@ interface HTMLDetailsElement : HTMLElement {
- Categories:
- Flow content.
- - Sectioning root.
- Contexts in which this element can be used:
- Where flow content is expected.
- Content model:
@@ -76438,7 +75628,6 @@ END:VCARD
Until found state
until-found
-
Hidden state
The empty string
@@ -123884,7 +123073,6 @@ interface External {
blockquote
A section quoted from another source
flow;
- sectioning root;
palpable
flow
flow
@@ -123896,7 +123084,7 @@ interface External {
body
Document body
- sectioning root
+ none
html
flow
globals;
@@ -124083,7 +123271,6 @@ interface External {
details
Disclosure control for hiding details
flow;
- sectioning root;
interactive;
palpable
flow
@@ -124109,8 +123296,7 @@ interface External {
dialog
Dialog box or window
- flow;
- sectioning root
+ flow
flow
flow
globals;
@@ -124190,7 +123376,6 @@ interface External {
fieldset
Group of form controls
flow;
- sectioning root;
listed;
form-associated;
palpable
@@ -124218,7 +123403,6 @@ interface External {
figure
Figure with optional caption
flow;
- sectioning root;
palpable
flow
figcaption
*;
@@ -124260,7 +123444,7 @@ interface External {
h1
, h2
, h3
, h4
, h5
, h6
- Section heading
+ Heading
flow;
heading;
palpable
@@ -124295,9 +123479,8 @@ interface External {
hgroup
- heading group
+ Heading container
flow;
- heading;
palpable
legend
;
@@ -125094,7 +124277,7 @@ interface External {
td
Table cell
- sectioning root
+ none
tr
flow
globals;
@@ -125581,19 +124764,6 @@ interface External {
input
(if the type
attribute is not in the Hidden state);
video
(if the controls
attribute is present)
-
- Sectioning roots
-
- blockquote
;
- body
;
- details
;
- dialog
;
- fieldset
;
- figure
;
- td
-
- —
-
Form-associated elements