Site Bytes – Headings

Site Bytes – Headings
Site Bytes – Headings

When users are looking for content on your website, they will often quickly scan the page to find what they are looking for. Headings help them find what they need by providing larger, bolder text explaining the topic. Heading text get small as they become sub-topics of other headings.

▶Watch video “Adding Headings” (1:14)

Headings provide the structure of the page. They go in order from a Heading 1 ( element in HTML) to a Heading 6 ().

Think of headings like bulleted lists.

• Heading 1
    • Heading 2
        • Heading 3
            • Heading 4
                • Heading 5
                    • Heading 6

Each heading here is a sub-topic of the last heading. When you make a page, be sure to use these headings in order to show relationships between topics.

For example, a page about ants could have headings like:

• Types of ants (Heading 1, the page title)
    • North American ants (Heading 2)
        • Carpenter ants (Heading 3)
        • Sugar ants (Heading 3)
    • South American ants (Heading 2)
        • Dinoponera (Heading 3)

Here, we can easily see that ‘Sugar ants’ is a sub-topic of ‘North American ants’, ‘Dinoponera’ is a sub-topic of ‘South American ants’, etc. Your users can also see these relationships while scanning the page or using a screen reader. Also, search engines like Google can see this relationship better, which may help your users find this content while searching the web.

Using headings out of order causes some confusion:

• Types of ants (Heading 1, the page title)
                • North American ants (Heading 5)
    • Carpenter ants (Heading 2)
    • Sugar ants (Heading 2)
            • South American ants (Heading 4)
                    • Dinoponera (Heading 6)

It’s hard to tell how these headings relate to one another when they’re not in order.

To add headings, edit the page and select the Format dropdown in the upper left of the editor. Headings 2-6 are available as options. Heading 1 is reserved for the page title.

Pro Tip: Headings are not appropriate for text decoration. If you want to emphasize a word or phrase in a paragraph, bold or italicize it.

If you have ideas for videos or articles you would like to see, please email Keith McGuffey at kmcguffey2@unl.edu. More video tutorials can be found on the Nebraska Extension County Websites Media Hub channel.

###

Site Bytes is a regular column in Nebraska Extension – Keeping UP that provides quick tips for enhancing your county website. Written by Keith McGuffey, IANR Media Web Specialist.