Headings are an essential part of any XHTML or HTML document. They provide structure to your content, help users scan pages easily, and play a significant role in Search Engine Optimization (SEO).

In this guide, we’ll explain the purpose of heading tags, how they affect design and SEO, and how to use them properly with examples.

🧱 What Are Heading Tags?

HTML and XHTML support six levels of heading tags:

<h1> to <h6>

Each heading tag represents a different level of importance, from <h1> being the most important to <h6> being the least.

🔢 Breakdown of Each Heading Level

• <h1> – Main heading or title of the page (most important)
• <h2> – Subheading under <h1> (e.g., section titles)
• <h3> – Subsection heading under <h2>
• <h4> – Deeper subsections
• <h5> – Less emphasized subheadings
• <h6> – Least important heading, smallest in size

By default, these tags are displayed in bold and get smaller as the number increases. They also come with default top and bottom margins (spacing).

💡 Example of All XHTML Heading Tags

Here’s how each heading tag would look in your HTML document:

<h1>I am an H1 heading</h1>
<h2>I am an H2 heading</h2>
<h3>I am an H3 heading</h3>
<h4>I am an H4 heading</h4>
<h5>I am an H5 heading</h5>
<h6>I am an H6 heading</h6>

This will display on the browser as:

I am an H1 heading

I am an H2 heading

I am an H3 heading

I am an H4 heading

I am an H5 heading

I am an H6 heading

(Your browser may style them slightly differently depending on your website’s CSS.)

🖼️ Visual Hierarchy and Page Structure

Headings are not just about size—they create semantic meaning. Think of them as a structured outline for your content:

• Use <h1> only once per page for your main title.
• Use <h2> for major sections.
• Use <h3> and beyond for subsections.

Example outline:

<h1>My Travel Blog</h1>
<h2>Destinations</h2>
<h3>Europe</h3>
<h4>France</h4>
<h2>Travel Tips</h2>
<h3>Packing Essentials</h3>

🔎 SEO Best Practices for Headings

• ✅ Use only one <h1> per page. This is typically your main page title and should align with your page’s <title> tag.
• ✅ Use headings in logical order. Don’t skip from <h1> to <h4>.
• ✅ Include keywords in your headings naturally for better SEO.
• ❌ Don’t use headings just for styling—use CSS for visual changes instead.

🎨 Styling Heading Tags with CSS

To control how your headings look (fonts, colors, spacing), use CSS. Example:

h1 {
  font-size: 32px;
  margin-top: 20px;
  margin-bottom: 15px;
  color: #333;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

✅ Summary

• XHTML/HTML supports six heading levels: <h1> to <h6>.
• Use headings to structure your content for readability and SEO.
• Always start with one <h1> and follow a clear hierarchy.
• Style headings with CSS, not by misusing heading tags.

💬 Still Confused?

If you have any questions about using heading tags in your HTML or XHTML document, feel free to ask in the comments below — we’re here to help!