Heading order
Intro
There are a handful of rules to keep in mind when using the different heading elements.
For this lesson, comment out the headings from the previous lesson.
<!-- <h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6> -->Steps
1st rule
First, don’t use the heading elements based on the way they look. You might be tempted to use them based on their size, but that’s not how they’re designed to be used.
2nd rule
Second, use the <h1> element as your main heading on the page.
Since it’s the main heading, it should be the first heading you use on the page, before you use any h2s or h3s or any other headings. It doesn’t have to be the first element inside your body, but it will probably be near the top.
So, let’s try an example. Let’s say you’re creating the home page for a business. At the top, create an h1 element and write Business Name.
<h1>Business Name</h1>If you check the preview, you should see the text Business Name appear in big and bold letters.
3rd rule
Now let’s say the page needs an About section and a Contact section. This leads us to our third rule: use an <h2> for each major section on the page that requires a heading.
So, write one <h2> with the word About, and another with the word Contact.
<h1>Business Name</h1><h2>About</h2><h2>Contact</h2>If you check the preview, you should see smaller headings appear with the words About and Contact.
In between the headings we can put lots of different types of elements, but for now we’ll stick to paragraphs. Add a paragraph after the first <h2> element. Also, type lorem and press Tab to generate placeholder text.
<h1>Business Name</h1><h2>About</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, officia. Repudiandae fuga similique aspernatur porro distinctio quidem quis nihil reiciendis voluptatem quas quos eaque ad debitis officiis, iusto, adipisci animi?</p><h2>Contact</h2>If you check the preview, you should see a paragraph of text appear in between the two <h2> elements.
4th rule
Let’s pretend that this business has 2 offices and therefore needs contact info for both offices. This leads us to our fourth rule: if you need to divide the major sections up further, use an <h3> to label each subsection.
Use h3s to label the contact info for each office.
<h2>Contact</h2><h3>San Francisco Office</h3>
<h3>Los Angeles Office</h3>If you check the preview, you should see slightly smaller headings appear for the offices.
Now this pattern continues on from here. If you need to divide up these subsections even further, use h4s to label the smaller sections, and so on and so forth.
If you follow this pattern, you probably won’t use h5s and h6s very often, but they’re there if you need them. In this particular example, I don’t need to use h4s, h5s, or h6s.
We could use some paragraph elements to list out email addresses for each office.
<h2>Contact</h2><h3>San Francisco Office</h3><p>Email us at sf@example.com.</p><h3>Los Angeles Office</h3><p>Email us at la@example.com.</p>Explanation
A good way of thinking about how to use headings is that if you just look at the headings themselves, they should form an outline for the web page.
So if you comment out the paragraphs, we should be able to tell what each section on the page is about by just looking at the headings.
<h1>Business Name</h1><h2>About</h2><!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, officia. Repudiandae fuga similique aspernatur porro distinctio quidem quis nihil reiciendis voluptatem quas quos eaque ad debitis officiis, iusto, adipisci animi?</p> --><h2>Contact</h2><h3>San Francisco Office</h3><!-- <p>Email us at sf@example.com.</p> --><h3>Los Angeles Office</h3><!-- <p>Email us at la@example.com.</p> -->After commenting out the paragraphs and seeing what the site looks like in the preview, you can uncomment them.
<h1>Business Name</h1><h2>About</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, officia. Repudiandae fuga similique aspernatur porro distinctio quidem quis nihil reiciendis voluptatem quas quos eaque ad debitis officiis, iusto, adipisci animi?</p><h2>Contact</h2><h3>San Francisco Office</h3><p>Email us at sf@example.com.</p><h3>Los Angeles Office</h3><p>Email us at la@example.com.</p>And that’s how you use heading elements in HTML.
Final Code
If you’ve followed all of the steps so far, this is the code that should be in between the body tags.
<!-- <h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6> -->
<h1>Business Name</h1><h2>About</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, officia. Repudiandae fuga similique aspernatur porro distinctio quidem quis nihil reiciendis voluptatem quas quos eaque ad debitis officiis, iusto, adipisci animi?</p><h2>Contact</h2><h3>San Francisco Office</h3><p>Email us at sf@example.com.</p><h3>Los Angeles Office</h3><p>Email us at la@example.com.</p>