The <h2> Element in HTML

The `<h2>` Element in HTML

The <h2> element is used to create a sub-heading on a webpage.
While <h1> is the main title, <h2> headings help you break your content into clear sections and topics.

Think of <h2> as chapter titles inside a book — they support your page’s structure and make information easier to read and navigate.
You can use multiple <h2> headings on a page to organise content clearly.

Understaning the layout of the <h2> Element

Start tag	Element content	End tag
<h2>	Popular Destinations	</h2>

📘 Example Code

Below is an HTML example showing a main heading and a sub-heading:

💡 This is what the code looks like inside an editor

<!DOCTYPE html>
<html>
  <head>
    <title>Sub-Heading Example</title>
  </head>
  <body>
    <h1>My Travel Blog</h1>
    <h2>Popular Destinations</h2>
    <p>Here are some of the best places you should visit at least once in your life.</p>
  </body>
</html>

🖥️ What This Will Look Like in a Browser

✅ Example output you would see on a webpage:

My Travel Blog
Popular Destinations
Here are some of the best places you should visit at least once in your life.

🧪 Time to Practise!

Now it’s your turn to create your own H2 heading.

Try this example first:

<h2>My Favourite Foods</h2>

What To Do

✅ Type the code above in the editor below
✅ Click Test Code to see the result
✅ Keep practising — you can change the text and write more headings
✅ Try adding a <p> under your <h2> to describe your heading

Tip 💡

Use <h2> headings whenever you want to introduce a new section or idea on your page.
Good structure helps your visitors — and search engines — understand your content easily.

HTML Editor

Live Preview

The <h2> Element in HTML