The h1 tag is part of the HTML headings on a web page. They range from h1 to h6, with h1 being considered the most important and h6 the least. The heading tags are used to briefly describe the topic of the section a user is reading, just like a newspaper. Furthermore search engines use this information to index the different section of a webpage.
Many websites have started using the h1 tag within the header logo. In this post, I am going to explore the reasons for and against this structure.
Should I Use the H1 Tag for My Website Logo?
This question has been asked whenever I create a new website. Should I use the h1 tag for my website logo? You can find plenty of debates on many internet forums.
I have seen many websites which incorporate the following HTML structure for their logo:
<h1 class=”site-logo”><img class=”site-logo__graphic” alt=”My Website Logo” src=”images/logo.png” /></h1>
But, is the h1 tag necessary? Search engines will see the logo as the first heading. But perhaps this is a hindrance to the actual content on the web page e.g. a blog post title.
Alternative logo structures can look like this:
<div class=”site-logo”><img class=”site-logo__graphic” alt=”My Website Logo” src=”images/logo.png” /></div>
This logo structure shows the HTML image wrapped in a simple div tag. The class “site-logo” allows readability, but some would argue the h1 tag provides more importance.
So what does w3 schools say about the h1 specification?
- Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
- Search engines use your headings to index the structure and content of your web pages.
- h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.
The first point “Don’t use headings to make text BIG or bold” applies to NOT using the h1 tag as part of your logo. This is due to the H1 tag containing CSS or default browser styling that could affect your logo. However, the 2nd point “use your headings to index the structure and content” can be applied if the website logo requires high priority.
Which Websites Don’t Use the H1 Tag as Their Logo?
<div class="orb-nav-section orb-nav-blocks">
<a href="/"> <img src="https://static.bbci.co.uk/frameworks/barlesque/3.7.3/orb/4/img/bbc-blocks-dark.png" width="84" height="24" alt="BBC"> </a>
<!-- anchor tag -->
<div id="p-logo" role="banner">
<a class="mw-wiki-logo" href="/wiki/Main_Page" title="Visit the main page"></a>
Which Websites Do Use the H1 Tag as Their Logo?
<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C"></a> <span class="alt-logo">W3C</span></h1>
<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_7XMX65Pq0E7 sx_ccd1d2"><u>Facebook logo</u></i></a></h1>
<h1><a href="/en-gb">Sonos <span>The Smart Speaker System</span></a></h1>
So Who’s Right?
Short answer: no one.
In terms of indexing, Google provide no definite answer to this question. The W3C also do not specify this rule “headings for the sections with which they are associated” which is quite a broad statement.
Mozilla say “Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least.” this applies to the web page content that has several sub headings with a different priority listing.
When it comes to smaller websites (4 – 6 pages), the h1/logo tag becomes more appropriate. The lack of content will likely reduce the amount of keywords associated with the website brand. Whereas larger websites (10+ pages) can provide a larger scope of keywords, in which using the h1 tag becomes less applicable to the logo.
Here at Zeal, we have created websites both with and without the h1 tag as the logo. We look at each website on an individual basis and explore whether the logo should be h1 tag or not. We look at each website we build from a content marketing perspective with on-page SEO in mind to decide the structural mark up of the site. If you would like to find out more about structuring your website title tags or have a chat with us about a new website please don’t hesitate to get in touch.