Definition:
H1 is the HTML element that identifies a first-level heading. It is commonly used to express the main title of a page’s content and place it at the highest level of its heading hierarchy.
Its function is structural: it indicates which text acts as a heading, not just how it should look. Large or bold text does not become an H1 unless it has the corresponding markup.
Table of contents
How an H1 is represented in HTML
The heading is written using the opening <h1> and closing </h1> tags, with the text between them. For example:
<h1>Bicycle maintenance guide</h1>This element is part of the body of the HTML document. It can sit within the main content or a header that introduces it; it does not need to appear immediately after the <body> tag.
Its appearance is controlled through CSS styles. Size, typeface, color and margins can change without altering its semantic level. Choosing H1 solely to enlarge a sentence therefore confuses the document’s structure with its presentation.
Difference between H1 and the title element
The H1 heads the content within the page. The <title> element, located in the document’s head, provides its title to the browser and is usually displayed in the tab.
Both can contain the same text or different versions that describe the same content. For example, the H1 might be “Bicycle maintenance” and the title “Bicycle maintenance: a basic guide | Site name”. They do not have to differ to avoid supposed duplication.
The title shown on Google is not guaranteed to reproduce the title either. Google explains that it generates its title links from several sources, including that element, the visual title and the page’s headings.
Changing an H1 can therefore influence the information Google interprets, but it does not by itself determine the exact text displayed in the results.
Relationship with H2, H3 and other headings
HTML provides six heading levels, from H1 to H6. Their numbers express levels of organization, not a sequence that must be used in full on every page.
In a typical structure, the H1 identifies the main topic, H2 headings introduce its sections and H3 headings introduce subsections within them. A short document may not need lower levels.
For example, a page titled “Bicycle maintenance” might have an H2 called “Brake inspection” and, within that section, an H3 called “Checking the brake pads”.
A consistent hierarchy helps identify relationships between pieces of content. Avoiding skipped levels when opening subsections makes that structure easier to interpret, although returning from an H3 to an H2 is normal when another main section begins.
H1 and web accessibility
Headings are part of web accessibility. Screen readers allow users to move through them or display a list of them to locate sections without listening to the entire document from beginning to end.
A correctly marked-up title provides information that does not depend on its appearance. By contrast, a paragraph enlarged through styles may look like a heading without being identified as one for assistive technologies.
As a general guideline, a single H1 describing the main content provides a clear structure. Multiple H1 headings call for a review of the context and hierarchy; their presence alone should not be interpreted as an automatic Google penalty.
Using H1 correctly does not guarantee that the whole page is accessible either. It is one part of a structure that includes other aspects, such as form labels, alternative text and keyboard navigation.
Writing and using H1 for SEO
The H1 helps identify the page’s topic and forms part of an on-page SEO review. Its text should clearly describe the content without piling up keywords or promising information that does not appear.
There is no universal character count that determines whether an H1 is correct. Its length depends on what it needs to communicate and how it is displayed at different screen sizes.
In a CMS, the title entered in the editor may automatically become an H1 through the template. Adding another one manually to the body could duplicate the main heading. The check should be performed on the HTML received by the browser, not just on the name of the editor field.
An appropriate heading does not replace the content, indexability or the other elements of the page. Its purpose is to identify and organize information, not to guarantee a particular position in search results.