HTML heading element nesting example looks out of context

[ScottSorgent]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

What specific section or headline is this issue about?

Nesting

What information was incorrect, unhelpful, or incomplete?

tags were generalized as h's in the general text and not explained how the nesting was done with html. Also, no html was properly done on the first section when identing headers and the tags. It's not that easy, so the correct example should be given or added to not confuse the reader or learner.

What did you expect to see?

Proper html for the examples.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No

MDN metadata

Page report details

• Folder: en-us/web/html/element/heading_elements
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/heading_elements/index.md
• Last commit: https://github.com/mdn/content/commit/fdd3ac5598c3ddceb71e59949b003936ae99f647
• Document last modified: 2024-02-22T19:57:33.000Z

[bsmth]

Thanks for raising this one. That's a good point, I think the section is to trying to illustrate that the headings should reflect the content structure and organization. We should add a HTML equivalent before the list items.

The important bit looks like the part that mentions "Most screen readers can also generate an ordered list of all the headings on a page" but it would be nice to see the HTML headings. Maybe something like this is better:

Given the following page structure:

<h1>Beetles</h1>
<h2>Etymology</h2>
<h2>Distribution and Diversity</h2>
<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<!-- etc. -->

Screen readers would generate an ordered list like this:

1. h1 Beetles

   1. h2 Etymology

   2. h2 Distribution and Diversity

   3. h2 Evolution

      1. h3 Late Paleozoic

As a side note, I'm not sure about "nesting" as I don't think this is recommended (I believe it fails HTML validation):

<h1>Beetles
  <h2>Etymology</h2>
</h1>