The <h1> Element in HTML

The <h1> element is used to create the main heading on a webpage. It tells users — and search engines — what the page is about. You should use only one <h1> per page, because it represents the most important title or topic. Headings help structure your content, make it easy to scan, and give your page a clear topic.

<h1>- Educodes

Understaning the layout of the <h1> Element

Start tagElement contentEnd tag
<h1>This is my first HTML heading!</h1>

📘 Example Code

Below is an HTML example showing one main heading and a sentence underneath:

💡 This is what the code looks like inside an editor

<!DOCTYPE html> <html> <head> <title>Heading Example</title> </head> <body> <h1>Welcome to My Webpage</h1> <p>This page uses an H1 heading to introduce the main topic.</p> </body> </html>

🖥️ What This Will Look Like in a Browser

This is my first HTML heading!

🧪 Time to Practise!

Now it’s your turn to write your own heading using the <h1> element.

Try this example first:

<h1>This is my first HTML heading!</h1>

What To Do

✅ Type the code above in the editor below
✅ Click Test Code to check your result
✅ Keep trying until you get it right — unlimited attempts!
✅ Change the text and try new headings too

Tip 💡

Headings appear everywhere online — websites, blogs, menus, dashboards, and apps.
Practise often and your pages will start looking professional quickly.

Have fun experimenting and building your HTML skills one step at a time! 🚀

HTML Editor

Live Preview

Continue with the next lesson on <h2> tags.

Educodes Logo

© Copyright 2024. | Educodes