HTML Headings

By /

When you create a webpage, you usually need a heading to tell people what the page or a section is about. HTML provides headings for this. HTML has six heading tags, from <h1> to <h6>. Let’s see how HTML headings work.

HTML Heading Tags

The six heading tags are:

<h1> → Biggest and most important heading
<h2> → Second-level heading
<h3> → Third-level heading
<h4> → Fourth-level heading
<h5> → Fifth-level heading
<h6> → Smallest heading

The number tells you the level of the heading.

Using <h1>

<h1> is normally used for the main heading of a webpage.

Let’s understand it with a code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Headings</title>
</head>
<body>

    <h1>My First Website</h1>

</body>
</html>

Output

My First Website

Here:

  • <h1> – Starts the main heading.
  • My First Website – The heading text.
  • </h1> – Ends the heading.

Using <h2> to <h6>

The other heading tags are used for smaller sections and sub-sections. Let’s see all six together.

Copy, paste, and run this complete program:

<!DOCTYPE html>
<html>
<head>
    <title>All HTML Headings</title>
</head>
<body>

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

</body>
</html>

Output

The browser will show six headings, with <h1> being the largest and <h6> being the smallest. You will notice that the size becomes smaller as the number increases.

When Should You Use Each Heading?

You can think of headings like the titles and sections of a page. For example, imagine you are creating an About Me webpage.

You could write:

<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>

    <h1>About Me</h1>

    <h2>My Education</h2>

    <h2>My Hobbies</h2>

    <h2>My Goals</h2>

</body>
</html>

Here:

  • <h1> is the main heading of the page.
  • <h2> is used for the different sections.

This makes the webpage easier to understand.

You Can Have More Than One Heading

You don’t have to use a heading only once.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

    <h1>My Website</h1>

    <h2>About Me</h2>
    <p>My name is Rahul and I am learning HTML.</p>

    <h2>My Hobbies</h2>
    <p>I like playing cricket and listening to music.</p>

    <h2>My Goals</h2>
    <p>I want to become a web developer.</p>

</body>
</html>

Here, the <h1> is the main heading, while each <h2> represents a section of the page.

What About <h3>, <h4>, <h5>, and <h6>?

You use these when you have smaller sections inside other sections.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>Heading Levels</title>
</head>
<body>

    <h1>My Website</h1>

    <h2>My Skills</h2>

    <h3>Web Development</h3>
    <h3>Programming</h3>

    <h2>My Hobbies</h2>

    <h3>Cricket</h3>
    <h3>Music</h3>

</body>
</html>

Here:

  • <h1> is the main heading.
  • <h2> is used for the main sections.
  • <h3> is used for smaller sections inside those sections.

You don’t need to worry too much about <h4>, <h5>, and <h6> right now. You will use them when your webpage has more detailed sections.

Quick Recap

  • HTML has six heading tags: <h1> to <h6>.
  • <h1> is the main heading.
  • <h2> is used for sections under the main heading.
  • <h3> can be used for smaller sections inside an <h2> section.
  • <h4>, <h5>, and <h6> are used for deeper sections when needed.
  • You can use the same heading tag more than once.
  • Choose headings based on the structure of your content, not just their size.

Frequently Asked Questions (FAQs)

Q1. What are HTML Headings?

HTML Headings are used to define the titles and sections of a webpage. HTML provides six heading levels, from <h1> to <h6>, to organize content.

Q2. How many HTML Heading Tags are there?

There are six HTML heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the highest-level heading, while <h6> is the lowest-level heading.

Q3. What is the difference between HTML h1 to h6 tags?

The HTML h1 to h6 tags represent different heading levels. <h1> is generally used for the main heading, <h2> for major sections, and <h3> to <h6> for smaller sections and subsections.

Q4. Can I use more than one HTML heading on a webpage?

Yes. You can use multiple HTML headings on a webpage. For example, you can use <h1> for the main page heading and several <h2> tags for different sections.

Q5. Should I choose an HTML heading tag based only on its size?

No. You should choose HTML heading tags based on the structure and importance of your content, not just because you want text to appear bigger or smaller. You can use CSS later to change the appearance of headings.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top