How to Use HTML Headings


What Are HTML Headings?

When referring to HTML headings, we are discussing the tags that have an "h" followed by some number. According to www.w3.org, headings should range from "h1" to h6". The lower the number in the tag tells the importance of the tag. For example, an "h1" tag is more important than an "h2" tag. HTML headings are similar to how you would write a paper that is separated into sections.

Why Use HTML Headings?

If a document had no HTML headings, the users would have to read every paragraph before they knew which parts were relevant to them. Using HTML Headings allows users to easily search through the hierarchy of headings to find the part of your content that is relevant to them. Essentially, headings serve as a concise summary of the following content. Intelligent search engines also utilize these headings in two ways. Since they understand that headings are summaries of the following content, they add weight to the words in the HTML headings. Thus, a web page with keyword or keyword phrase in a heading that matches a user's search query will rank higher than a web page with a keyword or phrase used once in a paragraph. Like human users, search engines also add weight based on the importance of each tag. If a web page has a particular keyword or phrase in the "h1" tag that matches the user's search query, it will rank higher than a page that has the same keyword in an "h6" tag.

Using HTML Headings

You should definitely use HTML headings in your web documents, but you should understand two important concepts about implementing them.

A Proper HTML Heading Hierarchy

Probably the biggest HTML heading mistake on the internet is that webmasters or content managers use heading tags without a hierarchy. Probably the worst mistake you can make when it comes to using HTML headings is to use them for unintended purposes. Several websites simply use the heading tags in their navigation because of the default sizes of the headings. The primary intention of HTML headings is to summarize the following content, not to make text larger. Ultimately, the browser's default styling of headings is to make them stand out from the text. Do yourself a favor and style the headings to override the browser's default styling. Make sure that each tag looks good following another more important tag.

Since browsers provide different styles and sizes on different heading tags, people have assumed that it is fine to jump from an "h1" tag to an "h3" or "h4" tag. This goes against the entire structure of HTML headings. Individuals that do this should really be using "div" tags instead of heading tags. Visually impaired users utilize the headings to navigate through content the same way average users do. They search through the summarized headings to find the section most relevant to them. However, the average user can see the size and style to visually understand the hierarchy. Visually impaired users can only understand the heading tag number. Additionally, some screen readers cannot see beyond the next heading tag. For example, if a web page had an "h2" tag followed by an "h4" tag, the screen reader would never show the "h4" tag because no "h3" tag exists between them, which renders the hierarchy useless. If you override the browser's default styling of the HTML headings as previously mentioned, you should be able to avoid this problem because your headings would look silly if you skipped a level of the hierarchy.

The final hierarchy problem is to create an inappropriate hierarchy that uses only 1 tag several times. If you have a bunch of "h2" tags on the page, you really don't have a detailed hierarchy. Instead, it looks more like several pages condensed into one page, which brings us to the multiple "h1" tags on a page problem.

One H1 Heading on Each Page

If you have studied ontologies or classification systems, it will be easier to understand why you should only use one "h1" tag. Each web page is a "thing". Even the front page of a news website is one thing. Despite telling multiple stories, cnn.com could classify the entire page by using one "h1" tag that says "Current News Stories". Instead, cnn.com commits this mistake by using a few "h1" tags to highlight the bigger stories. However, it leaves the user wondering, what is this page about? How is this page different from the "Trends", "U.S.", or "World" links. We have absolutely no idea what type of collection of news stories that cnn.com provides here because there are no dominant "h1" tag. There is no good reason to put more than one "h1" tag on the page because the "h1" tag classifies the entire page very much like the page's title. Page titles are not adequate to classify the page once the user arrives from the search engine because page titles are tucked away at the top of a browser in a tab. The most important heading tag should prominently appear once above the content of the page.