HTML: H1–H6 Header Tags

H1–H6 Header Tags

This tutorial teaches the basics of using the H1, H2, H3, H4, H5, and H6 header tags.

Let's start with the basic HTML template named index.html. You can download the file from our HTML Video Tutorials Lesson 1 page.

To create a title for your whole web page, use the <h1> header tag. Then, to delineate sections on your page, use the <h2> – <h6> header tags. Here's the code:

<html>
    <head> . . . </head>
    <body>

        <h1>H1 Header</h1>

        <p>This is sample body text.</p>

        <h2>H2 Header</h2>

        <p>This is sample body text.</p>

        <h3>H3 Header</h3>

        <p>This is sample body text.</p>

        <h4>H4 Header</h4>

        <p>This is sample body text.</p>

        <h5>H5 Header</h5>

        <p>This is sample body text.</p>

        <h6>H6 Header</h6>

        <p>This is sample body text.</p>

    </body>

    </html>

These header tags will render your text in a bold font that is large for <h1> and decreases in size down to the H6. Each tag has space above and below it to mark it off as a block element. Here is our code rendered on a web page:

Search engines use the <h1> tag to understand what your page is about and they may give you a better search results ranking if you have an <h1> header on your page. The text inside your <h1> tag should be succinct and descriptive of what is on that specific page to help the search engines better know what your page is about.

To divide the web page into parts, use the <h2> tag to make sections. Then, use the <h3> tag, which has a smaller font than the H2, to split up the main <h2> sections further. And so on, using the <h4> inside the <h3> area, the <h5> inside the <h4> area, and the <h6> inside the <h5> section. However, in actual usage, very rarely are the <h5> and <h6> tags used.

In general, start with the <h1> tag and use more H tags in decreasing numerical order to split up the page's text or media further.