HTML Headings: The Complete Guide To Adding Headlines For Document Structure
- Element of
- Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
- What does
HTML Headings: The Complete Guide To Adding Headlines For Document Structure
do? - The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance where <h1> is the most important and <h6> the least.
- Display
- block
- Usage
- semantic | textual
Contents
Code Example
<h2>Section Title</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at egestas leo, at consequat lorem. Etiam at ligula et nisl maximus commodo.
<h3>Subsection Title</h3>
Aliquam elit arcu, iaculis vitae hendrerit sed, rutrum quis magna. Suspendisse iaculis sit amet enim quis interdum. Quisque fringilla et mauris at sollicitudin. Aenean dictum volutpat elit id varius. Fusce nec pellentesque arcu, ac dictum ex.
<h3>Subsection Title</h3>
Sed sagittis ipsum eu purus condimentum accumsan. Pellentesque volutpat porttitor est, sit amet tincidunt risus vehicula porttitor. Morbi condimentum dapibus fringilla.
Section Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at egestas leo, at consequat lorem. Etiam at ligula et nisl maximus commodo.Subsection Title
Aliquam elit arcu, iaculis vitae hendrerit sed, rutrum quis magna. Suspendisse iaculis sit amet enim quis interdum. Quisque fringilla et mauris at sollicitudin. Aenean dictum volutpat elit id varius. Fusce nec pellentesque arcu, ac dictum ex.Subsection Title
Sed sagittis ipsum eu purus condimentum accumsan. Pellentesque volutpat porttitor est, sit amet tincidunt risus vehicula porttitor. Morbi condimentum dapibus fringilla.Content Headings
The six heading tags are an important part of HTML content writing. Besides the somewhat obvious need they fill (people sometimes want to put headlines on top of things), the headline tags also have SEO value, help you to be a more organized writer, and make pages more user-friendly.
Headline Tags and SEO
There are two things that a search engine is trying to figure out about your page:
- What is it about?
- How good is it?
Generally, links to a page are used as a measure of quality (how good it is) and on-page analysis is used to figure out what the page is about. (There’s some overlap here of course: Google makes some judgments about the quality of a page by looking at the page, and also tries to figure out what the page is about by looking at what other pages say when they link to it.) One of the (many) things that Google and other search engines look at determine the content of a page is the words that appear inside heading tags. That’s why, if you are trying to rank for particular words or phrases, it’s a really idea to include those words and phrases into your headline tags.
More organized writing
When people write without using headline tags (say, when writing by hand or in visual editor like MS Word), they often just write in long, unbroken streams of text which go on too long. Or, worse yet, they might add visual headlines (with bold, ALL CAPS, larger text, or something else. This is very common, as people instinctively know they should break up text into smaller chunks. The problem with that is that it isn’t then clear how the different sections related to each other. Is the section headed with 15pt font supposed to be a subsection of the part headlines with 14pt bold font? Often, even the writer doesn’t know because they didn’t really think about it.
On a page with a single piece of content (which should be most pages), the main title for that content should be an <h1>
tag. Major sections within that content should be headlined with <h2>
. Subsections within those sections should be headed with <h3>
, and so on. It should be possible to extract an outline from your headline tags. (In fact, we do this — look at the Contents widget at the top of the page.) This structure makes writing more organized, which (at least 99% of the time) also makes writing better.
Headlines are good for users
Here’s a dirty little secret about online content: readers skim. Almost no one reads every word of an online article. And there’s very little you can do about it. You certainly can’t stop it. But you can make it so that skimmers will have something to latch onto as their eyes move down the page. Headlines, if they are well-distributed and relevant to their content, give skimmers a bunch of little ways back into the text of the article. They also break up the article into seemingly-digestible bite-sized pieces, so that an antsy skimmer isn’t made anxious by a long solumn of uninterrupted text.
And don’t forget linking
As of HTML5, you can link to any element on a page by appending a hash-sign (#
) and the id
of the element. (In the past, you could only link to anchor elements.) By adding an id
to every headline on your page, you can allow people to link to any place in your document. (Again, see how the Content links at the top of the page work.) These in-document links can be tremendously helpful, especially if you provide reference content of any sort, or if your articles are particularly long.
Generally speaking, there are two types of content pages: single content pages (which present a single piece of content) and index pages (which list a bunch of content). Index pages include the main blog page of a site, category and tag archives, author pages that list all the articles written by the author, and so on. Then there is also content (sidebars, widgets, footers) which is appears on nearly every page and which isn’t really “content.” How you use headline tags in these situations can have an impact on SEO and usability.
<h1>
and <h2>
elements
On single content pages throughout your site, the title of that particular piece of content should almost always be in the <h1>
tag near the top of the <body>
. Then, as mentioned above, your sections within the article can use <h2>
tags.
<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main>
On an index page, it usually makes sense to put either the site title in an <h1>
tag, or to put the index name there: the category name, the author name, or whatever it is that defines that page. Then the titles of all the individual pieces that are listed there should have an <h2>
element for their titles.
<main> <h1>Posts about HTML</h1> <article> <h2>About Headlines</h2> . . . </article> <article> <h2>Links</h2> . . . </article> <article> <h2>Frames</h2> . . . </article> </main>
In the past it has been common to use an <h2>
tag for the site title when it appears on single-content pages.
<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main>
Opinions are mixed on this, but the trend is less and less of it. More people are simply placing the title (and, more likely, a logo img) in the header and saving the headline tags for specific on-page content. Part of your own consideration for whether to do this will likely have to do with how important is your own site’s title in relationship to your SEP goals.
Widgets and other “non-content”
It has also been common until recently to use <h3>
or <h4>
elements for widget titles in sidebars. Many Content Management Systems simply do this automatically, so it might not matter to you. But it is something you might want to think about if you are designing your entire page’s markup from scratch. Do you want your headline elements to suggest that the real meaning of your page is “Login” or “Sign up For The Mailing List”? (Of course, this is partially avoided by placing your sidebar in an <aside>
element.)
Browser Support for headlines
All | All | All | All | All | All |