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.
The hgroup element is intended for these kinds of situations:
hgroup
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> ...
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.
header
footer
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).
h4
h5
h6
h1
<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. --> @@ -11652,7 +11650,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. --> @@ -11725,7 +11723,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: @@ -11764,7 +11762,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> @@ -16341,7 +16339,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: @@ -16502,7 +16500,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> @@ -16518,7 +16516,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> @@ -16569,7 +16567,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> @@ -16577,7 +16575,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> @@ -16638,26 +16636,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. - @@ -16676,8 +16670,8 @@ interface HTMLBodyElement : HTMLElement { ><H1 >Graduation</H1 ><Section - ><H1 - >Ceremony</H1 + ><H2 + >Ceremony</H2 ><P >Opening Procession</P ><P @@ -16690,8 +16684,8 @@ interface HTMLBodyElement : HTMLElement { >Closing Speech by Headmaster</P ></Section ><Section - ><H1 - >Graduates</H1 + ><H2 + >Graduates</H2 ><Ul ><Li >Molly Carpenter</Li @@ -16719,37 +16713,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> @@ -16810,7 +16804,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> @@ -16822,11 +16816,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... @@ -16866,7 +16860,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> @@ -16978,7 +16972,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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,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. @@ -17374,7 +17234,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. @@ -17394,7 +17254,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> @@ -17456,21 +17316,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 @@ -17486,11 +17345,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. @@ -17708,103 +17567,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> @@ -17812,80 +17613,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> @@ -17894,383 +17636,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> @@ -18293,100 +17677,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> @@ -18399,91 +17723,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"> @@ -18496,7 +17747,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 @@ -18504,155 +17755,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 @@ -18725,7 +17923,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> @@ -18739,19 +17937,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> @@ -19063,7 +18261,6 @@ of Gralmond's winters.</p> The hr element does not affect the document's outline. - The pre element @@ -19126,7 +18323,6 @@ interface HTMLPreElement : HTMLElement { This element has rendering requirements involving the bidirectional algorithm. - @@ -19188,7 +18384,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. @@ -20247,7 +19442,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. @@ -42251,7 +41445,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: @@ -42358,7 +41552,6 @@ interface HTMLTableCellElement : HTMLElement { Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. - Content attributes: Global attributes colspan @@ -53927,7 +53120,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: @@ -58671,7 +57863,6 @@ dictionary FormDataEventInit : EventInit { Categories: Flow content. - Sectioning root. Interactive content. Palpable content. Contexts in which this element can be used: @@ -59198,7 +58389,6 @@ interface HTMLDetailsElement : HTMLElement { Categories: Flow content. - Sectioning root. Contexts in which this element can be used: Where flow content is expected. Content model: @@ -75664,7 +74854,6 @@ END:VCARD Until found state until-found - Hidden state The empty string @@ -122942,7 +122131,6 @@ interface External { blockquote A section quoted from another source flow; - sectioning root; palpable flow flow @@ -122954,7 +122142,7 @@ interface External { body Document body - sectioning root + none html flow globals; @@ -123141,7 +122329,6 @@ interface External { details Disclosure control for hiding details flow; - sectioning root; interactive; palpable flow @@ -123167,8 +122354,7 @@ interface External { dialog Dialog box or window - flow; - sectioning root + flow flow flow globals; @@ -123248,7 +122434,6 @@ interface External { fieldset Group of form controls flow; - sectioning root; listed; form-associated; palpable @@ -123276,7 +122461,6 @@ interface External { figure Figure with optional caption flow; - sectioning root; palpable flow figcaption*; @@ -123318,7 +122502,7 @@ interface External { h1, h2, h3, h4, h5, h6 - Section heading + Heading flow; heading; palpable @@ -123353,9 +122537,8 @@ interface External { hgroup - heading group + Heading container flow; - heading; palpable legend; @@ -124152,7 +123335,7 @@ interface External { td Table cell - sectioning root + none tr flow globals; @@ -124639,19 +123822,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
del
<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. --> @@ -11725,7 +11723,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: @@ -11764,7 +11762,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> @@ -16341,7 +16339,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: @@ -16502,7 +16500,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> @@ -16518,7 +16516,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> @@ -16569,7 +16567,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> @@ -16577,7 +16575,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> @@ -16638,26 +16636,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. - @@ -16676,8 +16670,8 @@ interface HTMLBodyElement : HTMLElement { ><H1 >Graduation</H1 ><Section - ><H1 - >Ceremony</H1 + ><H2 + >Ceremony</H2 ><P >Opening Procession</P ><P @@ -16690,8 +16684,8 @@ interface HTMLBodyElement : HTMLElement { >Closing Speech by Headmaster</P ></Section ><Section - ><H1 - >Graduates</H1 + ><H2 + >Graduates</H2 ><Ul ><Li >Molly Carpenter</Li @@ -16719,37 +16713,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> @@ -16810,7 +16804,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> @@ -16822,11 +16816,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... @@ -16866,7 +16860,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> @@ -16978,7 +16972,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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,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. @@ -17374,7 +17234,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. @@ -17394,7 +17254,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> @@ -17456,21 +17316,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 @@ -17486,11 +17345,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. @@ -17708,103 +17567,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> @@ -17812,80 +17613,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> @@ -17894,383 +17636,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> @@ -18293,100 +17677,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> @@ -18399,91 +17723,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"> @@ -18496,7 +17747,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 @@ -18504,155 +17755,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 @@ -18725,7 +17923,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> @@ -18739,19 +17937,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> @@ -19063,7 +18261,6 @@ of Gralmond's winters.</p> The hr element does not affect the document's outline. - The pre element @@ -19126,7 +18323,6 @@ interface HTMLPreElement : HTMLElement { This element has rendering requirements involving the bidirectional algorithm. - @@ -19188,7 +18384,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. @@ -20247,7 +19442,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. @@ -42251,7 +41445,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: @@ -42358,7 +41552,6 @@ interface HTMLTableCellElement : HTMLElement { Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. - Content attributes: Global attributes colspan @@ -53927,7 +53120,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: @@ -58671,7 +57863,6 @@ dictionary FormDataEventInit : EventInit { Categories: Flow content. - Sectioning root. Interactive content. Palpable content. Contexts in which this element can be used: @@ -59198,7 +58389,6 @@ interface HTMLDetailsElement : HTMLElement { Categories: Flow content. - Sectioning root. Contexts in which this element can be used: Where flow content is expected. Content model: @@ -75664,7 +74854,6 @@ END:VCARD Until found state until-found - Hidden state The empty string @@ -122942,7 +122131,6 @@ interface External { blockquote A section quoted from another source flow; - sectioning root; palpable flow flow @@ -122954,7 +122142,7 @@ interface External { body Document body - sectioning root + none html flow globals; @@ -123141,7 +122329,6 @@ interface External { details Disclosure control for hiding details flow; - sectioning root; interactive; palpable flow @@ -123167,8 +122354,7 @@ interface External { dialog Dialog box or window - flow; - sectioning root + flow flow flow globals; @@ -123248,7 +122434,6 @@ interface External { fieldset Group of form controls flow; - sectioning root; listed; form-associated; palpable @@ -123276,7 +122461,6 @@ interface External { figure Figure with optional caption flow; - sectioning root; palpable flow figcaption*; @@ -123318,7 +122502,7 @@ interface External { h1, h2, h3, h4, h5, h6 - Section heading + Heading flow; heading; palpable @@ -123353,9 +122537,8 @@ interface External { hgroup - heading group + Heading container flow; - heading; palpable legend; @@ -124152,7 +123335,7 @@ interface External { td Table cell - sectioning root + none tr flow globals; @@ -124639,19 +123822,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
<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: @@ -11764,7 +11762,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> @@ -16341,7 +16339,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: @@ -16502,7 +16500,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> @@ -16518,7 +16516,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> @@ -16569,7 +16567,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> @@ -16577,7 +16575,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> @@ -16638,26 +16636,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. - @@ -16676,8 +16670,8 @@ interface HTMLBodyElement : HTMLElement { ><H1 >Graduation</H1 ><Section - ><H1 - >Ceremony</H1 + ><H2 + >Ceremony</H2 ><P >Opening Procession</P ><P @@ -16690,8 +16684,8 @@ interface HTMLBodyElement : HTMLElement { >Closing Speech by Headmaster</P ></Section ><Section - ><H1 - >Graduates</H1 + ><H2 + >Graduates</H2 ><Ul ><Li >Molly Carpenter</Li @@ -16719,37 +16713,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> @@ -16810,7 +16804,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> @@ -16822,11 +16816,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... @@ -16866,7 +16860,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> @@ -16978,7 +16972,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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,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. @@ -17374,7 +17234,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. @@ -17394,7 +17254,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> @@ -17456,21 +17316,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 @@ -17486,11 +17345,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. @@ -17708,103 +17567,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> @@ -17812,80 +17613,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> @@ -17894,383 +17636,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> @@ -18293,100 +17677,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> @@ -18399,91 +17723,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"> @@ -18496,7 +17747,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 @@ -18504,155 +17755,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 @@ -18725,7 +17923,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> @@ -18739,19 +17937,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> @@ -19063,7 +18261,6 @@ of Gralmond's winters.</p> The hr element does not affect the document's outline. - The pre element @@ -19126,7 +18323,6 @@ interface HTMLPreElement : HTMLElement { This element has rendering requirements involving the bidirectional algorithm. - @@ -19188,7 +18384,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. @@ -20247,7 +19442,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. @@ -42251,7 +41445,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: @@ -42358,7 +41552,6 @@ interface HTMLTableCellElement : HTMLElement { Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. - Content attributes: Global attributes colspan @@ -53927,7 +53120,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: @@ -58671,7 +57863,6 @@ dictionary FormDataEventInit : EventInit { Categories: Flow content. - Sectioning root. Interactive content. Palpable content. Contexts in which this element can be used: @@ -59198,7 +58389,6 @@ interface HTMLDetailsElement : HTMLElement { Categories: Flow content. - Sectioning root. Contexts in which this element can be used: Where flow content is expected. Content model: @@ -75664,7 +74854,6 @@ END:VCARD Until found state until-found - Hidden state The empty string @@ -122942,7 +122131,6 @@ interface External { blockquote A section quoted from another source flow; - sectioning root; palpable flow flow @@ -122954,7 +122142,7 @@ interface External { body Document body - sectioning root + none html flow globals; @@ -123141,7 +122329,6 @@ interface External { details Disclosure control for hiding details flow; - sectioning root; interactive; palpable flow @@ -123167,8 +122354,7 @@ interface External { dialog Dialog box or window - flow; - sectioning root + flow flow flow globals; @@ -123248,7 +122434,6 @@ interface External { fieldset Group of form controls flow; - sectioning root; listed; form-associated; palpable @@ -123276,7 +122461,6 @@ interface External { figure Figure with optional caption flow; - sectioning root; palpable flow figcaption*; @@ -123318,7 +122502,7 @@ interface External { h1, h2, h3, h4, h5, h6 - Section heading + Heading flow; heading; palpable @@ -123353,9 +122537,8 @@ interface External { hgroup - heading group + Heading container flow; - heading; palpable legend; @@ -124152,7 +123335,7 @@ interface External { td Table cell - sectioning root + none tr flow globals; @@ -124639,19 +123822,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
<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> @@ -16341,7 +16339,7 @@ console.log(style.disabled); // false
html
<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> @@ -16518,7 +16516,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> @@ -16569,7 +16567,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> @@ -16577,7 +16575,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> @@ -16638,26 +16636,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. - @@ -16676,8 +16670,8 @@ interface HTMLBodyElement : HTMLElement { ><H1 >Graduation</H1 ><Section - ><H1 - >Ceremony</H1 + ><H2 + >Ceremony</H2 ><P >Opening Procession</P ><P @@ -16690,8 +16684,8 @@ interface HTMLBodyElement : HTMLElement { >Closing Speech by Headmaster</P ></Section ><Section - ><H1 - >Graduates</H1 + ><H2 + >Graduates</H2 ><Ul ><Li >Molly Carpenter</Li @@ -16719,37 +16713,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> @@ -16810,7 +16804,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> @@ -16822,11 +16816,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... @@ -16866,7 +16860,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> @@ -16978,7 +16972,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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,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. @@ -17374,7 +17234,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. @@ -17394,7 +17254,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> @@ -17456,21 +17316,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 @@ -17486,11 +17345,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. @@ -17708,103 +17567,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> @@ -17812,80 +17613,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> @@ -17894,383 +17636,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> @@ -18293,100 +17677,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> @@ -18399,91 +17723,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"> @@ -18496,7 +17747,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 @@ -18504,155 +17755,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 @@ -18725,7 +17923,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> @@ -18739,19 +17937,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> @@ -19063,7 +18261,6 @@ of Gralmond's winters.</p> The hr element does not affect the document's outline. - The pre element @@ -19126,7 +18323,6 @@ interface HTMLPreElement : HTMLElement { This element has rendering requirements involving the bidirectional algorithm. - @@ -19188,7 +18384,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. @@ -20247,7 +19442,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. @@ -42251,7 +41445,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: @@ -42358,7 +41552,6 @@ interface HTMLTableCellElement : HTMLElement { Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. - Content attributes: Global attributes colspan @@ -53927,7 +53120,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: @@ -58671,7 +57863,6 @@ dictionary FormDataEventInit : EventInit { Categories: Flow content. - Sectioning root. Interactive content. Palpable content. Contexts in which this element can be used: @@ -59198,7 +58389,6 @@ interface HTMLDetailsElement : HTMLElement { Categories: Flow content. - Sectioning root. Contexts in which this element can be used: Where flow content is expected. Content model: @@ -75664,7 +74854,6 @@ END:VCARD Until found state until-found - Hidden state The empty string @@ -122942,7 +122131,6 @@ interface External { blockquote A section quoted from another source flow; - sectioning root; palpable flow flow @@ -122954,7 +122142,7 @@ interface External { body Document body - sectioning root + none html flow globals; @@ -123141,7 +122329,6 @@ interface External { details Disclosure control for hiding details flow; - sectioning root; interactive; palpable flow @@ -123167,8 +122354,7 @@ interface External { dialog Dialog box or window - flow; - sectioning root + flow flow flow globals; @@ -123248,7 +122434,6 @@ interface External { fieldset Group of form controls flow; - sectioning root; listed; form-associated; palpable @@ -123276,7 +122461,6 @@ interface External { figure Figure with optional caption flow; - sectioning root; palpable flow figcaption*; @@ -123318,7 +122502,7 @@ interface External { h1, h2, h3, h4, h5, h6 - Section heading + Heading flow; heading; palpable @@ -123353,9 +122537,8 @@ interface External { hgroup - heading group + Heading container flow; - heading; palpable legend; @@ -124152,7 +123335,7 @@ interface External { td Table cell - sectioning root + none tr flow globals; @@ -124639,19 +123822,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
<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> @@ -16569,7 +16567,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> @@ -16577,7 +16575,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> @@ -16638,26 +16636,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. - @@ -16676,8 +16670,8 @@ interface HTMLBodyElement : HTMLElement { ><H1 >Graduation</H1 ><Section - ><H1 - >Ceremony</H1 + ><H2 + >Ceremony</H2 ><P >Opening Procession</P ><P @@ -16690,8 +16684,8 @@ interface HTMLBodyElement : HTMLElement { >Closing Speech by Headmaster</P ></Section ><Section - ><H1 - >Graduates</H1 + ><H2 + >Graduates</H2 ><Ul ><Li >Molly Carpenter</Li @@ -16719,37 +16713,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> @@ -16810,7 +16804,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> @@ -16822,11 +16816,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... @@ -16866,7 +16860,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> @@ -16978,7 +16972,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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,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. @@ -17374,7 +17234,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. @@ -17394,7 +17254,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> @@ -17456,21 +17316,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 @@ -17486,11 +17345,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. @@ -17708,103 +17567,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> @@ -17812,80 +17613,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> @@ -17894,383 +17636,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> @@ -18293,100 +17677,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> @@ -18399,91 +17723,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"> @@ -18496,7 +17747,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 @@ -18504,155 +17755,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 @@ -18725,7 +17923,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> @@ -18739,19 +17937,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> @@ -19063,7 +18261,6 @@ of Gralmond's winters.</p> The hr element does not affect the document's outline. - The pre element @@ -19126,7 +18323,6 @@ interface HTMLPreElement : HTMLElement { This element has rendering requirements involving the bidirectional algorithm. - @@ -19188,7 +18384,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. @@ -20247,7 +19442,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. @@ -42251,7 +41445,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: @@ -42358,7 +41552,6 @@ interface HTMLTableCellElement : HTMLElement { Content model: Flow content, but with no header, footer, sectioning content, or heading content descendants. - Content attributes: Global attributes colspan @@ -53927,7 +53120,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: @@ -58671,7 +57863,6 @@ dictionary FormDataEventInit : EventInit { Categories: Flow content. - Sectioning root. Interactive content. Palpable content. Contexts in which this element can be used: @@ -59198,7 +58389,6 @@ interface HTMLDetailsElement : HTMLElement { Categories: Flow content. - Sectioning root. Contexts in which this element can be used: Where flow content is expected. Content model: @@ -75664,7 +74854,6 @@ END:VCARD Until found state until-found - Hidden state The empty string @@ -122942,7 +122131,6 @@ interface External { blockquote A section quoted from another source flow; - sectioning root; palpable flow flow @@ -122954,7 +122142,7 @@ interface External { body Document body - sectioning root + none html flow globals; @@ -123141,7 +122329,6 @@ interface External { details Disclosure control for hiding details flow; - sectioning root; interactive; palpable flow @@ -123167,8 +122354,7 @@ interface External { dialog Dialog box or window - flow; - sectioning root + flow flow flow globals; @@ -123248,7 +122434,6 @@ interface External { fieldset Group of form controls flow; - sectioning root; listed; form-associated; palpable @@ -123276,7 +122461,6 @@ interface External { figure Figure with optional caption flow; - sectioning root; palpable flow figcaption*; @@ -123318,7 +122502,7 @@ interface External { h1, h2, h3, h4, h5, h6 - Section heading + Heading flow; heading; palpable @@ -123353,9 +122537,8 @@ interface External { hgroup - heading group + Heading container flow; - heading; palpable legend; @@ -124152,7 +123335,7 @@ interface External { td Table cell - sectioning root + none tr flow globals; @@ -124639,19 +123822,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
<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.
<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>
<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> @@ -17027,13 +17021,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> @@ -17053,7 +17047,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> @@ -17061,14 +17055,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> @@ -17123,12 +17117,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. @@ -17146,33 +17141,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> @@ -17190,11 +17158,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 @@ -17205,8 +17173,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 @@ -17218,133 +17187,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 @@ -17360,13 +17221,12 @@ Space is not the only void
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.
h2
h3
<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> @@ -17190,11 +17158,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.
p
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 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.
<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> @@ -17456,21 +17316,20 @@ Space is not the only void
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.
When the footer element contains entire sections, they represent appendices, indices, long colophons, verbose license @@ -17486,11 +17345,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.
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.
blockquote
td
The outline is all headings in a + document, in tree order.
body
details
dialog
fieldset
figure
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:
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> @@ -17812,80 +17613,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>
<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> @@ -17812,80 +17613,21 @@ Space is not the only void
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.
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.)
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> @@ -17894,383 +17636,25 @@ Space is not the only void
...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>.
<hgroup - id="document-title">...</hgroup>
<h1>HTML</h1>
<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).
<p>Some intro to the - document.</p>
Nested sections:
Section implied for first h2 element.
Associated with heading <h2>Table of contents</h2>.
<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).
<ol id=toc>...</ol>
No nested sections.
Section implied for second h2 element.
Associated with heading <h2>First section</h2>.
<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).
<p>Some intro to the first - section.</p>
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.
The element being exited is a heading content element or an - element with a hidden attribute.
hidden
Pop that element from the stack.
Do nothing.
Push the element being entered onto the stack. (This causes the algorithm to skip that - element and any descendants of the 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.
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.)
If current outline target is not null, push current outline target onto the stack.
Let current outline target's parent section be current section.
Let current section be current outline - target's parent section.
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.)
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.
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.
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:
nav
aside
<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:
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> @@ -18293,100 +17677,40 @@ Space is not the only void
This book would form the following outline:
Its outline could be presented as follows:
Notice that the title element does not participate in the outline.
title
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:
Notice that the title element is not a heading.
A document can contain multiple top-level headings:
<!DOCTYPE HTML> @@ -18399,91 +17723,18 @@ Space is not the only void
This would form the following simple outline consisting of three top-level sections:
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:
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>
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:
article
header elements do not influence the outline of a + document:
<!DOCTYPE HTML> <html lang="en"> @@ -18496,7 +17747,7 @@ Space is not the only void
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>
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:
But so would the following:
The following example is conforming, but not encouraged as the first heading's heading level is not 1:
<!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 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 +
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:
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.
<h1>The Guide To Music On The Playa</h1> <h2>The Main Stage</h2> @@ -18739,19 +17937,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>
The hr element does not affect the document's outline.
hr
pre
This element has rendering requirements involving the bidirectional algorithm.
tr
colspan
until-found
figcaption
legend
input
type
video
controls