LESSON 2.4

HTML Headings

Structure your content from the top down

Discover how HTML's six heading levels help you organize content on the page, and why getting the hierarchy right matters for both design and SEO.

💡 The Concept

HTML heading tags — from h1 to h6 — are how you organize and prioritize the text content on a webpage. Headings are one of the most fundamental elements in HTML. They create structure on your page, signal importance to search engines, and make your content easier to navigate. In this lesson you’ll learn all six heading levels and how to use them correctly.

HTML Heading Tags

Headings: Organizing Your Content Hierarchy

Headings are the backbone of any well-structured web page. HTML provides six levels of headings, from <h1> (the most important) down to <h6> (the least important). Think of them like an outline for a research paper; they create a clear content hierarchy that both humans and search engines can follow.

In the image below you can see how the heading level affects the size of the text.

Heading Tags, h1 to h6 — HTML heading tags range from h1 (largest and most important) to h6 (smallest).

Best Practices for Headings

Use only one <h1> per page. This should be the main title or topic of the page. Search engines pay close attention to it.
Don’t skip heading levels. Go from <h1> to <h2>, then <h3>, and so on. Jumping from <h1> straight to <h4> breaks the logical outline.
Use headings for structure, not for styling. If you want text to be big and bold but it’s not actually a heading, use CSS instead. Headings carry semantic meaning. They tell browsers and screen readers about the importance and organization of your content.

🎬 Video Demonstration

In this video we are going to add some heading tags to our template.

Exercise: Try It Yourself

Use heading tags and paragraph tags to mark up the text below. When you are done it should have one h1, two h2s, and paragraph text under each section. Copy the text below into JS Fiddle, add the h1, h2, and p tag markup, and click Run.

Minneapolis Lakes: The City's Outdoor Playground

Lake Harriet

Lake Harriet is one of the most beloved lakes in Minneapolis, surrounded by a paved path that stretches nearly three miles. Joggers, cyclists, and families use it year-round. In summer, the bandshell on the north shore hosts free concerts, and sailboats drift across the water. In winter, the lake freezes solid enough for ice fishing and skating.

Lake of the Isles

Lake of the Isles sits just north of Lake Harriet, with a shoreline that winds around two small islands and marshy inlets. Great blue herons and migratory waterfowl gather here every spring. In winter, the city grooms a skating loop that connects south to Bde Maka Ska, creating one of the longest connected skating trails in the country.

Here is a screenshot of the code in JSFiddle. Note that the title of the page is an <h1>. There is typically one <h1> on each page. Major categories use an <h2>.

❓ Frequently Asked Questions

Why can I only use one h1 on a page?

The h1 is the main title of the page — it tells search engines and screen readers what the entire page is about. Using more than one sends a mixed signal about what the page’s primary topic is. Think of it like a book: there is one title on the cover, even if there are many chapter headings inside. Every other major section gets an h2, with h3 and below used for sub-sections within those.

Does it matter if I skip heading levels, like going from h1 straight to h3?

It matters more than most beginners realize. Heading levels are not just about visual size — they create an outline of your page that screen readers and search engines follow. Skipping a level is like skipping a level in an outline: the structure becomes harder to follow. If you need smaller text for a sub-section, go to the next level down rather than jumping ahead. If the sizing is not what you want, fix it with CSS rather than choosing the wrong heading level.

Can I use a heading tag just to make text bigger and bolder?

You can, but you should not. Heading tags carry semantic meaning — they tell the browser, search engines, and assistive technology that this text represents a title or section heading. Using an h2 just because you want large bold text pollutes your page structure and can hurt both accessibility and SEO. If you want text to be a certain size or weight without it being a heading, use a paragraph tag and style it with CSS instead.

★ Key Takeaways

Headings do more than make text bigger. This lesson covered the six heading tags in HTML and how to use them to organize your page the way an outline organizes an essay. Next, you will learn how to create ordered and unordered lists. Lists are one of the most used elements in HTML, from navigation menus to step-by-step instructions.

Next Lesson: Making Lists with HTML

← Back to HTML Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.