FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Elements

Intermediate

HTML Heading Elements

Learn h1 to h6 as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.

Headings

Headings create the readable outline of the page.

Heading elements h1 through h6 are structure, not decoration. They tell readers what the next part of the document is about.

Good headings make a page scannable. If you read only the headings, you should still understand the flow of the content.

Element group: h1 to h6. The readable outline of the page.

What belongs here

Learn the tags by job, not by memorizing a random list.

h1

The main page subject. Use one clear h1 for most pages.

h2

A major section below the page subject.

h3

A subsection inside an h2 section.

h4-h6

Deeper levels for complex documentation, not visual sizing shortcuts.

Syntax in context

Heading levels should move through the document hierarchy.

Start with the main subject, then divide the page into sections and subsections.

<h1>Learn HTML</h1>
<h2>HTML basics</h2>
<h3>Elements</h3>
<h3>Attributes</h3>
<h2>HTML layout</h2>

Good versus weak

The difference is usually meaning, not only syntax.

Good

<h1>Learn HTML</h1>
<h2>HTML basics</h2>
<h3>Elements</h3>
<h3>Attributes</h3>
<h2>HTML layout</h2>

Weak

<h1>Learn HTML</h1>
<h4>HTML basics</h4>
<h2>Elements</h2>
<h6>Attributes</h6>

Rules that matter

Use these rules before publishing real HTML.

Do not skip levels

Move from h1 to h2 to h3 in a logical order.

Do not choose by size

Use CSS to style size. Use HTML to describe structure.

Write clear text

A heading should explain the next content block.

Avoid keyword stuffing

SEO headings should be natural and useful.

Production thinking

HTML is also for accessibility, SEO, security and maintenance.

Why does this matter?

Headings matter because many people do not read a page from top to bottom. They scan. Search engines scan. Screen reader users can jump from heading to heading. A clean outline makes the page usable faster.

Accessibility

Screen reader users often jump by headings. A strong outline becomes a navigation system.

Production note

Headings are one of the easiest places to improve SEO and usability without adding design complexity.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Add one extra h2 section under the main h1.
  • Add two h3 headings inside that new section.
  • Change one h3 to h4, run the preview and decide whether the outline still feels logical.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Build a clean heading hierarchy

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?