HTML Headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

💡 Note: Browsers automatically add some white space (a margin) before and after a heading.

Six Levels of Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

💡 Note: Use HTML headings for headings only. Don't use headings to make text big or bold. Use CSS for that.

HTML Headings Can Have id Attributes

You can add an id attribute to any heading to create a bookmark. This lets you link directly to that heading from another part of the page or another page.

<h2 id="section1">Section 1</h2>
...
<a href="#section1">Jump to Section 1</a>

How Many Headings Should You Use?

• Use one <h1> per page — this is the main title
• Use <h2> for main sections
• Use <h3> for subsections within an <h2>
• Continue this hierarchy as deep as needed

<h1>My Website</h1>

<h2>About Us</h2>
    <h3>Our Mission</h3>
    <h3>Our Team</h3>

<h2>Services</h2>
    <h3>Web Design</h3>
    <h3>App Development</h3>

Next: HTML Paragraphs