HTML <h1> Tag
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.
blockSyntax
<h1>Main Heading</h1>Popular Attributes
| Attribute | Description |
|---|---|
| class | Specifies one or more CSS class names for styling the element. |
| id | A unique identifier for the element. Used for CSS styling, JavaScript targeting, and anchor links. |
| style | Applies inline CSS styles directly to the element. |
| title | Provides advisory text, often displayed as a tooltip on hover. |
| lang | Specifies the language of the element's content (e.g. "en", "fr"). |
| dir | Specifies the text direction. Values: ltr (left-to-right), rtl (right-to-left), auto. |
| tabindex | Specifies the tab order of the element for keyboard navigation. |
| contenteditable | Makes the element's content editable by the user. |
This element also supports global HTML attributes such as class, id, style, data-*, and more.
Examples
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.