Let’s talk about HTML elements for marking up Headings. Webpages often have a lot of titles, headlines and sub-headlines.
In long passages of text, they help break up the pages content to make it easier for people to understand the structure of what’s on the page.
On Landing pages, those headlines are the content. Titles of things people can click and go on to read more. There are headlines everywhere.
Let’s look at the HTML elements for marking up Headings.
There isn’t just one element for headlines, there are six, h1, h2, h3, h4, h5, and h6. Let’s look at these running in a browser.
You can see that each headline has a different effect visually. These ideas of hierarchy also carry through to all the non-visual ways the browser understand and communicate about the page.
H1 is the biggest, or rather the loudest, the most prominent, h6 is the smallest, the quietest, the most sub, sub, sub-headline, and the rest fits somewhere in-between in a range of importance or prominence. In some ways, this is pretty straight forward, and fairly easy to understand, choose which level of headline to mark something.
How to use
Type the opening tag, the h1 at the beginning, and type the closing tag at the end. In other ways, it can be quite tricky to figure out which level of headline to use when.
We’re not going to pick a headline level based on how it looks, we’re going to make a choice based on what it means. It makes sense that we created the main title into an h1 and created the subheading with the next level down after the title in h2.
The title for the whole page, is an h1 headline, all of the article titles are h2 headlines, and the little kicker headlines with the little labels like, those are all h3 headlines. You’ll notice that some of the article titles are displayed in a larger font size, and some of them are displayed smaller, but all of them are semantically h2.
You can that this hierarchical system of headlines provides the browser with meaning. It conveys what’s most important versus what’s less important. It lets all the article headlines be the same kind, all of them are h2. This is incredibly important for anyone who is navigating the page with a screen reader.
Making headline levels into an intentional system of hierarchy provides a key interface for navigating a site through sound. Many big teams these days have already created a design system, and when everyone follows that system, the site has more consistency and semantic success.
You do have some freedom here to decide how and when you want to use each of the six levels of headline. There isn’t a strict formula. You just want to use the six levels of options to create semantic hierarchy in your use of headlines.