Section headings help users find and read content on a page. They're also important for accessibility. People with low vision or cognitive disabilities can use headings to navigate through a page using a screen reader. A screen reader can jump from heading to heading, reading it aloud, so that users can determine if they want to keep reading or skip to the next heading.
Heading text is placed inside a heading tag. The heading tag doesn't display on a web page but can be seen when viewing your page's HTML code in the HTML editor. The tag helps screen readers identify text as a heading.
<h1>This is a heading</h1>
Headings are usually formatted bigger and bolder than paragraph text— to get a reader's attention. As you go down a level, the number increases and the heading size decreases (view heading sizes).
Headings should never be used for the sole purpose of how they look. Headings are for organization and structure. They should provide users with a brief description of the content below. They can also help organize large amounts of content into smaller, digestible sections.
How you order headings dictates how a screen reader will navigate through them. As you go down a level, the number should increase by one, like a numbered list within an outline. If headings aren't used in the proper order, it makes it harder for someone using a screen reader to understand the content. Imagine tying to read a book with chapters that are out of order or missing.
Heading Order
A. correct
<h1>Page title</h1>
paragraph(s)
<h2>First section</h2>
paragraph(s)
<h3>First section's subsection</h3>
paragraph(s)
<h2>Second section</h2>
paragraph(s)
B. incorrect
<h1>Page title</h1>
paragraph(s)
<h2>First section</h2>
paragraph(s)
<h6>First section's subsection</h6>
paragraph(s)
<h2>Second section</h2>
paragraph(s)
In example B, the heading skips levels, going from an <h2> to an <h6>. It should go from an <h2> to an <h3>. When going down a level within a section or subsection, an <h6> has to come after an <h5>. In turn, an <h5> has to come after an <h4> and so forth.
How to Use Headings on Your County's Website
Headings have different levels of importance. An <h1> has the highest level of importance and is usually reserved for the page title. When creating an article, the text you enter in the title field is automatically placed inside an <h1> tag.
Since a page should only have one <h1> tag, the first heading you enter in the HTML editor should be an <h2>. If using the WYSIWYG editor, the first heading you should select in the dropdown is "Heading 2".
▶ Watch video "Add Headings in WYSIWYG Editor" (0:39)
Although there are six possible levels of headings <h1>,<h2>,<h3>,<h4>,<h5> and <h6>, most of the time an <h2> and <h3> is all you'll need to add.
###
Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Anne Holz, IANR Media web strategist.
