Understanding Headings in HTML

Welcome back, friends 👋 In the last lesson, we learned about paragraphs and how to write text on a webpage. Today, we are going to explore another very important part of HTML — headings.

Headings are used to create titles and subtitles on a webpage. Just like in a book, where you have chapter titles and section titles, websites also use headings to organize content and make it easier to read. Headings also help search engines like Google understand what your page is about, which makes them very important for SEO.

HTML has six levels of headings, from <h1> to <h6>.

  • <h1> is the biggest and most important heading.

  • <h6> is the smallest and least important heading.

Here is an example that shows all the headings:

<!DOCTYPE html>
<html>
<head>
  <title>Heading Example</title>
</head>
<body>
  <h1>This is Heading 1</h1>
  <h2>This is Heading 2</h2>
  <h3>This is Heading 3</h3>
  <h4>This is Heading 4</h4>
  <h5>This is Heading 5</h5>
  <h6>This is Heading 6</h6>
</body>
</html>


When you open this file in your browser, you will see that each heading has a different size. <h1> is the largest and boldest, while <h6> is very small.

Headings are not only about size, they also show importance. For example:

  • Use <h1> for the main title of the page (only one <h1> per page).

  • Use <h2> for main sections.

  • Use <h3> for subsections inside <h2>.

  • And so on, until <h6> if needed.

Here’s a real example of how you might use headings on a blog:

<!DOCTYPE html>
<html>
<head>
  <title>My Blog Post</title>
</head>
<body>
  <h1>Welcome to My Coding Blog</h1>
  <p>Hi, I am Yusuf and I love teaching kids how to code.</p>

  <h2>Why Coding is Fun</h2>
  <p>Coding lets you create games, apps, and websites. It feels like magic when you see your code come alive.</p>

  <h2>How to Start Learning</h2>
  <p>You can begin by learning HTML, CSS, and JavaScript step by step.</p>

  <h3>Step 1: Learn HTML</h3>
  <p>HTML is the skeleton of every webpage. It gives structure to your content.</p>

  <h3>Step 2: Learn CSS</h3>
  <p>CSS is used to style your pages and make them look beautiful.</p>

  <h3>Step 3: Learn JavaScript</h3>
  <p>JavaScript adds interactivity and makes your webpages come alive.</p>
</body>
</html>

As you can see, <h1> is the main title of the page, <h2> creates big sections, and <h3> creates smaller subsections under <h2>. This makes the page neat, organized, and easy to follow.

You can also style headings with CSS to change their color, font, and size. For example:

<style>
  h1 {
    color: blue;
    font-size: 32px;
  }
  h2 {
    color: green;
  }
  h3 {
    color: purple;
  }
</style>

This will make your headings colorful and fun to look at.

Headings are very important not just for people but also for search engines. When Google scans your page, it looks at headings to understand what each section is about. That’s why using headings correctly helps your website rank higher in search results.

Now it’s your turn. Create a new file called headings.html, and write a simple webpage with one <h1> title, two <h2> sections, and at least one <h3> under each section. Add some paragraphs under them, save it, and open it in your browser. You’ll see how much better your content looks when it’s structured with headings.

Great job 🎉 You just learned how to use headings in HTML. In the next tutorial, we will explore links (<a href="">) and see how to connect one page to another, just like the internet does. 🚀