HTML Headings

HTML Headings are essential tags used to define the structure and hierarchy of content on a web page. They act like an outline or table of contents, allowing users, search engines, and screen readers to quickly understand the organization and importance of different sections.

There are six levels of headings in HTML, ranging from <h1> (the highest, most important level) to <h6> (the lowest, least important level).

The Six Heading Levels

Tag	Level	Semantic Importance	Default Visual Size (Typically)
<h1>	Level 1	Highest (Primary Topic)	Largest
<h2>	Level 2	Secondary Section	Large
<h3>	Level 3	Sub-section of an <h2>	Medium
<h4>	Level 4	Sub-section of an <h3>	Small
<h5>	Level 5	Sub-section of an <h4>	Smaller
<h6>	Level 6	Least Important	Smallest

Example: Applying All Levels

index.html: Heading Structure

<h1>The Main Article Title (H1)</h1>
<p>Introductory paragraph about the topic.</p>

<h2>Section 1: Core Concepts (H2)</h2>
<p>Content related to the first main idea.</p>

<h3>1.1. Detailed Sub-Topic (H3)</h3>
<p>Content elaborating on the sub-topic.</p>

<h4>1.1.1. Key Term Definition (H4)</h4>
<p>A specific detail within the sub-topic.</p>

<h2>Section 2: Advanced Topics (H2)</h2>
<p>Content related to the second main idea.</p>

http://.../index.html

The Main Article Title (H1)

Introductory paragraph about the topic.

Section 1: Core Concepts (H2)

Content related to the first main idea.

1.1. Detailed Sub-Topic (H3)

Content elaborating on the sub-topic.

1.1.1. Key Term Definition (H4)

A specific detail within the sub-topic.

Section 2: Advanced Topics (H2)

Content related to the second main idea.

---

The Golden Rule: Semantic Hierarchy

Headings are not just for making text bold or large; their primary function is structural. To build a clean, accessible, and SEO-friendly document, you must follow the correct hierarchy:

1. Use Only One <h1> Per Page: The <h1> tag should represent the main title or the core subject of the entire page. Think of it as the title of a book.
2. Maintain Order: Always start with <h1> and proceed sequentially. Do not skip levels (e.g., jump from an <h2> directly to an <h4>).
   • If you are within an <h2> section and need a subheading, use an <h3>.
   • If you need a heading that is a peer to the current one, use the same level.

Importance for SEO and Accessibility

Search engines (SEO) analyze heading structure to understand the primary topic of your page and the relative importance of subtopics. Screen readers use headings to allow visually impaired users to quickly navigate the document like an outline, skipping directly to sections of interest.

---

Avoid Misusing Headings for Style

If you need large, bold text but it does not introduce a new section or subtopic, do not use a heading tag.

Scenario	Correct HTML	Incorrect HTML (Avoid)
A Section Title	<h2>My Products</h2>	<p style="font-size: 20px; font-weight: bold;">My Products</p>
A Decorative Tagline	<p class="tagline">Always the Best</p>	<h3>Always the Best</h3>

If you want an <h3> to look smaller or an <h4> to look larger, use CSS to change its appearance. The semantic level (<h1> to <h6>) must always reflect the content's structure, not its visual style.

Conclusion

HTML headings are the backbone of document organization. By correctly using the six levels (<h1> through <h6>) and respecting the one <h1> rule, you build clean, accessible, and search-engine-friendly web pages.