Section Headings on Web Pages
Headers, lists, bold text, and other formatting conveys meaning and content structure in addition to changing the style of text on our web pages.
We should do everything in our power to make sure that our attention to appearance does not interfere with people’s ability to understand that meaning and structure.
Headings (the title is the page's first heading, or h1, followed by h2, h3, etc.) are one of the most important tools we have for helping people find, read, and understand the information on a page.
Impact of Headers
- Accessibility. Screen readers let people skip through a page’s content header-by-header. Unexpected and out-of-place markup interrupts that flow.
- Usability. The consistent size and style of headers across our site lets people quickly scan a page’s content and understand its structure and meaning.
- SEO (search engine optimization). Headers help search engines understand the information on our pages, and accurately deliver them to people performing web searches.
Guidelines for Good Headings
Heading Formats Are for Headings Only
Check that headings are actually titles for structural sections of the page and are not being used to format other content.
For any text that is formatted as a heading just to make it larger, reset its formatting to normal.
Descend in Strict Order
Page titles are always Heading 1 format, so your first header choice is always Heading 2.
Subsequent headings occur in strictly descending order. If a compelling argument can be made that the skipping of header levels more accurately conveys a correct understanding of the overall structure of the document, then an exception may be considered. No exception shall be made for aesthetic reasons.
Top-level headings (the main sections of your page) are therefore Heading 2s. Subsections of your page are Heading 3s. Sub-subsections, etc., are Heading 4s, Heading 5s, and Heading 6s.
Use Headings to Introduce Sections
All text introducing a section should use a heading format.
Hints that it ought to be a header: you've made it bold, or used capitalization or punctuation as you would in a title.
Use Title Punctuation
Headings are not part of a sentence, so they should not include a colon (:) at the end. Some headings (like for FAQs) may be punctuated and capitalized as questions, but scannability is best when headings are brief and meaningful, so sentence-length headers should be avoided when possible.
Do Not Link Headings
Headings should not be links. Rework your content to put the link in the text that follows the header.
Do Not Bold Headings
Our headings look as they do because of the styles that we've applied across the whole site. Whether you like them or not, their consistency helps people navigate and use our site more quickly and easily.
Create your headers as if you were preparing an outline. They should make sense even without content on the page. Here's an example showing the HTML tags that occur behind the scenes.
<H1>PAGE TITLE: General Assembly</H1> [pages may only have one H1]
<H2>General Assembly Boston 2015</H2>
<H2>Past General Assemblies<H2>
Other Ways to Make Content Stand Out
To call attention to a particular piece of content without misusing header markup, consider these options:
- Add an image or textual "aside” to the content area.
- Bold or linked text (in small amounts), italicized text, and bulleted lists all effectively call out information.
- Make a new page for the important information, so that everything critical can be placed “above the fold.”