h1
through h6
elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.
Semantic meaning means that the tag you use around content indicates the type of information it contains.
If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.
Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.
As an example, a page with an h2
element followed by several subsections labeled with h4
tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.
One final point, each page should always have one (and only one) h1
element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.
h5
tags to the proper heading level to indicate they are subsections of the h2
ones. Use h3
tags for the purpose.
h3
tags.
testString: assert($("h3").length === 6, 'Your code should have 6 h3
tags.');
- text: Your code should have 6 h3
closing tags.
testString: assert((code.match(/\/h3/g) || []).length===6,'Your code should have 6 h3
closing tags.');
- text: Your code should not have any h5
tags.
testString: assert($("h5").length === 0, "Your code should not have any h5
tags.");
- text: Your code should not have any h5
closing tags.
testString: assert(/\/h5/.test(code)===false, 'Your code should not have any h5
closing tags');
```