How to use h1 to h6 in html

HtmlHow-ToBeginner · 3 min read

How to Use h1 to h6 Tags in HTML for Headings

Use <h1> to <h6> tags in HTML to create headings of different importance, where <h1> is the most important and <h6> the least. These tags help organize content visually and semantically for browsers and search engines.

📐

Syntax

HTML headings use tags from <h1> to <h6>. The number indicates the heading level, with h1 being the highest (main title) and h6 the lowest (smallest heading). Each tag wraps the heading text.

html

<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>

Output

This is a level 1 heading This is a level 2 heading This is a level 3 heading This is a level 4 heading This is a level 5 heading This is a level 6 heading

💻

Example

This example shows a simple webpage with headings from h1 to h6. Each heading is displayed with decreasing size and importance.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heading Levels Example</title>
</head>
<body>
  <h1>Main Title (h1)</h1>
  <h2>Section Title (h2)</h2>
  <h3>Subsection Title (h3)</h3>
  <h4>Detail Title (h4)</h4>
  <h5>Minor Heading (h5)</h5>
  <h6>Smallest Heading (h6)</h6>
</body>
</html>

Output

Main Title (h1) [largest bold text] Section Title (h2) [slightly smaller bold text] Subsection Title (h3) [smaller bold text] Detail Title (h4) [smaller bold text] Minor Heading (h5) [small bold text] Smallest Heading (h6) [smallest bold text]

⚠️

Common Pitfalls

Using multiple <h1> tags on one page can confuse search engines and screen readers; usually only one h1 should be used as the main title.
Skipping heading levels (like jumping from h1 to h4) breaks the logical structure and can harm accessibility.
Using headings only for styling instead of semantic meaning is a bad practice; use CSS for styling instead.

html

<!-- Wrong: Skipping heading levels -->
<h1>Main Title</h1>
<h4>Skipped levels</h4>

<!-- Right: Use proper order -->
<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Sub-sub Title</h3>

Output

Main Title [largest] Skipped levels [smaller but skips logical order] Main Title [largest] Sub Title [smaller] Sub-sub Title [even smaller]

📊

Quick Reference

Tag	Purpose	Typical Use
	Main page title	Only one per page, top-level heading
	Section heading	Used for main sections under h1
	Subsection heading	Used inside h2 sections
	Detail heading	Used inside h3 sections
	Minor heading	Used for smaller subsections
	Smallest heading	Used for least important headings

✅

Key Takeaways

Use

to

tags to create a clear heading structure from most to least important.

Only use one

per page to define the main title for SEO and accessibility.

Follow heading order without skipping levels to keep content organized and accessible.

Use CSS for styling headings, not heading tags themselves.

Headings help both users and search engines understand your page content.