Description

The <h1> element is the most important heading in an HTML document. It serves as the primary title or header for the entire page's content. Think of it like the title of a book or the headline of a newspaper article.

By default, browsers render <h1> as a block-level element with the largest default font size (typically 2em or 32px) and significant margins above and below. While CSS can change its appearance, its semantic meaning remains fixed: it is the top-level identifier for your content.

Implementing a proper heading hierarchy is not just about aesthetics; it creates a machine-readable map of your document. Search engine crawlers (like Googlebot) use these tags to determine the context and hierarchy of your information, which directly impacts search rankings.

A well-structured page uses headings to group content into logical sections, making it easier for users to "scan" the page and find the information they need.

CSS Display:block

Syntax

<h1>Main Heading</h1>

Examples

Standard Page Heading
<h1>Introduction to Web Development</h1>
The standard way to define the main topic of a page.
Logical Hierarchy
<h1>Main Topic</h1> <h2>Subtopic A</h2> <h3>Detail about A</h3> <h2>Subtopic B</h2>
Demonstrates how headings should flow from H1 down to lower levels without skipping steps.
Styling with CSS
<h1 class="main-title">Custom Styled Heading</h1> <style> .main-title { color: #2563eb; font-family: sans-serif; text-align: center; border-bottom: 2px solid #e5e7eb; } </style>
You can use CSS to change the appearance of an H1 while keeping its semantic importance.

Notes

SEO & Content Strategy: The <h1> is a major ranking signal. It should be placed as early as possible in the body content. While it doesn't have to match the <title> tag exactly, they should be closely related to avoid confusing users and search engines.

Accessibility (WCAG 2.1): According to accessibility guidelines, heading levels should represent the structure of the content. Screen reader users often use keyboard shortcuts (like "H") to cycle through headings. If you skip a level (e.g., going from <h1> to <h3>), users might think they've missed a section of the page.

The HTML5 Outliner Myth: The HTML5 specification originally suggested that every sectioning element (like <section> or <article>) could have its own <h1>. However, browsers never fully implemented the "document outline" algorithm, and screen readers still treat them as flat hierarchies. Therefore, the best practice remains: one H1 per page.

Placement: Ideally, the <h1> should be located inside the <main> tag or as the first significant element in the page body. It should not be wrapped inside a <header> that is repeated on every page (like a site-wide logo), as this dilutes its purpose for specific page topics.

Common Pitfalls:

  • Using <h1> for the site logo on every page (this is better handled with a <div> or <span>).
  • Leaving the <h1> empty or hidden just for SEO (this can be flagged as "cloaking" by search engines).
  • Choosing heading tags based on font size rather than content hierarchy.