The HTML Heading elements
When writing HTML we are looking to give web pages meaning and structure. With headings we want to define what is the most important, or the highest level, headings through to the lowest headings. We can achieve this using the <h1> to <h6> HTML elements.
HTML Headings
<h1> is considered the most important heading, treat this as if it was the title to a book, and in a web page it should be used only once. The <h6> element is considered the least important heading, we then have <h2>, <h3>, <h4>, <h5>.
By giving our pages structure we highlight important topics, give our users structure of the document, helps assistive technologies like screen readers and is good for search engines when indexing web pages to see how content is organised.
From a user experience point of view, users do not read every single word on a web page, even if we want them to. Instead people skim through a web page, they quickly go through the page and then as soon as something catches their eye they will stop and then read the content. Headings are a great way to break up content into distinct chunks of content and a well written heading can give that signal to the user what they can find in that area.
We should consider the h1 tag as the main subject of what that page is about, h2 is the sections within that to break up content, h3 is then subcategories for those areas of text which may go on for a few paragraphs. We continue to work our way down through the structure until we reach h6. We should not skip a heading level as this could make things confusing for screen readers and other technologies if the meaning is illogical.
Styling headings
The user-agent, or the browser such as Chrome or Firefox, give headings some default styling. This is usually some white space with margin before and after a heading as well as setting a font size, usually the sizing scales down as it goes from <h1> to <h6>. Apart from font size and some spacing there is usually not any other user-agent styling applied.
In CSS we can style the headings to adjust font size, typeface, weight, colour, spacing and all of the other properties like we can if we were to style a paragraph. In our example below we can see the default styling that is applied to our headings, you will notice the margin and also how the font size decreases as the heading goes from 1 to 6.
See the Pen
HTML Headings by Michael Gearon (@michaelgearon)
on CodePen.
Why are there only 6 heading tags?
When HTML was created, Tim Berners-Lee based HTML on the Standard Generalized Markup Language (SGML) which also used six levels of headings. In most academia it is normally to use up to five levels of headings at the most. When SGML was created it was felt there was an additional need for a sixth heading. It would be unusual for a document structure to have a need for more than 6 levels deeps section of content, if it did then it may make sense to split up the content further.
What does a good heading look like?
Now we know the semantics and styling of a heading, how do we write a good heading? We should make sure headings are consistent, for example do you use title case format or sentence case formatting, whichever one we choose we must be consistent. Headings are meant to be descriptive enough to give users a clear idea of what to expect but brief enough they can scan over it, aim for about 70 characters or less when writing a heading.
Make headings interesting with numbers
Numbers and data can be a way to capture a user’s attention, often you will see headings that say something like “7 things you didn’t know about…” An extra tip is that odd numbers are particularly interesting. The reason why is that odd numbers stick out more than even and actually odd numbers seem more believable.
Easy to understand
As we have looked at, a title should be short as the user scans the page, but we also need it to be easy to understand. We can do this by avoiding acronyms that are not going to be familiar to the reader. The title should be able to say what it is by itself without the supporting content clarifying what the header is trying to say.
Be relevant when writing subheadings
The subheading (or the sub-sub heading) should always remain connected to the overall main heading of the page. We would expect that all sub-headings and content within an article relate back to the main topic so the reader will not get confused. If we have a change in topic or direction we can use the thematic break using the horizontal line in HTML to indicate to the user that there is a change in theme.
More HTML and CSS Guides
Further reading on HTML headings
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects