: What should be the right h1 tag? I have two <h1> tags on a website. Every page is the logo of the site The article headline of the page. I know having more than one <h1>
I have two <h1> tags on a website.
Every page is the logo of the site
The article headline of the page.
I know having more than one <h1> tags per page is a bad practice. Should I remove the <h1> tag from the logo?
More posts by @Marchetta884
2 Comments
Sorted by latest first Latest Oldest Best
If you care about semantic HTML and the document outline, it makes sense to use h1 for the logo (assuming that the logo represents the site name).
Why? See the next three steps.
1. Without headings
A simple, common HTML5 document without headings could look like:
<body>
<header><!-- site-wide header --></header>
<main><article><!-- page-specific main content --></article></main>
<nav><!-- site-wide navigation --></nav>
<footer><!-- site-wide footer --></footer>
</body>
We have three sections here:
The body (sectioning root)
The article
The nav
In the document outline, each section gets an entry (which is, semantically, equivalent to a heading). So the outline, without using any heading elements, is:
1. untitled <body>
1.1 untitled <article>
1.2 untitled <nav>
2. With headings for article and nav
Now let’s give the article a heading element. It doesn’t matter which one, but HTML5 recommends to use a heading element that corresponds to the nesting level, i.e., h2 in this case: <h2>My first blog post</h2>.
And for the sake of this example, let’s give the nav a heading, too (h2 for the same reasons), although it typically doesn’t need one if it’s the only navigation: <h2>Navigation</h2>
So we have:
<body>
<header><!-- site-wide header --></header>
<main>
<article>
<h2>My first blog post</h2>
</article>
</main>
<nav>
<h2>Navigation</h2>
</nav>
<footer><!-- site-wide footer --></footer>
</body>
The document outline doesn’t change, it just gets labels:
1. untitled <body>
1.1 "My first blog post"
1.2 "Navigation"
3. … and for body
But what is with the untitled body entry? It longs for a heading! What heading could it possibly get? The site name! Why? Because the page doesn’t contain page-specific content (like the main content) only, but also site-wide content (like the header, the footer, and the navigation). And a site heading allows us to represent this in the outline.
So the heading for the body sectioning root would typically be the site name (<h1>Alice’s blog</h1>), which can of course also be a logo (<h1><img src="logo.png" alt="Alice’s blog" /></h1>).
This gives us:
<body>
<header>
<h1><img src="logo.png" alt="Alice’s blog" /></h1>
</header>
<main>
<article>
<h2>My first blog post</h2>
</article>
</main>
<nav>
<h2>Navigation</h2>
</nav>
<footer><!-- site-wide footer --></footer>
</body>
Which results in this outline:
1. "Alice’s blog"
1.1 "My first blog post"
1.2 "Navigation"
My answers to related questions:
<h1> - Semantic impact vs. SEO impact
For SEO of the company name, should we use a logo with alt text or a company name div replaced in CSS with an image?
Should we use <nav> for global navigation since it is sectioning content?
Yes, remove the h1 tag from the logo, a common error is to use it just to use its styling but it has no sense from a semantic point of view.
An h1 element represents the heading with the highest rank for a section, so it makes sense to use it for a title.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.