How do we know which heading element to pick?

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.

38 Likes

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:

23 Likes

any chance you can help me figure out what am I doing wrong in here?

Nakitanaidu,
CodeCademy is very sensitive as to what you write in the box.
You wrote “Countries with Small Brown Bear Populations.”, but you put a period. Delete the period, and i THINK you should be good.

8 Likes

For example you can observe any popular websites’ underlying code(be pressing f12 on firefox browser). I looked at wikipedia and their main heading is h1 tag and the following ones are h2 tags. Hope this helps in practical aspect.

To be honest, i was stuck here as well and had to have the site, give me the solution. In your instruction, you ask to put the period in the code but now you say to remove it. I cant afford to sit here for 20 minutes trying to figure out what i didn’t wrong when ive done nothing wrong. Why haven’t they resolved this?

It’s similar to writing a paper for school. Have you written an essay using Microsoft Word before? Did you know you can assign H1, H2, H3 heading formats to different sections? This is how your table of contents is built in a Microsoft Word Doc. It knows to look for those headings and categorize them accordingly on a table of contents. For example, “Chapter 1” would be a H1 and a subsection would be an H2.

Think of your webpage in the same way. The way you assign H1, h2, H3 will be how you will want to make your references once you start using CSS more.

javascript

The Brown Bear

About Brown Bears

Species

Features

Habitat

Countries with Large Brown Bear Populations.

Countries with Small Brown Bear Populations.

on line 8 when I write code, it does not pass. I get an error like this: Did you create an `

` header that contains `Countries with Small Brown Bear Populations` ?

@1minuteholidays74038 Remove the period from that line:

I was a bit confused with this exercise, I thought I should put h4 after the Features but the instruction said h2 so I just went on with it and got it right but in my head, I was asking the same question.