HTML Headings

Headings are like titles — they help users and search engines understand the structure of your content.
In HTML, we use <h1> to <h6> to represent different heading levels.

Let’s learn how and when to use them, the right way. ✅

📊 Heading Levels Overview

HTML provides 6 levels of headings:

<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>

• <h1> is the most important (used once per page, usually for the title)
• <h6> is the least important (rarely used)

Each level should represent hierarchy, not style.
Use CSS if you want to change the appearance (size, color, etc).

🧠 Example: Proper Heading Structure

<h1>HTML Tutorial</h1> <!-- Page title -->

<h2>Introduction</h2>
<p>Basic info about HTML.</p>

<h2>Core Concepts</h2>
  <h3>Tags and Elements</h3>
  <h3>Attributes</h3>

<h2>Summary</h2>

✅ This is a semantic structure — it tells both users and search engines how your content is organized.

❌ Common Mistakes to Avoid

🧪 Try This in Your HTML

<h1>My Blog</h1>
<h2>Latest Posts</h2>
  <h3>HTML Headings Explained</h3>
  <h3>How to Use Paragraphs</h3>
<h2>About Me</h2>

View this in the browser — notice the natural content flow and readability.

📈 SEO & Accessibility Tips

• Search engines give more weight to headings.
• Screen readers navigate content using headings.
• Always use headings in order (<h1> → <h2> → <h3>, etc.)
• Keep headings clear and relevant to the content below them.

📝 Quick Recap

👉 Coming Up Next:

Let’s now explore how to write content using paragraphs and line breaks.

📚 Next: HTML Paragraphs and Line Breaks