In this post I want to focus on something seemingly insignificant but important when writing concise web content. Headers.

The benefits of using headers

Headings are used to break up different parts of page content to give it a logical structure.

This makes the content easier for the user to understand at a glance. It also makes it easier for search engines to crawl, so there are SEO (search engine optimization) benefits to using headers correctly.

With good use of headings, a user can immediately understand what each paragraph of content is about and navigate directly to the relevant part of his search, if he doesn’t want to read the entire page. Users typically only read 20-28% of the text on the pagetherefore the easier it is to scan and process information, the better the user experience will be.

Headings can be easily identified by the reader, as they are larger and often bolder than body text. Headers help users scan the content.

Headers help users with visual impairments. Screen readers can easily identify these headers if they use the correct HTML tag. This allows screen reader users to navigate through text in a natural flow.

How to use headers correctly

Used correctly, headers establish a logical sequence to content and help users navigate by telling them what information follows each header.

Use keywords

Titles should contain descriptive keywords to help the reader quickly identify the information they are looking for. Ideally these should be front loaded (at the top) of the header.

Be brief

Titles should be clear and short. Aim for about a maximum of 6 or 7 words.

Follow a logical order

There are six levels to headers and these should be used hierarchically throughout the page.

H1 is typically the title of the page and is used to tell the user what the page is about. Only one H1 should be used per page.

It follows that H2 would then be the next level of header used. H2s are the most commonly used type of heading and are used to separate body text into distinct sections. In this post What are headers?, How to use headers correctly, web header bad practices, AND Because titles matter are examples of H2 header tags.

The sections under the headings H2 can themselves be subdivided using the headings H3 and so on, up to H6.

Don’t skip header levels

It’s important not to skip the header hierarchy when designing your page. For example, an H3 shouldn’t appear on the page before an H2 tag. Headings are strictly used in descending order.

Use a new H2 for each new topic. Each new section does not require H3 tags or beyond if there is not enough information to justify it.

Format your headers correctly

Headings are typically bolder and larger than regular body text in their appearance. However, simply making the text bold is not a suitable method for creating subheadings, as any screen reader will not identify this text as a heading. Nor will any search engine crawler.

Make sure your header text is marked up correctly. Most web publishers use WYSIWYG (what you see is what you get) editors that will do the tagging for you, without you having to worry about HTML coding.

Header hierarchy example

En route to the University of Dundee

Car

Sat Nav postcodes

Traveling from Edinburgh

Traveling from Perth

Traveling from Aberdeen

Traveling from Glasgow

Cycle

Services for bicycles

Train

Bus or coach

Bus stops near our Dundee campuses

Air

Taxi

Bad Practices Web Header

To create effective and user-friendly content for the web, it’s crucial to be aware of common bad practices when it comes to creating headers.

Don’t use questions as headers

Our mission is to crack down on Frequently Asked Questions (FAQ) on the website. Users are looking for answers, rather than questions. By wording the titles as a question, it makes it difficult to scan the structure of the page. Users will be more likely to miss the keywords they are looking for. Without realizing it, users scan the copy for recognizable keywords. Using front-loaded, clear headers is not only beneficial to the user but also has added SEO benefits.

Avoid jargon and technical terms

Technical terms should also be avoided unless they have already been introduced and explained earlier on the page. Avoid complex words and jargon.

Titles are structural, not stylistic

Headings should not be used solely for aesthetic purposes. While a header might appear similar to bold and enlarged text, screen readers will treat the two differently, to the detriment of visually impaired users.

Don’t overcomplicate your structure

While titles are great, when used correctly, they shouldn’t be overused. Too many headers can be just as problematic as a wall of text that isn’t divided into sections with headers. If you find yourself using headings 5 ​​levels down, perhaps you need to simplify the page for the user.

Because titles matter

Applying some of these tips to your web writing will go a long way in holding your readers’ attention and helping them find the information they’re looking for quickly and easily.

Keep in mind that titles are not stylistic choices. Instead, remember them as paragraph styles that have structural meaning and technical impact on your content. While copy for websites and other digital channels should generally follow the same grammatical and stylistic rules as printed text, it is it is worth mentioning how digital material is consumed.

When your content is clear, concise, and properly structured, the user can easily locate the information they are looking for. A simple user experience is likely to drive more traffic to your page, and search engines will also look favorably on this.

Good use of headers is only part of ours content principles that exist to help create more effective content.

Photo by Kenny Eliason on Unsplash