Skip to main content
NC State Home

Heading Block

Heading blocks are used on almost all types of pages. This is mainly because most web users do not read everything on a web page word for word. Rather, they skim to try to find the section of content that might answer the question they have. Well-structured headings help with this navigation process.

Web pages have six levels of headings, ranging from level 1 (H1) to level 6 (H6). It is important to place headings according to this level hierarchy — i.e., H1 always goes first, H2 always goes below H1, H3 always goes below H2, and so on — for the following reasons:

  • Correctly placed headings create a logical content outline that users of screen readers (such as vision-impaired people) rely upon as they navigate through a web page.
  • Headings help provide semantic meaning to a web page so search engines can better crawl the site’s content. The better a search engine can understand the site’s content, the higher that page is likely to appear in search results.
  • When all content maintainers of a site use headings correctly, headings help to create a consistent look and feel for all users of that site.
Screenshot example of structuring header hierarchies on a webpage.
Heading hierarchies are essential to both the readability and the accessibility of webpages.

Key Accessibility Considerations

  • Use headings in sequential order. Do not skip over consecutive heading levels, e.g., going from H2 directly to H4.
  • Include only one H1 per page. By web convention, the page title should be the only H1 on any given page. This clearly identifies the main topic of the page for assistive technologies and search engines.
  • Use H2s for main sections within the body. All headings within the body content should be H2 or lower. The NC State Theme intentionally prevents users from adding an additional H1 within the body, to preserve proper heading structure.
  • Use H3s and beyond only for true subsections. If you need to divide content within an H2 section, use an H3; if you need to divide content within an H3 section, use an H4; and so on. Only use H3s and beyond when the content structure genuinely requires it.
  • Avoid deeper heading levels when possible. If you find yourself using H4–H6 frequently, consider restructuring your content or splitting it across multiple pages. Overly complex hierarchies can make navigation more difficult for users of screen reader users.

Creating Heading Anchor Points

Screenshot of the various heading hierarchies found in the block settings
HTML anchors are a great way to help users navigate a page quickly.

If you have a long web page with many sections, you might want to add an anchor point so that you link a user to the specific portion of the web page that will address their question.

Anchor points can be added by clicking in a heading block and then looking at the block’s settings in the right-hand panel. The “HTML Anchor” section lets you add an anchor point that you can then use in linking.