HTML Headings

HTML headings define the structure of a webpage. They act like titles and subtitles, helping users quickly understand content and helping search engines rank your page better.

What are HTML Headings?

HTML headings are used to define titles and subtitles on a webpage. They help organize content so that it is easy to read and understand.

HTML provides six different heading tags: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

These headings are used to create a structure, just like chapters and sections in a book.

Example

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading Sizes

Each heading has a default size in the browser.

<h1> – Largest and most important
<h2> – Smaller than h1
<h3> – Smaller than h2
<h4> – Smaller than h3
<h5> – Smaller than h4
<h6> – Smallest

The size decreases from h1 to h6, but the importance also decreases.

HTML

▶ Run it

<!DOCTYPE html>
<html>
<head>
  <title>HTML Headings</title>
</head>
<body>

  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  
  
  


</body>
</html>

Understanding Heading Hierarchy

<h1> – Page Title

The main heading of your page. It should clearly describe what the page is about.

<h2> – Main Sections

Used for dividing your content into major sections.

<h3> – Subsections

Used under h2 to break content into smaller parts.

<h4> to <h6>

Used for deeper structure when needed (rare in small pages).

<h1>Website Title</h1>
   <h2>Main Section</h2>
    <h3>Sub Section</h3>

Real Example (Page Structure)

<h1>Learn Web Development</h1>

<h2>HTML Basics</h2>
<h3>HTML Elements</h3>
<h3>HTML Attributes</h3>

<h2>CSS Basics</h2>
<h3>Selectors</h3>
<h3>Box Model</h3>

HTML

▶ Run it

<!DOCTYPE html>
<html>
<head>
  <title>HTML Headings</title>
</head>
<body>

  <h1>Learn Web Development</h1>
  <h2>HTML Basics</h2>
  <h3>HTML Elements</h3>
  <h3>HTML Attributes</h3>


  <h2>CSS Basics</h2>
  <h3>Selectors</h3>
  <h3>Box Model</h3>

  
  
  
  


</body>
</html>

Why Headings Matter

They make your webpage easy to read
They help organize information clearly
They help search engines understand your content

Common Mistakes

Using multiple h1 tags without reason
Skipping levels (h1 → h3)
Using headings only for size (bad practice)

Best Practices

Use one clear <h1> per page
Follow proper order (h1 → h2 → h3)
Keep headings short and descriptive
Think of headings as an outline
Optimize headings for SEO keywords

← Previous Next →