`<h1>` to `<h6>` - heading levels

HTML's <h1> to <h6> tags are used to define heading levels in a document, from the highest level <h1> to the lowest level <h6>. These tags not only affect page structure but are also crucial for SEO and accessibility.

The Role and Usage of the <h1> Tag

<h1> is the highest-level heading, typically used for the main title of a page. A page should generally have only one <h1>, as this helps search engines understand the page's primary content.

<h1>Website Homepage Title</h1>

A common mistake in actual development is the misuse of multiple <h1> tags. For example, an incorrect demonstration:

<!-- Incorrect Example -->
<h1>Product List</h1>
<div class="product">
  <h1>Smartphone</h1>
  <h1>Laptop</h1>
</div>

The correct approach should be:

<h1>Product Categories</h1>
<h2>Electronics</h2>
<h3>Smartphones</h3>
<h3>Laptops</h3>

Hierarchical Relationships of <h2> to <h6>

Subheadings form the document's outline structure. <h2> is typically used for section titles, <h3> for subsections, and so on.

<h1>CSS Tutorial</h1>
<h2>Selectors</h2>
<h3>Class Selectors</h3>
<h3>ID Selectors</h3>
<h2>Box Model</h2>
<h3>Margins</h3>
<h4>Negative Margins</h4>

Heading levels should not skip. Avoid this incorrect structure:

<!-- Incorrect Hierarchy -->
<h1>Title</h1>
<h3>Jumping directly to h3</h3>
<h2>Then returning to h2</h2>

The Semantic Importance of Headings

Screen reader users rely on headings for navigation. Proper use of heading levels enhances accessibility:

<h1>Company News</h1>
<h2>2023 Annual Report</h2>
<p>This year's company revenue...</p>
<h2>New Product Launch</h2>
<h3>Smartwatch</h3>
<p>Feature introduction...</p>

Search engines analyze heading levels to determine content structure. Testing tools like Lighthouse check whether heading hierarchies are reasonable.

Styling Headings

Although browsers have default styles, custom styling should be applied via CSS:

h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #333;
}

h2 {
  font-size: 2rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.75rem;
  font-weight: 500;
}

Avoid misusing heading tags solely for styling:

<!-- Incorrect Practice -->
<h4 style="font-size: 2em;">This is not a true h4</h4>

Real-World Application Scenarios

Typical heading structure for a news website:

<h1>Typhoon "Plum" Lands in Zhejiang</h1>
<h2>Winds Reach Level 14</h2>
<p>Main content...</p>
<h2>Emergency Response Measures</h2>
<h3>Evacuations</h3>
<p>Residents have been evacuated...</p>
<h3>Traffic Control</h3>

Example of headings for an e-commerce product page:

<h1>iPhone 14 Pro</h1>
<h2>Product Features</h2>
<h3>A16 Bionic Chip</h3>
<h3>48MP Main Camera</h3>
<h2>Specifications</h2>

Considerations for Dynamically Generated Headings

When inserting headings dynamically with JavaScript, maintain structural integrity:

// Correct Approach
const section = document.createElement('section');
section.innerHTML = `
  <h2>Dynamically Loaded Content</h2>
  <p>This is asynchronously loaded content...</p>
`;

// Incorrect Approach - Hardcoding Heading Levels
function createHeading(level) {
  // May disrupt hierarchy
  return `<h${level}>Arbitrary Heading</h${level}>`;
}

Combining Headings with ARIA

In complex components, enhance semantics with ARIA attributes:

<div role="region" aria-labelledby="section-heading">
  <h2 id="section-heading">User Comments</h2>
  <div class="comments">
    <!-- Comment content -->
  </div>
</div>

Avoid redundant ARIA usage:

<!-- Unnecessary Semantic Repetition -->
<h1 role="heading" aria-level="1">Redundant Attributes</h1>

Handling Headings in Responsive Design

Adjust heading sizes for different viewports:

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

However, do not alter the HTML structure itself:

<!-- Incorrect Responsive Approach -->
<div class="mobile">
  <h3>Heading for Mobile</h3>
</div>
<div class="desktop">
  <h1>Heading for Desktop</h1>
</div>

Headings and the Document Outline Algorithm

Modern browsers use an outline algorithm to generate document structure. Consider this example:

<section>
  <h1>Main Title</h1>
  <section>
    <h2>Section 1</h2>
    <section>
      <h3>Subsection 1.1</h3>
    </section>
  </section>
</section>

Note that <section> elements create new outline regions. Without <section>, heading levels directly determine the structure.

Considerations for Internationalization

Right-to-left (RTL) languages may require special heading styling:

[dir="rtl"] h1 {
  text-align: right;
  padding-right: 1rem;
}

Marking headings in multilingual environments:

<h1 lang="en">Welcome</h1>
<h2 lang="zh">欢迎</h2>

Combining Headings with Microdata

Enhance SEO with Schema.org:

<h1 itemprop="name">Braised Lion's Head</h1>
<div itemprop="recipeInstructions">
  <h2>Ingredients</h2>
  <h2>Cooking Steps</h2>
</div>

Optimizing Headings for Print Styles

Ensure headings are clear when printed:

@media print {
  h1 {
    page-break-after: avoid;
    font-size: 24pt;
  }
  h2 {
    page-break-after: avoid;
    font-size: 18pt;
    border: none;
  }
}

Interactive Enhancements for Headings

Add interactivity with JavaScript:

<h2 id="expandable-heading">
  Expandable Section
  <button aria-expanded="false">+</button>
</h2>
<script>
  document.querySelector('#expandable-heading button').addEventListener('click', (e) => {
    const expanded = e.target.getAttribute('aria-expanded') === 'true';
    e.target.setAttribute('aria-expanded', !expanded);
  });
</script>

Best Practices for Heading Content

Heading text should be concise and clear:

<!-- Recommended -->
<h2>User Login</h2>

<!-- Avoid -->
<h2>Here you can enter your username and password and then click the button to log in</h2>

Include key information without being overly verbose:

<h2>2023 Q3 Earnings Report (as of September 30)</h2>