Section Headings on Web Pages
Part of Guide for Writing for the Web
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
Headers impact:
- 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.
Use Meaningful Headers on Your Web Pages
Use brief, meaningful headers to allow your reader to scan a page quickly for the information they need. The use of "scanning" is one of the major ways web readers differ from print readers.
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.
Capitalize and Punctuate Like Titles
Scannability is best when headings are brief and meaningful, so sentence-length headers should be avoided when possible. Use a tool like the Title Case Converter to check your capitalization.
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.
Example Headings
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>
<H3>Registration</H3>
<H4>Adult Registration</H4>
<H4>Youth Registration</H4>
<H5>Scholarships</H5>
<H6>Scholarship Restrictions</H6>
<H3>Transportation</H3>
<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.”