HTML Headings

HTML headings are used to define titles and subtitles on a web page. They are one of the most important structural elements in HTML.

---

HTML Heading Tags

HTML provides six levels of headings, from <h1> (most important / largest) to <h6> (least important / smallest):

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

Here is how each heading looks in a browser:

---

Headings Tag Reference

Tag	Description	Default Size
<h1>	Most important heading — page title	2em (32px)
<h2>	Section heading	1.5em (24px)
<h3>	Sub-section heading	1.17em (~18.7px)
<h4>	Sub-sub-section heading	1em (16px)
<h5>	Minor heading	0.83em (~13.3px)
<h6>	Least important heading	0.67em (~10.7px)

---

Headings and SEO

Search engines use headings to understand the structure and topic of your page. The <h1> heading carries the most weight for SEO:

• Use exactly one <h1> per page — it should describe the main topic
• Use <h2> for major sections
• Use <h3> for sub-sections under <h2>
• Never skip heading levels (don't jump from <h1> to <h3>)
• Do not use headings just to make text bigger — use CSS for that

---

Headings and Page Structure

Think of headings like a document outline. Here is a good structure for a web page:

<h1>Learn HTML</h1>        <!-- Page title -->
<h2>Introduction</h2>      <!-- Section 1 -->
<h3>What is HTML?</h3>     <!-- Sub-section -->
<h3>History of HTML</h3>   <!-- Sub-section -->
<h2>HTML Elements</h2>     <!-- Section 2 -->
<h3>Tags</h3>
<h3>Attributes</h3>
<h2>HTML Forms</h2>        <!-- Section 3 -->

---

Bigger Headings with Style

You can change the size of any heading using the style attribute and the font-size CSS property:

<h1 style="font-size: 60px;">Very Large Heading</h1>
<h1 style="font-size: 20px;">Small h1 Heading</h1>

---

Common Mistakes to Avoid

---

Try It: A Blog Post Outline

A properly nested heading structure for a short blog post:

<h1>5 Tips for a Faster Website</h1>

<h2>1. Compress Your Images</h2>
<h3>Choosing the right format</h3>
<h3>Using lazy loading</h3>

<h2>2. Minify CSS and JavaScript</h2>

<h2>3. Use a Content Delivery Network</h2>

Rendered result:

(Sizes above are reduced with Bootstrap classes just so the outline fits on this page — in real use you'd let the browser's default heading sizes apply.)

---

Frequently Asked Questions