Section Headings on Web Pages

person creating an org chart using a sharpie

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

By UUA Web Team, Information Technology Services

From LeaderLab

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.

Use Meaningful Headings on Your Web Pages

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.”

About the Author

UUA Web Team, Information Technology Services

The Web Team develops and manages UUA web sites and applications including UUA.org and UUWorld.org and several custom-built applications like our ministry search and congregational certification systems.

For more information contact .