Using Headings in HTML is a great way to organize your writing into topic sections, add visual organization to your document, and make your work accessible to people with visual disabilities.

Why are Headings Important?

Most of us are used to using the formatting tools in Microsoft Word to make important text larger, bolder, and italicized to let our readers know about important information. HTML headings do all that formatting for you, and they add meaningful information to your document that helps users read and understand your work.

Headings usually go from h1 (the page title or main idea) to h6, but you don’t use them sequentially. Rather, you use them like levels in an outline, organizing your document into clear sections, organized by topics.

Below, we go from the Main Idea (h1) through some subheadings (both are h2s), and then we see some sub-subheadings (h3s) to further clarify the information.

I’ve filled in some real content so you can see the relationships between the headings. The main idea of the document, or h1, is “My Favorite Animals”. The two subheaders, or h2s, are “Dogs” and Birds”. Under birds, we can give _types _of birds as h3s, like parakeets and zebra finches.

And below, you can see a nicely formatted document using our headings. Under each heading, we have paragraph tags of text that give detailed information on that topic. 

 
By tagging your page this way, you are telling the browser (and your visitors) what your content means.

Even Google’s page indexing ‘bot uses headings to understand what your document is about so it can return more relevant search results about your pages.

Headings and Education

The SQR3 method of reading encourages students to scan headings as a form of pre-reading in order to generate questions and increase reading comprehension. If you format your work into headings, you can facilitate students’ ability to apply this method on your content. For more information on Headings or to practice it yourself, see the excellent W3Schools article on them, and try the interactive headings activity.

Let’s keep going!

When you’re ready to progress, press the button to go to the next lesson.
To the Next Lesson!