HTML Headings Tutorial for Beginners – Simple Explanation

HTML headings are titles or subtitles that you want to display on a webpage. They help organize your content just like headings in a book or a newspaper article.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. Think of them like a ladder. <h1> is the top step. <h6> is the bottom step.

Here is what they look like:

Note: Browsers automatically add some white space above and below each heading. That is normal. Do not try to remove it with spaces or line breaks. You will learn CSS later to control that if you want.

Headings Are Important. Really Important.

Search engines like Google use your headings to understand what your page is about. They look at your <h1> to figure out the main topic. Then they look at <h2>, <h3>, and so on to understand the structure.

People also skim web pages by looking at headings. A good heading structure helps your readers find what they are looking for fast.

Here is how you should think about headings:

<h1> – The main title of your page. Use this only once per page.
<h2> – Major sections within your page. You can have many of these.
<h3> – Subsections inside an <h2> section.
<h4>, <h5>, <h6> – Even deeper subsections if needed.

Let me show you a real example. Say you are writing a travel guide:

See how it works? The <h1> is the big topic: Travel Guide. Then <h2> is continents. Then <h3> is countries. That makes sense to both humans and search engines.

Tip: Use only ONE <h1> per page. That one tag should describe what the whole page is about. If you need more than one main title, maybe you need more than one page.

Do Not Use Headings Just to Make Text Big or Bold

Some beginners do this because <h1> looks big and bold. But that is wrong. Headings are for structure, not for styling.

If you just want big or bold text, use CSS instead. You will learn CSS later. For now, just remember: headings are for organizing content, not for decoration.

Wrong way (do not do this):

<h1>I just want this text to be big</h1>

Right way (use this):

<p style="font-size:24px;">I just want this text to be big</p>

Change Heading Sizes with CSS (Optional)

Each heading has a default size. <h1> is biggest. <h6> is smallest. But you can change them if you want using the style attribute.

Example

<h1 style="font-size:60px;">This is a giant heading</h1>

Try it Yourself

But remember: Just because you can change the size does not mean you should skip the proper heading order. Always use <h1> for the main title, then <h2> for sections, and so on.

Quick Tips for Good Headings

Start with one <h1>. That is your page title.
Use <h2> for your main sections.
Use <h3> for subsections inside those sections.
Do not skip levels. If you use <h3>, there should be an <h2> before it.
Do not use headings just to make text big or bold.
Think of your headings as an outline for your page.

What Just Happened? Let Me Explain

<h1> to <h6> create headings from most to least important
Browsers add space around headings automatically
Search engines use headings to understand your page
People skim headings to find what they need
Use only one <h1> per page
Do not use headings for styling. Use them for structure
You can change heading sizes with CSS if needed

Tip: Open VS Code and create a new file called headings.html. Write a page about your favorite hobby. Use <h1> for the hobby name. Use <h2> for different parts of that hobby. Use <h3> for details inside those parts. Then look at your page and see if the structure makes sense.

HTML Tag Reference

Here are the tags we talked about in this chapter:

Tag Description <html> Defines the root of an HTML document <body> Defines the visible part of the page <h1> to <h6> Defines HTML headings from most to least important