📖 HTML Headings (h1 - h6)

Learn how to create and structure headings in HTML

📚 What are HTML Headings?

📌 Key Concept

HTML headings are used to define titles and subtitles on a web page. There are six levels of headings available: <h1> to <h6>, where <h1> is the most important and <h6> is the least important.

Why Use Headings?

  • Structure: Headings organize content hierarchically
  • SEO: Search engines use headings to understand page content
  • Accessibility: Screen readers use headings for navigation
  • Readability: Headings help users scan and understand content

Heading Hierarchy

Tag Level Usage Typical Size
<h1> Highest (Most Important) Page title - use only once 32px
<h2> Section heading Main sections - use multiple 28px
<h3> Subsection heading Subsections 24px
<h4> Sub-subsection Smaller sections 20px
<h5> Minor heading Minor headings 18px
<h6> Lowest (Least Important) Rarely used 16px

💻 Code Examples

📝 Example 1: Basic Heading Structure

Here's how to use different heading levels in a typical page structure:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
  <h1> Welcome to My Blog </h1>
  <h2> Section 1: Introduction </h2>
  <p> Some introductory text... </p>
  <h2> Section 2: Main Content </h2>
  <h3> Subsection 2.1 </h3>
  <p> Content goes here... </p>
  <h3> Subsection 2.2 </h3>
  <p> More content... </p>
  <h2> Section 3: Conclusion </h2>
  <p> Final thoughts... </p>
</body>
</html>

▶️ Output:

Welcome to My Blog

Section 1: Introduction

Some introductory text...

Section 2: Main Content

Subsection 2.1

Content goes here...

Subsection 2.2

More content...

Section 3: Conclusion

Final thoughts...

📝 Example 2: All Heading Levels

Here's how all six heading levels appear:

<h1> Heading Level 1 - Most Important </h1>
<h2> Heading Level 2 </h2>
<h3> Heading Level 3 </h3>
<h4> Heading Level 4 </h4>
<h5> Heading Level 5 </h5>
<h6> Heading Level 6 - Least Important </h6>

▶️ Output:

Heading Level 1 - Most Important

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6 - Least Important

⚠️ Important Points to Remember

✨ Best Practices

  • Use h1 only once: Each page should have exactly one h1 tag
  • Don't skip levels: Go from h1 → h2 → h3 (don't jump from h1 to h3)
  • Use for structure: Don't use headings just for styling
  • Use semantic meaning: The heading level should reflect importance
  • Make descriptive: Headings should describe the content that follows

❌ Common Mistakes

  • Using h1 for styling only (not following hierarchy)
  • Using multiple h1 tags on same page
  • Skipping heading levels (h1 → h3)
  • Using headings for non-heading content

✍️ Practice Assignments

🎯 Assignment 1: Create a Blog Post Structure

Easy

Create an HTML document that represents a blog post about your favorite topic. Use proper heading hierarchy (h1 for title, h2 for main sections, h3 for subsections).

  • Create an h1 tag for the blog post title
  • Add 3-4 h2 sections for main topics
  • Add h3 headings for subtopics within sections
  • Add paragraphs with Lorem ipsum under each heading

🎯 Assignment 2: Article with Complex Structure

Medium

Create an article page with multiple sections and proper semantic structure. Include a header, multiple sections, and a footer.

  • Create semantic HTML structure
  • Use header for page title (with h1)
  • Create main content area with h2 sections
  • Use h3 and h4 for nested content
  • Add a footer section
  • Verify proper heading hierarchy

🎯 Assignment 3: Documentation Page

Hard

Create a comprehensive documentation page for a software product. Use proper heading hierarchy to organize complex technical content.

  • Create table of contents with links to sections
  • Use proper heading hierarchy throughout
  • Include main features section with subsections
  • Add installation instructions with multiple levels
  • Include API reference with organized headings
  • Add FAQ section with appropriate headings
  • Ensure document is easy to navigate using headings

🎓 Key Takeaways

  • Headings (h1-h6) are essential for page structure and SEO
  • h1 should be used only once per page for the main title
  • Always use proper heading hierarchy without skipping levels
  • Headings help both users and search engines understand content
  • Use headings semantically, not just for visual styling