<h1>
for the title and <h2>
for the subheadings. If your subheadings themselves contain subheadings, those should be marked up with <h3>
, and so on.
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
<h3>Sub-subheading</h3>
<p>Lorem ipsum dolor sit amet...</p>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet...</p>
Looks reasonable so far, right?
Now, if this is a typical web page, it will also have some navigation elements, and perhaps some secondary content, such as related forum discussions. Each of these sections of the page will have a heading of some kind, but what heading tag would you use?
To some extent, your answer might depend on how you think. If your first reaction is that this additional content is less important than the article, you might write something like this:
<div class="navigation">
<h2>Navigation</h2>
<ul>...</ul>
</div>
<div class="article">
<h1>Article title</h1>
<p>Lorem ipsum dolor sit amet...</p>
?
</div>
<div class="discussion">
<h3>Related Discussion</h3>
<ul>...</ul>
</div>
This wouldn’t be an unreasonable assumption to make, and certainly the W3C’s HTML Validator would be perfectly happy with it, but in fact it seriously hurts the accessibility of your site.
The W3C’s Web Content Accessibility Guidelines 1.0 (WCAG) clarifies this in its discussion of section headings:
[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).So in fact, because the navigation, article, and related discussion are all at the same level within the structure of the page (whatever their relative importance), they should all begin with
<h1>
headings.
Taking the example further, the page will probably have some kind of top-level heading or logo with the name of your site in it. Clearly this should be marked up with an <h1>
tag, but how does this affect the rest of the document?
Here’s where the hard lesson that I recently learned comes in. I had come to think of the <div>
tag as a tool for dividing up a document into “sub-documents”. Following this line of thinking, you might be tempted to do something like this:
<h1>My Site</h1>
<div class="navigation">
<h1>Navigation</h1>
?
</div>
<div class="article">
<h1>Article Title</h1>
?
</div>
<div class="discussion">
<h1>Related Discussion</h1>
?
</div>
Because each heading in the above code is the top-level heading within the <div>
tag that contains it, it might seem sensible to use <h1>
for every one.
This can be particularly tempting if you’re using a content management system of some kind to write the article content separately, and then insert it into the page dynamically. When working on the article in isolation, the article’s title is the top-level heading, so using an <h1>
seems to make sense. When you place that article in the context of a full web page, however, that is no longer the case.
Although they can add structure to your document that you can use when applying styles with CSS, <div>
tags and other block-level elements do not have a bearing on the heading structure of your document. From WCAG 1.0 again:
Sections should be introduced with the HTML heading elements (H1-H6). Other markup may complement these elements to improve presentation (e.g., the HR element to create a horizontal dividing line), but visual presentation is not sufficient to identify document sections.Because assistive technologies like screen readers allow users to navigate through a document by its heading structure, your headings need to form a sensible structure independent from the rest of your document markup. So in our example above, each section of the page should begin with
<h2>
:
<h1>My Site</h1>
<div class="navigation">
<h2>Navigation</h2>
?
</div>
<div class="article">
<h2>Article Title</h2>
?
</div>
<div class="discussion">
<h2>Related Discussion</h2>
?
</div>
To test the heading structure on your own site, you can use the W3C’s Semantic Data Extractor to view the outline of your document, based on its heading structure.
You’ll note that the front page of SitePoint doesn’t do too well on this test, so don’t feel too bad if your site doesn’t hold up on this front either. It just goes to show that I’m not the only one at SitePoint who has learned this lesson the hard way. You can bet that this will be fixed in the next redesign of sitepoint.com!
Be sure to read my latest post on this subject, as things have changed.
Frequently Asked Questions (FAQs) about Heading Structure
What is the importance of heading structure in web content?
Heading structure plays a crucial role in web content. It not only helps in organizing the content but also improves the readability and accessibility of the website. Headings guide the readers through the content, making it easier for them to understand the flow of information. They also help search engines understand the content, which can improve the website’s SEO ranking.
How many levels of headings are there in HTML?
HTML provides six levels of headings, labeled H1 to H6. H1 is the highest (or most important) level and H6 is the lowest. Each level represents a different section of the content. It’s important to use these levels correctly to maintain a well-structured document.
Can I skip heading levels in my content?
It’s not recommended to skip heading levels in your content. Skipping heading levels can confuse your readers and make it harder for them to follow your content. It can also negatively impact your SEO as search engines use heading levels to understand the structure of your content.
How can I use heading structure to improve my SEO?
Heading structure is a key factor in SEO. Search engines use headings to index the structure and content of your web pages. Using keywords in your headings can improve your search engine ranking. However, it’s important to use headings naturally and not overstuff them with keywords.
What is the difference between H1 and H2 headings?
H1 and H2 headings represent different levels of headings in HTML. H1 is the highest level of heading and is usually used for the main title of the page. H2 is the second level of heading and is typically used for subheadings.
Can I use multiple H1 headings in my content?
While it’s technically possible to use multiple H1 headings in your content, it’s generally not recommended. Having multiple H1 headings can confuse search engines and make it harder for them to understand the structure of your content.
How should I choose my heading text?
Your heading text should accurately represent the content that follows it. It should be concise, clear, and descriptive. Using keywords in your headings can also improve your SEO, but remember to use them naturally and avoid keyword stuffing.
What is the role of heading structure in accessibility?
Heading structure plays a crucial role in accessibility. It helps screen readers and other assistive technologies understand the structure of the content, making it easier for users with disabilities to navigate your website.
Can I use CSS to change the appearance of my headings?
Yes, you can use CSS to change the appearance of your headings. However, it’s important to remember that the visual appearance of headings does not affect their semantic meaning or their importance in the document structure.
What is the best practice for using heading structure in web content?
The best practice for using heading structure in web content is to use it to organize and structure your content. Start with an H1 heading for the main title, followed by H2 headings for main sections, and so on. Avoid skipping heading levels and remember to use headings naturally and not overstuff them with keywords.
![Kevin Yank](https://uploads.sitepoint.com/wp-content/uploads/2015/04/1429112558kevinyank-96x96.jpg)
Kevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.