Should you mark your logo up as an image or a <h1>? There has been much debate for a long time now as to how to mark up logos. Should your logo be an inline image (<img />) or a <h1> with a background style—using one of many means of image replacement—to apply the logo to that? This debate has been raging for goodness knows how long, but I’m going to try and explain in this article why you should mark up logos as inline images, and why that’s the most sensible option.
A brief example of each
Using an image:
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/logo.gif" alt="Nike logo" />
</a>Using a <h1>:
<h1><a href="/" title="Return to the homepage">Nike</a></h1>
h1 a{
width:;
height:;
display:block;
text-indent:-9999px;
background:url(/images/logo.gif);
}Your logo is content
Your logo is content, not style. Style vs. content, in the web standards sense of the term, pertains to information and content that is required to be present/accessible irrespective of the presence of styles (in other words, CSS).
A logo is content. Let’s use Nike as an example throughout. Regardless of whether Nike’s site is blue, red or green, their logo will always be ‘that’ swoosh. The logo is totally independent of the site’s surrounding styles as the logo is content.
Imagine you were to visit Nike’s site in a browser that doesn’t support styles. It only makes sense that that logo is still there. It’s Nike’s brand, and it’ll be their brand whether their site is styled or not.
So your logo is content; it’s a visual representation of a brand that is defined long before that company’s site can be brought into consideration. Nike is admittedly a very big brand, but a brand nonetheless. Transport that way of thinking to any build and it’s becomes pretty obvious that a logo is indeed content.
Content = markup
So if a logo is content, a logo is markup, right? Right. You’d probably want to mark up your logo as follows:
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/logo.gif" alt="Nike logo" />
</a>As simple as that. Regardless of styles your content—and therefore logo—persist. Use the id="logo" to style anything such as positioning, and that’s it.
Your logo isn’t a <h1>
So we’ve proved that a logo is content, but let’s now prove that it isn’t a <h1>, a commonly held practice for marking up logos.
“To have the <h1> being the logo would be like having your name being a photo. They both represent the same thing, but are separate entities…”
The <h1> element is defined as being the uppermost, all-encompassing title of a page. Now, for a homepage this is something of a grey area. The chances are that your site is the site which the logo represents, i.e. Nike’s logo appearing on Nike’s site. On the homepage the <h1> may well be whatever the logo says; it may well be <h1>Nike</h1>. This is a case where the logo and the <h1> share the same meaning. But, as discussed, the content of the two is different. The logo is still branding, and the <h1> is still a textual element. To have the <h1> being the logo would be like having your name being a photo. They both represent the same thing, but are separate entities in themselves. A coded example might be:
<a href="/" title="Return to the homepage" id="logo">
<img src="/images/logo.gif" alt="Nike logo" />
</a>
...
<h1>Welcome to Nike's international website</h1>Sometimes a homepage doesn’t even require a <h1> to be visible. The logo alone is enough, but your page still needs that <h1> in the markup somewhere. It needs the logo to be an image but also needs a level one heading. Here you might want to have an ‘invisible’ <h1> like I have here on CSS Wizardry. This means that semantically you’re marking up your logo as an image, as it should be, and providing a <h1> to screen-readers.
What if you don’t have a logo?
Some sites, CSS Wizardry included, don’t have a logo as such. I use a bit of browser text as a logo, but even though this is textual content I do not mark this up as a <h1>. I mark it up using an <em>. This is still a text-module element, and to my mind is semantically sound.
Problems with using a <h1> to mark up a logo
Although I did admit that the logo’s text might also be the title (<h1>) of the homepage, there’s a very good reason why you should not mark the logo up as one. What about your ‘about page’? The title of that page is undoubtedly ‘About me’, and the <h1> is a page’s title. It only stands to reason, then, that the page’s <h1> reads <h1>About me</h1>.
If however I had marked up my logo as a <h1>, the about page’s title would also be the same as the homepage, and a <h2> would have to take place as the page’s actual title. This is wrong; obviously and unarguably wrong. And, by this token, your contact and portfolio and services pages’ titles would all also be the same. This is the problem with marking logos up as <h1>s.
More practical reasons
And if you weren’t convinced enough already, using an inline image will actually make your life easier.
As previously mentioned, using an inline image allows the logo to persist regardless of styles. This means that print stylesheets will have a logo embedded in the page as an image which they can print. Most printers, to conserve ink, will not print backgrounds, which means that any logos applied by means of a background image will be lost at print. Not great that your branding will be lost as soon as your site is printed, really.
Furthermore, an inline image can have its dimensions altered. A background image on a <h1> can’t. You can alter the size of the <h1>, but not its background (unless you’re using some CSS3 background magic). This means that you cannot easily adapt the logo to different sizes through CSS alone; think about optimising for mobile. A useful CSS snippet for any mobile site is:
img{
width:100%
max-width:100%;
}This means that all images will fill, but not break out of, the mobile screen. If your logo is applied as a background image it’ll get ignored here. What might happen is that your <h1> will render narrower that its background image’s dimensions (i.e. the background image is wider in pixels than the device’s screen is) on a mobile device, giving the impression of clipping the logo off. Conversely, the <h1> might not fill the width of the page leaving it, and therefore its logo background, spanning only a percentage of the page.
You can manipulate a logo as an <img /> far easier than you can as a background.
Stop applying logos as backgrounds
This really is semantics and web standards basics. A logo is content, not style. Just because your site is named the same as your logo reads does not make them the same thing. A logo should not be applied as backgrounds, and especially not to <h1>s. Some of the industry’s ‘best’ flaunt this lack of standards openly, and it’s just plain incorrect.
A logo is an image, a <h1> is a title. Your logo is never a background image, it’s never secondary content to anything. It is content in its own right and should be treated as such. Your logo is an image.
If you take only one thing from this article, let it be that your logo is content, therefore an image.
By Harry Roberts on Wednesday, October 13th, 2010 in Web Development. Tags: Logo, Semantics, Web Standards | 104 Comments »
+
Nadan said on 13 October, 2010 at 10:33 pm
Wow! Great article! :) One question… does it matter if the
<h1>appears after or before the first content (logo included)?viktor said on 14 October, 2010 at 5:36 am
iuse this:
it is usefull for page with disabled images..
Harry Roberts said on 14 October, 2010 at 6:52 am
@Nadan:
It typically doesn’t matter where the
<h1>appears in the page as long as it is before any other headings.@Viktor:
That is a ridiculously verbose amount of code! For a page with images disabled the browser will resort to displaying the alt text. That’s what it’s there for, after all. Drop all that markup and CSS, use an
<img />and let the alt text do its intended job.Benjamin Reid said on 14 October, 2010 at 8:52 am
Completely agree with you, nail on the head.
Nick Thorley said on 14 October, 2010 at 8:52 am
In my opinion the logo should be an image contained in an element and not a H1. The H1 should remain for text and individual to each page for seo reasons.
Franck Maurin said on 14 October, 2010 at 9:03 am
Interesting point of view.
I used to include the website logo in my sprite and use the
<a>tag to return to the home page. But your point of view inspire me to change for an<img />tag.David Bushell said on 14 October, 2010 at 9:06 am
On a similar topic – since most logos are created in vector format I would suggest using an SVG rather than a PNG or JPEG. You can embed the vector with the
<object>tag and have the image inside as a fall back (for Internet Explorer). I’ve done that on my website, the result is a beautifully scalable logo. Very noticeable on the iPhone 4 Retina display for example. I’m not sure this conforms perfectly to HTML standards but swings and roundabouts as they say..CSSWitchetyWoo said on 14 October, 2010 at 9:45 am
In addition to this i like Andy Malkarky’s idea of using a blockquote for tag lines.
So for example,
Then hide the
<blockquote>with CSS :-)WitchetyWoo AWAY!!!
Jamie said on 14 October, 2010 at 10:10 am
“Most printers, to conserve ink, will not print backgrounds, which means that any logos applied by means of a background image will be lost at print. Not great that your branding will be lost as soon as your site is printed, really.” — surely, this makes a good enough argument alone.
meteoracle said on 14 October, 2010 at 10:27 am
I’m really getting into using HTML5 now, and just down to the fact that you can have multiple H1 tags on a page kind of devalue the emphasis the H1 used to have on a page (in terms of SEO and accessibility anyway).
Semantically it makes sense to have a corporate site H1 the company name, for blogs the article title should be the H1.
I think your statement: ‘A logo is content, not style.’ is incorrect. If a user is using a screen reader to visit the site, they’re not going to see that logo, they will get the alt text if it’s an image. A logo is a visual element by its very nature, so that technically makes it styling and not content.
Harry Roberts said on 14 October, 2010 at 10:34 am
@meteoracle:
The use of multiple
<h1>s per page is still beyond the scope of what SEs index, so to a search engine, a page with multiple<h1>s is bad news anyway (to the best of my knowledge).I think that semantically, and sensibly, it makes more sense to have the page’s
<h1>the title of that page, as covered. If the<h1>’s text is the same as the logo then so be it, but a logo is one thing, a<h1>is another thing altogether.And I firmly believe that a logo is content. It’s nothing to do with a site’s CSS, it’s content. End of. A user with a screen reader deserves semantically correct content more than anyone, so marking up an image as an image is paramount.
And your statement that ‘an image being and image making it inherently stylistic’ is very very false. Product shots on Amazon aren’t stylistic, are they? They’re content. Just because something is an image doesn’t make it stylistic.
A logo is content that should be present regardless of styles.
meteoracle said on 14 October, 2010 at 10:50 am
@Harry Roberts:
I take your point. Product shots on Amazon are a very good example. As long as the image title and alt tags are used correctly I have no problem with this, and it covers the accessibility issue.
I’m not saying you’ve completely changed my mind in a few paragraphs, but I do see the reasons why the logo should be an
<img />and not a<h1>, and I will definitely consider how to handle site logos in the future.My only concern remains that the name of the company behind the logo doesn’t get the importance it perhaps should have when behind an
<img />.On the other hand, is this where the content of the page becomes more important than the company name at the top of a page?
At the very least you’ve got me arguing with myself! It must be a good article if you can get someone to question the way they currently work and can make them see the benefits of an alternative way of thinking.
Evan Skuthorpe said on 14 October, 2010 at 12:14 pm
interesting take. i don’t do logos as h1 but see the benefits in both.
John Faulds said on 14 October, 2010 at 12:41 pm
Why not do both? That’s what I do: home page is a logo in an image *wrapped* in a h1; on internal pages, the h1 becomes a div as the page’s main heading becomes a h1 instead.
Paul said on 14 October, 2010 at 1:07 pm
Very informative article. I recently used the information here http://csswizardry.com/web-design+/#images7-3-2 for a logo on a site I’m doing. Gonna have to change that now!
Russell Bishop said on 14 October, 2010 at 1:38 pm
I agree with this, most importantly on the grounds that each page of your website should not be titled as the company name.
An article’s H1 should be it’s title, not that of the website it’s on.
Nick Thorley said on 14 October, 2010 at 1:50 pm
I agree with Russell – if each page has a h1 with is a logo / company name then google is liable to penalise you.
Gabriel Izaias said on 14 October, 2010 at 2:00 pm
Agreed.
But I also take the point of @John Faulds using logo images with alt text wrapped in a
as a valid approach.Ricardo Verhaeg said on 14 October, 2010 at 2:01 pm
I do agree with this statement “Logo is content” and as so, it should be treated as content. But I haven’t done this in my sites.. currently I’m using the H2 tag for the logo, it doesn’t take out all the importance of the logo but leave the page title as the most important.
You said you shouldn’t use H1 after any other headings, but in the case of blog posts, when you show multiple posts?
But is a nice way to change.. using images for logo, just concerns me to browsers that don’t show any images. Maybe styles could add more importance to the logo text…
Gabriel Izaias said on 14 October, 2010 at 2:01 pm
missing the on my previous comment, sorry.
albert said on 14 October, 2010 at 2:08 pm
NICE! i love reading shit that makes me think. Nicely done sir.
apnerve said on 14 October, 2010 at 2:38 pm
Great article!! This has made me think now…
Hawaii Web Design said on 14 October, 2010 at 6:23 pm
God, finally this issue is laid to rest with a decent article. I sometimes skim CSS books and the ones that tell you to code your logo in an tag, I put down and move on to the next book. I never understood why it should be in an tag and your article just backed me up 100%.
“To have the being the logo would be like having your name being a photo. They both represent the same thing, but are separate entities…”
Thanks!
Ramm said on 14 October, 2010 at 6:30 pm
I don’t agree with the theory that logo is content, nobody will go to a website to see the logo, that’s secondary information.
Content is teh information within the website, and the frame containing that is just decoration and meta-information (like the author of some article for example) including website design, logo, navigation, etc.
Like this very website, doesn’t even have a logo, and it doesn’t need it.
Andrei Gonzales said on 14 October, 2010 at 6:45 pm
There is the old…
if home, h1. else, div.
David said on 14 October, 2010 at 6:49 pm
While I agree with most of your points, I think it is an error to make such a generalization about the functional use of logos as strictly content. The whole point of CSS is to separate presentation from content. Yes, a logo is content. However, a logo can, and often is, a part of the overall design presentation of a site, and therefore is also considered part of the style, which means it may (semantically) be implemented from the CSS.
Take a site where the entire background color changes as you transition from one sub-section to the next, and due to the complexity of the logo and the design of the site, a PNG-24 w/ Alpha Transparency is just not an option. Not all web browsers support SVG. On a site w/ 1000 different pages, you would not want to update several hundred “logos” every time you needed a color change. Instead, you would render the logo as content and mask it in the most commonly found background color, and then for each sub-section, you could override the image default using CSS to insert the properly masked image for that particular sub-section’s background color.
As long as you’ve designated your @media print styles to use the default image (which won’t print background colors anyway), you have successfully included the image as content (as you suggest), but have also successfully controlled the “styling” of your logo on a page via CSS (for use on the screen).
Logos are special case items, and in my opinion, presenting arguments on why they should not appear in H1 tags, and should be considered exclusively as “content” as the only “semantically correct” way to utilize logos ignores their “special” status.
One other issue I’d like to point out. Your code:
img { width: 100%; max-width: 100%; } will cause the image to expand to 100% of its CONTAINER – not the page, unless the page IS the container (which is rare). What’s more, “max-width” is not 100% supported across all browsers, in which case the very problem you’re trying to overcome will still exist.
Thasmo said on 14 October, 2010 at 6:55 pm
Very interesting and inspiring article. As I’m also into HTML 5 more and more I’ve made a quick search about the topic “multiple h1″ in general and found this: http://goo.gl/jdrT
So – imho – I also think the logo is not content directly, but in case of h1 it could be content as h1 _is_ content, no?
You inspired me to have a closer look, not sure yet what will come out in the end. I’ve changed how to style/build the logo a few times in the past, because I wasn’t really satisfied.
Chad said on 14 October, 2010 at 7:03 pm
While i agree that the logo is an important “content” element on any site… and that the alt text will do the trick when images are disabled…
being able to swap out images or moreover style sheets for different media types (mobile.css or a print.css) gives you a bit more control in different situations. example: for printing a web page you want to use a black only version of the logo or better yet a higher res logo.
furthermore, if you’re gonna add an image you will want to put width and height in the img tag. then lets say you’re not creating your website in a dynamic fashion (php includes, CMS or whatever)… how many pages will you need to touch when your client asks you to make the logo larger? if its in the css its only gonna be one.
thoughts?
Johannes Koggdal said on 14 October, 2010 at 7:10 pm
I agree with you on some of the points. It is definitely content and should be an img tag, but for sites that don’t really have any logo or real branding, I use the CSS technique to get a more stylized header text. It is still often the main heading of the front page in my opinion, so that could be an h1. When I use the h1 for logos, I sense which part of the website the user is on, and, like @John Faulds, I use a different markup for pages other than the front page.
Another problem I see using the img tag is the ability to style the link. If I want another image on hover for some hover feedback, I would either have to resort to JavaScript or using two images and switch the display option of them. I guess you could do some styling to hide the img and use CSS backgrounds then, but that seems like a bad way to do it?
zoran said on 14 October, 2010 at 7:17 pm
Very logical, i like it. Thanks for sharing, gonna tweet on.
David said on 14 October, 2010 at 7:21 pm
Wow, not a great article at all. Would take less than 3 lines to agree that a picture is not a semantic header – not a good idea. Couldn’t care less if people agree or not. Why bother this much?
Enrique Ramírez said on 14 October, 2010 at 7:24 pm
I’ve always thought that the H1 of all and any sites should be, for example, “Nike” or “Nike Website”, and not “Contact Us” or “About Us”.
“About Us” is a SUBHEADING of “Nike”. So “Nike > About Us”. “About Us” alone does not serve any meaning as to what the page talks about.
That’s why I always mark up my logos as an H1 tag. Though, I do not use the CSS background technique. I wrap an image within an H1 tag. That, in my opinion, is the most semantic way to include a logo. It’s consistent with my thinking on how headings should work, it works with images disabled, and still provides SEO benefits by the alt text.
I believe that the biggest misinterpretation of this is to believe that the H1 tag should always be the same as the TITLE tag. They both serve different purposes in my mind.
Ricardo said on 14 October, 2010 at 7:29 pm
Dull second point.
It’s common practice to use an h1 element (with the logo + alt text, or text + Image replacement) ONLY on the home page, as you agreed yourself. Other sections have their own h1, and the logo holder becomes a span/whatever.
There is no reason NOT to use the logo’s alternate text as the header on a home page, it doesn’t make any sense repeating it.
Jean-Hugues Bretin said on 14 October, 2010 at 7:42 pm
You’ve got a point there!
So far, I was relying on Aarron Walter’s technique where logo is an H1 with an embedded image in a stylesheet and content is there in an HTML file too. As far as text-indent:-9999px;
goes, I’m really skeptical, this type of hidden text is detected, and makes Google’s red phone ring.
Both related links :
http://www.peachpit.com/articles/article.aspx?p=1193475&seqNum=2
http://maileohye.com/html-text-indent-not-messing-up-your-rankings/
DrummerHead said on 14 October, 2010 at 7:45 pm
These analysis are the ones that make me twitch. These are the things I love. Thanks. I am now following you around (on twitter, don’t worry)
Also, you being so young and knowing this deal about code gives me more justification to say “I can be ‘pro’ and not necessarily have 5 years of experience” (I’m 24)
Anyhow; long live the Internet.
ivanhoe said on 14 October, 2010 at 7:47 pm
IMHO logo is the part of the design, the presentation, more than content. Take visual out of a logo, and it’s not the logo anymore, it’s just a company name. And you don’t want to use company name as H1, same as newspapers never put their own name as the headline. Headlines should provide the basic information about the page, and except on a home page or a very simple websites, the name of the company is usually not a very good description of the webpage content.
Leon said on 14 October, 2010 at 8:00 pm
I agree about logos being content.
The title of your web document is the contained in the
titletag; there’s no reason you can’t use lots ofh1s on a page.My blog is marked up in HTML5 and I’m getting more search engine traffic than ever. I don’t see how having lots of
h1s is a problem in that respect; besides, the big semantic difference between HTML4 and 5 is that sectioning tags (header, aside, sectionetc.) structure documents, not headings.Tyler said on 14 October, 2010 at 8:41 pm
Great article! I dont agree with it though. A company name is content. A logo is a strictly graphical representation of a brand. I think if you ask a screen reader user if they would like all company names on websites to now be images (regardless of alt text or not), they would prefer plain text that there device can parse. Ask a blind person what there favorite logo is: pepsi or coke. I do think there is a case where its appropriate for logos to be inline images. If you had a blog post entry that was all about comparing logos. It would be wrong to do some sort of image replacement for each logo you compare because its in a different context. Here the image itself is the data. In the heading context, the intention is different. Your trying to describe the company name which is why you want to use a heading element with plain text. I hope that makes sense.
Benny McTavish said on 14 October, 2010 at 9:42 pm
I always make 1 H1, 2 H2, 3 H3s and so on so my code is always valid and 110% best for what we pros call SEO (search ending ottomanization). It means essentially that Google puts my stuff at the top so please tell Alan Sugar so I can fix his website.
Michal said on 14 October, 2010 at 9:54 pm
Stop clogging the interwebs with silly articles about supposedly “semantic markup”. In fact both H1 AND IMG are just as ambiguous as each other when it comes by interpretation by machines.
Instead of worrying what tag to use to show your logo concentrate on learning something that will make your website truly semantic and SEO compliant like microformats or Dublin Core.
Ultimately whichever format you use it is the interpretation of your content is what is important. When it comes to interpretation humans don’t give a toss if something is held in H1 or img and machines will rely on additional meta data (microformats or DC attributes)…
Sam said on 14 October, 2010 at 9:55 pm
A problem with text-indent on the H1 is that it includes the anchor, therefore the logo won’t be a link.
fizk said on 14 October, 2010 at 10:21 pm
Stopped reading after the “not more than one h1 tag”. Get your facts straight! Read some html specs and search youtube for something like “Matt Cutts h1 seo”.
David Carrero Fdez-Baillo said on 14 October, 2010 at 10:23 pm
Good post, i write litte spanish edition in my blog ;-)
Gustav said on 14 October, 2010 at 11:04 pm
I don’t see what’s so wrong about having more than one tag.
Brand
About
Perfectly fine.
But it would be stupid to have a logo as anything other than an tag.
ryan said on 14 October, 2010 at 11:09 pm
Sites should be designed for users, then seo. If you take the example of using “About us” as your tag, who are you refering to? If you were to come to this page from some search engine this would’nt make sense as the context has not yet been established. From a users perspective the company name ( be it image or text ) should be in the in order to establish context.
Adrian said on 14 October, 2010 at 11:37 pm
I usually use Company Name to save markup. But an image or an h1 tag both make more sense semantically. This article gives a good argument for the former, but I’m inclined to think more people use the good old h1 tag.
Lanny Heidbreder said on 15 October, 2010 at 1:50 am
Your premise is interesting and sound, but your conclusions are less so. David above is on the right track.
I agree that a company’s logo should be content on their site. However, home pages often have logos that are not in their purest forms. They may get special treatment or embellishments to fit into the styling of the website. Even simply having a white logo with a transparent background to let the dark website theme show through is grossly inappropriate for the mythical user with visual styles disabled.
So no; if it’s semantic purity you’re going for, the real solution is to render your logo in its pure form on a solid background, put that in an
<img />tag, hide the<img />with CSS in the appropriate media, and continue rendering your fully styled home page logo as the background of an<h1>.Alex said on 15 October, 2010 at 7:33 am
Seriously?
Can’t agree on that. As some said before, a logo isn’t as important as the content.
Unique Design said on 15 October, 2010 at 7:47 am
I’ve been using the h1-as-logo technic for a while and still using for my projects. My only concerns was always having the logo disappear when CSS were turned of. Probably wrapping an img in an h1 is the better solution. Then wrapping the company name in a span and hiding it with CSS: you got SEO, an inline image, and all wrapped in the most important heading element.
I don’t agree that a logo is content. As previously said is a visual representation of the company branding. The company name is content, not its logo.
Using multiple h1 in a page, when talking about HTML5, it’s the natural and obvious choice. Is the specification to say that. An h1 should always go in the main header (the one including company name and img), and another h1 could be used in every sectioning element like or .
That approach is semantically correct, content-oriented, and the outline is exactly how it should be.
If we’re talking of a blog, for example, the page header should always contain the blog name (h1), logo (img in h1) and main navigation (nav). These information wouldn’t change between pages. What change is the content, not who is delivering it. Then when the user is readign a blog post, it will have its own heading, also known as title: here you use another h1 inside its semantic tag.
That’s it. That’s all.
Henrik Kjelsberg said on 15 October, 2010 at 8:29 am
I disagree! You would like your company-name to be displayed even if the site is browsed with a screen-reader. H1 is also weighted by search-crawlers, so your companyname might get more hits.
And for your aboutpage, why not use another H#-tag.
ces said on 15 October, 2010 at 9:07 am
There are many ways to do, not one. This is just HTML not the Bible.
Why no talk about ?
When Nike puts its swoosh alone at the end of a commercial, they just mean “Nike”. A screen-reader user doesn’t care about if it’s an image or what. He just have to see “Nike”.
IF I want to show the beautiful Nike logo i designed years ago in my portfolio, I will put it as pure image content of course.
And about the fact that H1 should be the subject of the page and not the title of the page, it’s not that simple.
Unlike a book, when you arrive directly on a web page, you can’t turn the page to see the cover title. The header can be seen like a cover that surrounds the content wherever you are on the site.
Your dictatorial way of say things is irritating, even if you have some good points. Too bad.
Sorry for my english.
Unique Design said on 15 October, 2010 at 9:10 am
Little update:
If you go through the HTML5 specification, when talking about h1 it says that its permitted content should be only “Phrasing content”.
If we go deeper in the specification, we’ll discover that “Phrasing content” it consists of “phrasing elements”. Going a level further, the HTML5 specification says that a “phrasing element” may be
as,ems,strongs … or evenimgtags.That’s it.
ces said on 15 October, 2010 at 9:12 am
Sorry for the code missing ( ? ) :
<a></a>honk said on 15 October, 2010 at 9:42 am
who the fuck cares?! just build fucking websites.
Warren said on 15 October, 2010 at 9:44 am
Absolutely spot on, I couldn’t agree more
Jan Alvin said on 15 October, 2010 at 9:52 am
In the point-of-view of an SEO, really does matter a lot. Especially if it is placed at the upper portion of the source code.
charlesvallieres said on 15 October, 2010 at 3:44 pm
I think having logo in tag is ok.
Proof:
http://www.w3.org/participate/
Logo = h1 > a > img
Page title (Participate) = h1
And I think w3.org is a good model.
Lanny Heidbreder said on 15 October, 2010 at 5:56 pm
(UGH, it ate the HTML tags in my comment when it was published. I used entities and everything, but it still stripped them. I hate comment forms without a Preview button. Here’s my comment again, hopefully intact now that I’m using
codetags and no angle brackets:)Your premise is interesting and sound, but your conclusions are less so. David above is on the right track.
I agree that a company’s logo should be content on their site. However, home pages often have logos that are not in their purest forms. They may get special treatment or embellishments to fit into the styling of the website. Even simply having a white logo with a transparent background to let the dark website theme show through is grossly inappropriate for the mythical user with visual styles disabled.
So no; if it’s semantic purity you’re going for, the real solution is to render your logo in its pure form on a solid background, put that in an
imgtag, hide theimgwith CSS in the appropriate media, and continue rendering your fully styled home page logo as the background of anh1.Connor Crosby said on 16 October, 2010 at 9:54 pm
I use a DIV to contain my logo. I just don’t like using an img as my logo. However, you do make some good arguments here.
Jabz said on 18 October, 2010 at 11:50 am
I thought about this recently. Your article finally convinced me that a Logo as H1 is just wrong. Thanks for doing the thinking for me! :)
K Huehn said on 18 October, 2010 at 4:19 pm
Most everything on a web page is content with the exception of empty markup tags used to simulate features that the browser cannot render on its own (hidden iframes, divs to achieve rounded corners, padding, etc.) Background images are used to style many different forms of content. The img tag is used specifically to indicate to the user that an image is present and to give alternate information if the image cannot be loaded or shown.
When people access web pages via screen readers and encounter an img tag, the screen reader will inform them of an [IMAGE] and then any accompanying ALT attribute text. A logo is the visual representation of a company or organizational brand. It has no other context on the page other than to convey the organization’s name and perhaps something of its mission/direction. Using the img tag to display the logo is to convey that the image itself is somehow relevant… it isn’t. Someone who cannot visually access the Web would not find an image relevant unless the ALT tag specified more than just the name of the company, if it specifically said “Image representation of the company logo for Company XYZ”. I think a tag simply stating the name of an organization is sufficient for all users, the addition of a graphical logo via CSS for browsers that can access them merely an enhancement. It doesn’t need to be an H1 tag specifically, but the text does have the most relevance here. The image of the logo does not have relevance to screen readers.
Evan Kaufman said on 18 October, 2010 at 10:19 pm
I use an image logo, but inside of a stylized div (basically an h1), so that if the image fails to load for whatever reason, the alt text is stylized to resemble the logo image.
Joe Czucha said on 19 October, 2010 at 9:19 am
H1 should be unique for each page. Header would naturally be in an includes and thus the same on each page. No benefit to making logo an H1 so just makes sense to just make it an
a.jDesai said on 19 October, 2010 at 10:26 am
Images give flexibility and serves the purpose of the content. Additionally, the point you’ve surely put quite right, it shouldn’t be used as a background image.
idont said on 19 October, 2010 at 3:42 pm
Can you please explain me why Google is marking his logo with h1 on the result pages? :)
Odin said on 19 October, 2010 at 5:36 pm
What if you wanna apply the CSS sprite technique (http://www.alistapart.com/articles/sprites) to save some HTTP requests? I’m usually storing all logos and icons within such an image and I’m applying each of them as background images.
Stephanie Bertha said on 19 October, 2010 at 10:19 pm
LOL — here’s my comment now with the code tags. Very hard to figure out! I used “pre” before and that didn’t work.
What I meant to say was:
Wow. This is really confusing. I read the article and then read the comments and there’s still a lot of debate.
I always did the h1 with your company name as I thought hierarchy wise, that was smart and SEO wise, good to do.
Can’t you just combine them into 1? For example:
Jessica's Salonand just text-indent the text out of the way?That seems to make people happy when it comes to SEO and people happy because the image is in the content. No?
HB said on 20 October, 2010 at 4:39 pm
As mentioned there’s no SEO problem with two H1s. In fact, chances are on your About Us page the document’s title is not simply “About Us”, but rather “About Us – Company Name”. Since both of those items together identify the page, I believe both of those items are “H1-appropriate” content in the page itself.
If you want to find an SEO benefit to using an IMG instead of an H1, how about Image Search? If you use an image logo it should rank for your site/company name as well as many of your pages’ keywords in Google/Yahoo’s Image Search. Not sure whether H1 background images would rank the same, but it’s probably worth investigating.
Nicolas Gallagher said on 10 November, 2010 at 1:14 pm
“The use of multiple
<h1>s per page is still beyond the scope of what SEs index, so to a search engine, a page with multiple s is bad news anyway (to the best of my knowledge).”This can’t be correct. There are plenty of HTML5 sites – mine and Kroc Camen’s included – that use multiple H1’s (including to markup the site heading/logo) without any hit to Google rankings. The markup used for logos has to be somewhere down at the bottom of things SE’s care about when decided on the quality of a page’s content.
However, marking up your site name (if no logo) with EM seems inappropriate as that element is for content that is to be stress emphasised, and may be read out differently by some assistive technologies.
I’ll generally use an IMG for logos in order to retain branding in print style sheets, rather than for any semantic, SEO, or accessibility concerns. What element is used to wrap the logo seems to be inconsequential but personally I used DIV with HTML4 and use H1 with HTML5. What others decide to do is up to them :)
Wes Mason said on 12 November, 2010 at 2:30 pm
Just realised this is *enterprise* too: http://enterprise-html.com/25 ;)
Bobby Jack said on 12 November, 2010 at 4:15 pm
Great points Harry – I totally agree with your conclusion here. Like yours, my site’s logo is textual, but it’s *not* in an H1 :-)
@Wes Mason: That tongue-in-cheek enterprise html entry of mine is actually referring to the use of ‘border=”0″‘ – nothing to do with the use of an image. I probably should have used a more ‘neutral’ example for it!
Kyle Schaeffer said on 23 November, 2010 at 3:09 pm
Interesting article, although I am surprised that you don’t consider search optimization at all. While the content vs. style is an important argument to consider (and you make some very good points), using <h1> in your site header for keyword placement is a standard practice in web design. The logo provides an excellent place for these keywords to appear.
Additionally, you use Nike as an example throughout your post. Nike has a logo that contains no type (only the swoosh), which I think is the exception more than the rule. With logos that contain no type, your argument is more sound, but I’d be interested in your opinion on logos that contain both.
Regardless, SEO best practices will tip the scales for me. I’ll stick with <h1>.
Julien Bidoret said on 23 November, 2010 at 5:08 pm
> It’s Nike’s brand, and it’ll be their brand whether their site is styled or not.
It’s just …false.
Nike’s brand is style. Nike website without its style is not Nike website anymore.
The reason : consider a Nike shoe, without the swoosh, without the Air™ tag, without the marketing hype that tell you that their shoes are superior to any other. A pair of Nike shoes unstyled are just plain shoes. And you won’t buy them $150, if they are not *styled*.
H1 vs img is just a related question ; if your *brand* need visual design to be expressed as a brand (a brand can also be expressed with just words, or sounds), you knows that your website without style is just a way of providing users a minimal experience of your content. And branding strategies will need to be adapted to the potential lack of style.
h1 > a > img[src="logo with just brand name inside" alt="brand name - the brand that will make you run faster marketing text blurb" ] is a good solution to me.
div[class="logo"] > h1[brand name] + em[the brand that will make you run faster marketing text blurb] with image replacement on the div (header, if you think html5) is also a good one.
Zak said on 5 March, 2011 at 8:18 pm
You are assuming that all logos function the same as Nike’s. In fact, Nike is a unique case and would not apply to the vast majority of websites or companies. Nike is an established brand with a mark that happens to be universally recognizable even without word Nike. Howver, most companies on the web offer niche products/services whose brands have a far smaller reach. Thus, they need to emphasize the company name over the mark, if they choose to have a mark at all. The mark acts in service of the company name, but cannot function independently of the name. Thus I’d argue most logos are more akin to headlines than photos.
Mariusz said on 3 May, 2011 at 9:22 am
In most of my applications, logo is an img tag with an alt text inside a h1 element, which makes it pretty bulletproof (without images it still looks like a header)
soully said on 3 May, 2011 at 9:34 am
From an SEO perspective your logo definitely shouldn’t be marked up as a h1, the h1 of a page should be different on every page as should the title.
Marking up a h2 however would have a positive influence on SEO, a text link passes on far more ‘link-juice’ than an image’s alt text does.
Pierre said on 3 May, 2011 at 9:34 am
What about Title ?
No logo as background, no h1 as image only. Text can be hide easily.
Actually, beside SEO, i found h1 for website name more semantically correct (imho).
Pierre said on 3 May, 2011 at 9:38 am
What about
Title?No logo as background, no h1 as image only. Text can be hide easily.
Actually, beside SEO, i found h1 for website name more semantically correct (imho).
wasim said on 3 May, 2011 at 9:43 am
Nice article , in most cases I was using . Now I have to think
Spencer said on 3 May, 2011 at 9:44 am
Totally agree, keywords shouldn’t be stuffed behind a logo forsaking semantics. Its an image, use an image tag!
Niels Matthijs said on 3 May, 2011 at 9:44 am
I agree that you should use an inline image for logos, I also agree that you shouldn’t put an h1 around it on every page, but I still believe the h1 fits on the homepage, based on the fact that an inline image is a little more than just the image, but also holds the alt=”" attribute, which is the textual version of your image, effectively the content of what you could consider the h1 element on the homepage.
So there you go, I use an inline image, never an h1, only on the homepage where I won’t need an extra element to be hidden for crawlers and other services.
DirTek said on 3 May, 2011 at 9:46 am
Great article.
But I must agree with Kyle. You didn’t take SEO into consideration. I’ve been using H1 as logos for a while now, while having some keywords between the tags to improve my SEO. Using text-indent so I could hide the text, the logo stays in it’s place…and I got myself some extra keywords.
But that’s just my opinion…
nachomaans said on 3 May, 2011 at 9:47 am
Thank you for this article which challenges common practice.
Whether a logo is content or an image is debatable.
If you consider the logo to be content, yeah well that’s just your opinion man as the Dude would say!
To me it’s presentation: a nice, graphical way of displaying the company name.
The real accessible information which should be readable by all (humans, machines, …) is the company name, not a swoosh or other symbol.
=>I would still put it in an <h1>.
Regarding the problem of printing a logo if background images are not printed, here is how I usually do it in the @media print rules:
#header h1 {display:none;}
#header h2:before {content:url(../path/to/image.jpg);display:block;}
- The h1 with the background image is hidden
- The logo is added as an inline image via css before h2 (the tagline).
It prints well, saves ink, paper and extra markup while also allowing the use of a print-specific black and white version of the logo in a different size.
There’s no right or wrong way to do it, what matters is to separate content from presentation and to keep pages accessible. I think we all agree on this!
Rob said on 3 May, 2011 at 10:05 am
Hey Harry really good article.
Would be really interesting if you could exand on the reasons for your approach to the logo on this site.
It’s not an image, therefore could not be indexed on something like Google Image Search, or do you offer up and image to bots and the like.
Thanks
Rob
Bob said on 3 May, 2011 at 10:27 am
The , and perhaps you state this already, should sum up the content of the page. The branding with text/logo does not necessarily have to be within the tag to facilitate this, but opposite to what you say, it can, without being ‘wrong practice’. The logo should be, as you say, presented as an image properly tagged, named, etc. The reasons are as follows.
Remember, for the branding we have an important entity, namely the URL. The URL weighs a lot when it comes to branding. So if you are Nike, you better have the domain and make use of he canonical URL to improve SEO! This in theory removes some of the reliance on a logo for branding. Nonetheless, the URL needs to be complemented with additional methods, there among the logo which should be included inline.
Secondly, the tag should emphasize what the page in particular is displaying so more keywords can be included. So, if ‘nike.com/sportsgear/shoes/running’ is your URL the should practically be “Something Something Running Shoes and Whatever Words That Describe The Page”.
stdim said on 3 May, 2011 at 10:43 am
I disagree slightly with what you’ve said in this article.
H1 holds top header content, but an image is not (always) content. An image placed in a semantic container, if you will, of the like of IMG can be content if marked up correctly. Thus, IMG elements who are children of heading elements are good to use. Other non-visual users (robots, screen-readers) use the content provided in the ALT of the IMG, not the SRC of the IMG.
I find it very correct to wrap your logo as an H1 if it represents top-level content. It is also very correct to wrap your logo with other content in an H1 (TimeWarner style — remember “A TimeWarner company.”, where everything is set in sans-serif, except “TimeWarner” which is a serif), eg:
Welcome to !
This will render to visual users correctly, and non-visual users should extract the content as “Welcome to Somewhere!”.
Martin said on 3 May, 2011 at 11:03 am
This is all well and good and I totally agree with the article in many respects. The thing that strikes me however is what if you want to use CSS sprites. I use these a lot to speed up site loading times. Therefore I would never use a inline tag rather I would use a , or <em> tag depending on the situation and then style them as needed.
I also think personally that on the homepage an H1 logo is best as it allows you to put your brand as text for the search engine to pick up on other pages however I would go more towards not using the H1 as the logo instead use the page title.
Michael said on 3 May, 2011 at 11:27 am
use div for everything but images and lists… use CSS and JS for everything else…
Imo there no right or wrong, its all a matter of time, money, requirements, and style (in general).
Also if your logo is image the only drawback I see are the search spiders since they might not pick it up for text searches although they might on image ones…
enrico said on 3 May, 2011 at 12:32 pm
What about wraping the IMG tag inside the H1 like this:
enrico said on 3 May, 2011 at 12:32 pm
I mean like this:
What about wraping the IMG tag inside the H1 like this:
[h1][img src="yourlogo" /][/h1]
Patrick Samphire said on 3 May, 2011 at 2:20 pm
I’m going to be fairly neutral on this, because I think it can go both ways. In the case of Nike, Pepsi and so on–brands that are absolutely recognizable–you’re right. But what it really comes down to is, when is a logo a logo?
If it’s a personal blog or website, and the person’s name is in a font that isn’t used elsewhere on the site, maybe with a bit of additional styling, is that actually a logo of the type you’re referring to? Well, it depends. It *could* be a logo of the type you’re talking about, or it might just be some visual styling. Some might call it a logo, some might not. In those more edge cases, it’s perfectly legitimate (particularly in HTML5) to make this an h1, even if you’re using image replacement to make up for the deficiencies of CSS and for consistency.
So, yeah, you’re right. But also, you’re not. :)
Matt Ritter said on 3 May, 2011 at 2:22 pm
This is a great article, and it sheds light on a mistake I’m probably making at the beginning of every site I begin to build. I’ve usually just stuck the logo in a div using the Phark Method like such:
Company Name
This way I’ve avoided the whole h1 issue all together. I don’t mind having an extra few lines of css in my stylesheet.
However, I think I will take on this idea of using an inline image (just noticed this article is quite old) and test it’s dis/advantages!
Thanks Harry.
Gustavo Atar said on 3 May, 2011 at 2:23 pm
I like that you would pour so much energy into your argument but essentially the logo is not content it is part of the design to your overall site.
That is why you should wrap it in an H1 and have the content in the H1 display your name for the SERPs, then indent it for screen readers that can handle the logo. It is a well known SEO practice so that when it degrades for mobile and other devices or readers they get the text and not alt text of your image tag.
I agree with Meteoracle and others.
Infernocloud said on 3 May, 2011 at 2:43 pm
Though there are good points on both sides, it’s hard to take this seriously when even Google has their logo in an H1 (on search result pages).
Richard Williams said on 3 May, 2011 at 4:29 pm
Nice article, using H1’s is what I normally do.
On a small site with a name that you want to target for SEO I think it’s possibly worthwhile to use H1’s, however on the whole I think I might review how I handle my logos.
Tom Conte said on 3 May, 2011 at 6:32 pm
Hi Harry,
Great post. Certainly sparked a lot of feedback within the community.
I do agree with you that the H1 shouldn’t be applied to the logo, but I don’t feel it’s an absolute necessity.
Ideally, the logo should not be the H1 heading, but limitations in the design can force developers to use the logo as the H1 or for search optimizers to recommend enclosing the image within an H1 tag. With proper ALT text, the image is given relevancy to a page, of course, only in the eyes of search engines. Just to be clear, they need a lot more help in determining the content of a page than a user does ; ).
Secondly, if you do place the logo within an H1 tag, that doesn’t mean you are bound to using the logo as the H1 across the entire site. In any site powered by PHP (or a language of similar capabilities) one can dictate where the H1 appears on any page. I’ve done this in Wordpress and Drupal, for instance.
Lastly, what standard are you quoting that makes it seem as though this was sent form high above? Also, the order of your heading tags doesn’t matter. You can have an H2 after an H1 and also skip a heading tag altogether. Heading tags dictate a level of importance, regardless of order.
Keep up the good work, Harry.
Cheers.
Tom
Enrique Ramírez said on 3 May, 2011 at 8:07 pm
My problem with this ideology is this:
In the article, you mention an example involving an “About” page. You say the title of that page is “about me”. I say you’re wrong. In my mind, the title of the page is: “Enrique Ramírez -> About me”. Thus, I mark up each and every website I code with an image with an alt text inside an h1. I dislike the background technique because it’s not accessible, and I do believe logos are content; but I also believe that the name of the brand is the highest one in the hierarchy three.
It seems to me that the confusion here is that “but then your title is the same as every other page in your site! Homepage, about, portfolio… all would have the same title!” But that’s where people go wrong. That’s what the TITLE tag is there for. People also tend to forget that h2’s do have semantic weight and meaning. h1 is not the only one.
Chandra81 said on 14 June, 2011 at 10:22 am
Here’s what you said:
Nike’s logo appearing on Nike’s site. On the homepage the may well be whatever the logo says; it may well be Nike. This is a case where the logo and the share the same meaning. But, as discussed, the content of the two is different. The logo is still branding, and the is still a textual element. To have the being the logo would be like having your name being a photo.
I believe there is a basic flaw in the above reasoning against using logo as
I agree with the branding part that branding is more than a name as Kapferer’s Brand Identity Prism explains but when you see a crocodile or a swoosh what comes to your mind is Lacoste or Nike which is tangible impact not the culture, personality or self image associated with the brand which are the intangibles.
Similarly in the case of internet marketing, when a person is looking at Nike’s homepage he is seeing the swoosh that’s tangible. The meaning of that swoosh is same for him as was when he could have seen it on a Nike T-shirt.
For the sake of argument lets say why a logo could be used as . Let’s consider two cases:
1. The visitor
Suppose I am visiting Nike’s website and I see a swoosh, I’d definitely won’t check the page source to find out whether its a brand with meaning or just a photo. In this context the meaning or the premium associated with that particular logo is still there.
2. Search engine spider
I believe I am not wrong to say that is used to inform search bot as to what are the important elements on the page. And for a brand like Nike, the logo is as important as anything on the page. Nike knows this, we know this, but how will a search engine know.
You see that is when using logo as becomes important. By using its logo as and alt=”Nike Logo” Nike is telling the search engine bots that for Nike the logo is an important element.
Imagine searching the Nike’s logo on internet with word such as culture, self image, brand personality etc, it’s always easier to use “Nike logo” as search query instead.
Patrick Turmala said on 20 July, 2011 at 5:53 am
“To have the h1 being the logo would be like having your name being a photo.” err…
Actually, it would be like your name being a text. Not that I don’t support what you’re saying though. Here’s what I get from it:
If your logo needs to be heavily styled, make it an image. If it doesn’t, make it text and make it h1.
Andy Fitch said on 2 November, 2011 at 3:00 pm
Great article again Harry, fancy updating all our client sites for us? :P Catch up at North on the cards I’m thinking…
Robin said on 13 February, 2012 at 9:55 am
I understand why the logo should be an image. However, a problem arises when you try to add a hover state as per inuit.css.
If you do this:
Then the logo isn’t clickable anymore!
Keith Pickering said on 23 April, 2012 at 7:01 pm
I think it’s different depending on what type of logo it is. If it’s purely textual, but with styling beyond the capabilities of CSS (to the point where it HAS to be created in Photoshop or similar software), I consider it purely stylistic. In a browser with styles off, you’re not getting anything extra from a fancy image than you would with text. So in that situation, I’d use an h1.
HTML5 allows multiple h1’s, so I use an h1 for the logo, an h1 for the page title, h2s for headings of different areas of the page, h3s for divided areas within the h2s, and so on.
The logo image on my site has an icon and text, but I put it in an h1. I’m wondering if it would be smart to have an image for only the icon that is hidden with CSS, and an h1 with a background image for the whole logo? That way, with CSS on, everything will appear the same as it is now, but with CSS off, the viewer will get the icon and the name of my site in browser text.
The only drawback I can see would be that EVERYONE would have to load an extra image, even though 90% of people wouldn’t see it. And I don’t think my icon has as much of a cultural impact as the Nike logo.
tyfairclough said on 4 May, 2012 at 11:12 am
The first notion that a logo is content is seriously debateable. The ’swoosh’ of Nike is just a visual identifier (a style) of the brand Nike (the content). So on those basis you could argue that your notion would mean all images are content unless they represent more closely fine art as apposed to commercial.
tyfairclough said on 4 May, 2012 at 11:31 am
My position is that the logo doesn’t need to be the h1 at all, with perhaps the exception of the home page. The site title should be defined in the
And there’s nothing wrong with multiple h1 tags when used correctly either, so I’m told. http://www.youtube.com/watch?v=GIn5qJKU8VM