Learn the Front-end Beta Search

<h1>

Draft

Definition

The <h1> HTML element represents the main heading of a web page or section. It’s the highest level heading in the HTML heading hierarchy (h1-h6) and carries the most semantic importance. The <h1> element is crucial for document structure, accessibility, and SEO, as it defines the primary topic or purpose of the content.

Syntax

<h1>Heading text</h1>

Attributes

Global Attributes

The <h1> element supports all global HTML attributes:

<h1 id="main-heading" <!-- Unique identifier -->
  class="page-title"
  <!-- CSS class names -->
  style="color: blue;"
  <!-- Inline styles -->
  title="Main page heading"
  <!-- Tooltip text -->
  lang="en"
  <!-- Language -->
  dir="ltr"
  <!-- Text direction -->
  data-*="value">
  <!-- Custom data attributes -->
  Main Heading
</h1>

Accessibility Attributes

<h1 aria-label="Main page heading" <!-- Accessible name -->
  aria-describedby="heading-desc"
  <!-- Reference to description -->
  role="heading"
  <!-- ARIA role -->
  tabindex="0">
  <!-- Tab order -->
  Main Heading
</h1>

Examples

Basic H1 Usage

HTML

Basic H1 Usage:

Welcome to Our Website

About Our Company

Contact Information

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic H1 Usage:</h3>

  <div class="space-y-4">
    <h1 class="text-4xl font-bold text-gray-900">Welcome to Our Website</h1>
    <h1 class="text-3xl font-semibold text-blue-600">About Our Company</h1>
    <h1 class="text-2xl font-bold text-green-600">Contact Information</h1>
  </div>
</div>

H1 in Page Structure

HTML

H1 in Page Structure:

Main Page Title

This is the main heading that introduces the entire page content.

Section Heading

This is a subsection under the main heading.

Subsection

This is a smaller subsection.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">H1 in Page Structure:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Main Page Title</h1>
      <p class="text-lg text-gray-600 mb-4">This is the main heading that introduces the entire page content.</p>

      <h2 class="text-2xl font-semibold text-gray-800 mb-3">Section Heading</h2>
      <p class="text-base text-gray-600 mb-3">This is a subsection under the main heading.</p>

      <h3 class="text-xl font-medium text-gray-700 mb-2">Subsection</h3>
      <p class="text-sm text-gray-600">This is a smaller subsection.</p>
    </div>

  </div>
</div>

H1 with Different Styling

HTML

H1 with Different Styling:

Bold and Large

Extra large heading with maximum weight

Colored Heading

Heading with custom color

Centered Heading

Centered heading for emphasis

Styled Heading

Heading with background and padding

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">H1 with Different Styling:</h3>

  <div class="space-y-6">
    <div>
      <h1 class="text-5xl font-black text-gray-900 mb-2">Bold and Large</h1>
      <p class="text-sm text-gray-500">Extra large heading with maximum weight</p>
    </div>

    <div>
      <h1 class="text-3xl font-bold text-blue-600 mb-2">Colored Heading</h1>
      <p class="text-sm text-gray-500">Heading with custom color</p>
    </div>

    <div>
      <h1 class="text-4xl font-semibold text-center text-gray-800 mb-2">Centered Heading</h1>
      <p class="text-sm text-gray-500">Centered heading for emphasis</p>
    </div>

    <div>
      <h1 class="text-3xl font-bold text-white bg-blue-600 px-4 py-2 rounded mb-2">Styled Heading</h1>
      <p class="text-sm text-gray-500">Heading with background and padding</p>
    </div>

  </div>
</div>

H1 in Different Contexts

HTML

H1 in Different Contexts:

Landing Page:

Transform Your Business Today

Powerful solutions for modern companies

Blog Post:

10 Tips for Better Web Design

Learn essential design principles

Product Page:

Premium Web Hosting

Fast, reliable, and secure hosting

About Page:

About Our Company

Learn more about our mission and values

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">H1 in Different Contexts:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h4 class="text-sm font-medium text-gray-700 mb-3">Landing Page:</h4>
      <h1 class="text-5xl font-bold text-gray-900 mb-4">Transform Your Business Today</h1>
      <p class="text-lg text-gray-600">Powerful solutions for modern companies</p>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-sm font-medium text-gray-700 mb-3">Blog Post:</h4>
      <h1 class="text-3xl font-bold text-gray-900 mb-4">10 Tips for Better Web Design</h1>
      <p class="text-base text-gray-600">Learn essential design principles</p>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-sm font-medium text-gray-700 mb-3">Product Page:</h4>
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Premium Web Hosting</h1>
      <p class="text-lg text-gray-600">Fast, reliable, and secure hosting</p>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-sm font-medium text-gray-700 mb-3">About Page:</h4>
      <h1 class="text-3xl font-semibold text-gray-900 mb-4">About Our Company</h1>
      <p class="text-base text-gray-600">Learn more about our mission and values</p>
    </div>

  </div>
</div>

H1 with Accessibility Features

HTML

H1 with Accessibility Features:

Welcome to Our Platform

With aria-label for screen readers

Our Services

This heading describes our main services

Contact Us

With explicit ARIA role and level

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">H1 with Accessibility Features:</h3>

  <div class="space-y-4">
    <div>
      <h1 class="text-3xl font-bold text-gray-900 mb-2" aria-label="Main page heading">
        Welcome to Our Platform
      </h1>
      <p class="text-sm text-gray-500">With aria-label for screen readers</p>
    </div>

    <div>
      <h1 class="text-3xl font-bold text-gray-900 mb-2" aria-describedby="heading-description">
        Our Services
      </h1>
      <p id="heading-description" class="text-sm text-gray-500">This heading describes our main services</p>
    </div>

    <div>
      <h1 class="text-3xl font-bold text-gray-900 mb-2" role="heading" aria-level="1">
        Contact Us
      </h1>
      <p class="text-sm text-gray-500">With explicit ARIA role and level</p>
    </div>

  </div>
</div>

Responsive H1 Headings

HTML

Responsive H1 Headings:

Responsive Main Heading

Small: 24px → Medium: 30px → Large: 36px → XL: 48px

Adaptive Heading

Adjusts size based on screen width

Mobile-First Heading

Optimized for mobile devices first

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Responsive H1 Headings:</h3>

  <div class="space-y-4">
    <div>
      <h1 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold text-gray-900 mb-2">
        Responsive Main Heading
      </h1>
      <p class="text-xs text-gray-500">Small: 24px → Medium: 30px → Large: 36px → XL: 48px</p>
    </div>

    <div>
      <h1 class="text-xl md:text-2xl lg:text-3xl font-semibold text-blue-600 mb-2">
        Adaptive Heading
      </h1>
      <p class="text-xs text-gray-500">Adjusts size based on screen width</p>
    </div>

    <div>
      <h1 class="text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold text-center text-gray-800 mb-2">
        Mobile-First Heading
      </h1>
      <p class="text-xs text-gray-500">Optimized for mobile devices first</p>
    </div>

  </div>
</div>

H1 Best Practices

HTML

H1 Best Practices:

Good H1 Examples:

✓ Clear and descriptive

✓ Concise but informative

✓ Relevant to page content

✓ Unique per page

Accessibility Guidelines:

✓ Use only one H1 per page

✓ Make it descriptive and meaningful

✓ Ensure sufficient color contrast

✓ Use proper heading hierarchy

SEO Considerations:

✓ Include target keywords naturally

✓ Keep it under 60 characters

✓ Make it compelling for users

✓ Avoid keyword stuffing

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">H1 Best Practices:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Good H1 Examples:</h4>
      <div class="space-y-2">
        <h1 class="text-2xl font-bold text-gray-900">✓ Clear and descriptive</h1>
        <h1 class="text-2xl font-bold text-gray-900">✓ Concise but informative</h1>
        <h1 class="text-2xl font-bold text-gray-900">✓ Relevant to page content</h1>
        <h1 class="text-2xl font-bold text-gray-900">✓ Unique per page</h1>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Accessibility Guidelines:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Use only one H1 per page</p>
        <p class="text-base text-gray-700">✓ Make it descriptive and meaningful</p>
        <p class="text-base text-gray-700">✓ Ensure sufficient color contrast</p>
        <p class="text-base text-gray-700">✓ Use proper heading hierarchy</p>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">SEO Considerations:</h4>
      <div class="space-y-2">
        <p class="text-base text-gray-700">✓ Include target keywords naturally</p>
        <p class="text-base text-gray-700">✓ Keep it under 60 characters</p>
        <p class="text-base text-gray-700">✓ Make it compelling for users</p>
        <p class="text-base text-gray-700">✓ Avoid keyword stuffing</p>
      </div>
    </div>

  </div>
</div>

Browser Support

The <h1> element is supported in all browsers and has been a standard HTML element since HTML 2.0.

Best Practices

  1. One per page: Use only one <h1> element per page for the main heading
  2. Descriptive content: Make the heading descriptive and relevant to the page content
  3. Proper hierarchy: Follow the heading hierarchy (h1 → h2 → h3, etc.)
  4. Accessibility: Ensure the heading is meaningful for screen readers
  5. SEO optimization: Include relevant keywords naturally in the heading
  6. Visual hierarchy: Use CSS to create appropriate visual emphasis
  7. Semantic meaning: Use headings for structure, not just styling

Common Use Cases

  • Page titles: Main heading for entire web pages
  • Article headers: Primary heading for blog posts and articles
  • Section headers: Main heading for major content sections
  • Landing pages: Hero section headings for marketing pages
  • Product pages: Main product or service titles
  • About pages: Company or organization names
  • Contact pages: Main contact section headings
  • <h2> through <h6>: Lower-level heading elements
  • <header>: Container for introductory content including headings
  • <section>: Content sections that may contain headings
  • <article>: Self-contained content with its own heading structure
  • <nav>: Navigation sections with heading elements
  • <main>: Main content area that typically contains the primary heading

Related posts