How do we know which heading element to pick?


#1

Question

How do we know which heading element to pick? For example, why did we use <h1> tags for “The Brown Bear” title but <h3> tags for “Features” in this exercise?

Answer

Heading elements should be chosen in a way that reflects how the content of our page should be organized. Later in this lesson, you will use the div element to divide this page into various sections. Each of those sections will have a title contained within the <h2> tags and various subtitles which are contained within the <h3> tags.

As “The Brown Bear” title is the main heading for this document, we use the <h1> tags here. As “Features” is a subtitle to the “About Brown Bears” section of the page (which will eventually be more clearly delineated with div elements) we use <h3> tags to contain this heading.

To learn more about headings and how they should be used to organize information, take a look at this tutorial.


FAQ: Learn HTML Elements - Intro to HTML - Headings
#2

Hi there,

I’m a Web Accessibility Coordinator and content strategist. Regarding when to use which heading tag, the h1 tag is reserved for the headline of the page, the main topic, not to be confused with the page title. The next section of content on the page should be an h2 tag. If there’s a subset of information under that section, give the section a header using the h3 tag. If there’s a subset of information under the h3 heading, give that an h4 tag and so on in chronological order.

From a Web accessibility point of view, there should be only one h1 tag per page because this is the topic of the page, and there should be only one topic per page, like a Wikipedia article. There are usually multiple h2 tags per page.

Also, the heading tags should go in chronological order. If you want your websites to be accessible for assistive technology devices (such as screen readers), the headings cannot skip. If you want to adjust the sizes of the headings (which I often do), that can be done without sacrificing the chronological order of the headings.

So a page’s structure could look like this: