HTML Headings
📢 What Are HTML Headings?
HTML headings are used to define the titles and subheadings on a web page. They provide structure and hierarchy to content, making it easier for users and search engines to read and understand the page.
>>“Good heading structure is the skeleton of meaningful web content.” 🧠
📐 Available Heading Tags
HTML provides six levels of headings:
All Heading Tags
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
Note
⚠️ <h1> should be used only once per page for the main title. Use <h2> to <h6> for logical subheadings.
🏗 Use Headings to Build Hierarchy
Headings should follow a logical nesting order for accessibility and SEO. Don't skip levels unless there's a clear structural reason.
Proper Heading Nesting
<h1>My Website</h1>
<h2>About Us</h2>
<h3>Our Mission</h3>
<h3>Our Team</h3>
<h2>Services</h2>
<h3>Web Development</h3>📊 Comparison of Heading Tags
| Tag | Font Size (Default) | Purpose |
|---|---|---|
| <h1> | 2em | Main page heading |
| <h2> | 1.5em | Primary section heading |
| <h3> | 1.17em | Subsection heading |
| <h4> | 1em | Minor heading |
| <h5> | 0.83em | Very minor heading |
| <h6> | 0.67em | Least important heading |
🔍 SEO and Accessibility Tips
- 🔑 Use <h1> once for the main title of the page
- 🧭 Use <h2> to <h6> in logical order to structure content
- 📚 Avoid skipping heading levels (like jumping from <h1> to <h4>)
- 🧑🦯 Helps screen readers and improves accessibility
🧪 Real-World Example
Article Layout with Headings
<h1>Frontend Development Guide</h1>
<p>Introduction to web development...</p>
<h2>HTML Basics</h2>
<h3>Elements</h3>
<h3>Attributes</h3>
<h2>CSS Styling</h2>
<h3>Selectors</h3>
<h3>Flexbox</h3>
<h2>JavaScript Concepts</h2>
<h3>Variables</h3>
<h3>DOM Manipulation</h3>📚 Learn More
>>“A well-structured page is one that tells a clear story — and headings are your story titles.” ✍️