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?
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
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.
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:
any chance you can help me figure out what am I doing wrong in here?
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.
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.
The Brown Bear
About Brown Bears
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.
this is what it should look like.
Guys i cant seem to proceed from this headings lesson, despite doing the exercise. below is how my work looks like.
The second Counties should be Countries.
codecademy is quite weird for how they choose to put the text in order, on one time it wanted me to add a paragraph into a div which 1 was right the other was wrong however gave me the same end result… so i re-wrote the code completely and worked, so just keep it simple and just focus on the end result
Hey @tag8477078017, welcome to the forums!
Codecademy is case-sensitive/punctuation in this exercise and so you have to make sure that you included all the periods and small things like that. This might have been why you had trouble the first time through, but were easily able to pass the second time.
Thanks for the information!
its vital to check for spelling errors to get these facts right. I got stucked several times before i got it finally right
I know this is an old forum to throw an answer in here this later, but one thing for new people and others who might see this. Programming will have you cover issues that could be as small as fixing a period, a semicolon, and you name it. Coding, in general, is an act of juggling perfection and problem solving because that is what the computer understands (perfect syntax and structure along with problem-solving if done correctly). So, you, me, and anyone else will have to get used to the fact that you may be scouring a piece of program or even HTML just to fix a period or some white-space that causes an error. If something like this bothers you, then you may have to reconsider why you want to work with computers because that is what we work with at the end of the day here. With love and respect