Heading Tags

intermediate

Part of HTML Content & Structure

Theory

Headings provide structure and meaning to your content. HTML offers six levels, from <h1> (most important) to <h6> (least important).

Heading Hierarchy

Think of headings like a book outline:

<h1> — page title (use once per page)
<h2> — major sections
<h3> — subsections under <h2>
<h4> through <h6> — deeper nesting

Never skip heading levels. Going from <h1> to <h3> breaks the logical structure and confuses screen readers.

SEO Best Practices

Search engines use headings to understand page content. The <h1> should include your primary keyword and accurately describe the page. Use <h2> tags for each major topic section. Keep headings descriptive but concise.

Default Styling

Browsers apply default font sizes: <h1> is largest, <h6> smallest. These can be overridden with CSS, but the semantic hierarchy should remain intact.

Heading Hierarchy Example

html

Exercises

Create a Structured Outline

easy

Create an HTML page about a topic of your choice. Use h1 for the main title, h2 for at least 3 sections, and h3 for 2 subsections under different h2 sections.

Expected Output:

A page with one h1, three h2 sections, and at least two h3 subsections, maintaining a logical hierarchy without skipping levels.