Search code examples
htmlfigurehtml-heading

Should headings in figure elements not be considered document headings?


Assume we have a page like this:

<!DOCTYPE HTML><HTML><BODY>

<ARTICLE>
  <H1>Heading Example</H1>
    <P>Here is what a heading (level 2) looks like:</P>
    <FIGURE>
      <H2>Demo Heading</H2>
    </FIGURE>
</ARTICLE>

</BODY></HTML>

When parsing this page, should the H2 element not be considered a semantic start of a new subsection? Is there any program currently in service that exhibits such behavior (specifically treats headings within figures differently when parsing a document)? From what I know of the HTML5 spec, I think it should not be considered a start of a new subsection, but perhaps it should and I'm incorrect.


Solution

  • A figure is a sectioning root. The first heading in any sectioning root never starts a subsection regardless of its rank, unless the heading itself appears after or within a different sectioning content element within the sectioning root, like for instance the article > h1 in your page. Here is the relevant part of the spec:

    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.

    Notice that this paragraph does not mention sectioning roots. The only difference between a sectioning content element and a sectioning root element is that the latter has its own outline that is completely separate from the rest of the page. Otherwise they're basically the same.

    So, in theory, you are correct. This is how the behavior should be. However I'm not familiar with outline implementations and so I'm not aware if any exist that don't implement multiple sectioning roots correctly. I did however run your snippet through this tool and it seems to handle it correctly (sectioning roots other than body are hidden by default but you can choose to display all of them).