About
Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way.
Josh Johnson is our writer and editor, taking care of the awesome content we publish!
Joel Bankhead is in charge of our gallery, carefully curating every new design.
David Appleyard heads up management of the site, strategy, and advertising.
Design Guidance & Advice
A Design Critique gives you the opportunity to have the Design Shack team analyse your site. We'll tell you what we like, and what we feel could be improved. This is published as an article on Design Shack to give you plenty of exposure (see an example).
With a Design Analysis, we produce an personal, in-depth report into every aspect of your website. It covers code, design, layout, semantics, SEO, and everything else, all provided in a beautiful printed report.
We can also offer advice and assistance with your whole design project, even managing the entire project for you. We'll work with selected partners in our amazing Design Shack community to produce a design that you love.
Good solid tip… covers all the bases.
thanks…it`s really a good way to display your logo. i also make it this way on my websites. Nice and simple
The debate regarding SEO and text-indent is a never ending story.
But does anywone know what the searchengines says?
search engines browse the html code, therefore won’t be influenced by any styling Mark.
that’s the point of this technique, the genius of css in general: separating content from style.
Of course we now have the debate of usingup the H1 tag across the site, thus deflating it’s SEO usefulness…
Phew! My method makes sense!
But yeah, I generally replace the H1, with a div or a p, as Ben mentions about deflating SEO usefulness for H1.
Thanks for the simple breakdown. But if you don’t use H1 for this, what would be the best use?
I find this a big waste of a H1 tag. The logo could simply be put inside a div with the text out of view.
The H1 tag should be used to best describe the page it is on. For example, the H1 of this page should be “Correctly Displaying Your Logo With CSS”. This would be a far better option from an SEO point of view.
I’d agree with the comments above – the H1 should (ideally) be unique to the page, and not be an element which is going to be repeated on every page.
I usually wrap the logo in a div/p and do the same thing if needed.
Helpful tip! I’m just going to use it very soon, thanks for post ;)
Great little article for those not currently displaying the logo with CSS, but it’s not really best practice to make the H1 the logo (as mentioned by other commenters), unless you dynamicly change the text of the image to the page title, but even that would be best featured somewhere else.
Great simple article though, would be ncie to see more like this!
Thanks for all the info about the H1 tag, I’ve always used it for the site heading in my projects and never really thought otherwise.
Worth thinking about for future sites!
David,
1. I can’t agree with that you put logo in h1. H1 should go for article (this is the most important thing on this page). More – it’s better for SEO.
2. Google, I was testing Google algoritm for text-indent, and I must say that Google sees text normally.
From my scouring the web on this subject, the general consensus seems to be to use H1 for the logo on the _home page_, where it makes sense to do so.
On all content pages H1 should be the main title of the page.
Can I just mention that this is not the correct way to do this, there is no correct way.
I would also like to point out that CSS styles the page, so if the company has a logo it should be included as an image in the page, even if the CSS is not applied so I don’t like this way of showing your company logo. Nor do I like the indent hack.
Klaye Morrison: Not only does using The H1 help with SEO, but its also good for accessibility. this technique is not for clean CSS.
I try to use it on all of my sites, and have been for quite some time.
there is not a single drawback- that I know of.
Seconding Shae, it works great for SEO. One thing I add, though- you may want to change the h1 on each section so it properly represents where you are on the site.
For instance:
Homepage- joe’s widgets
About Us- joes’ widgets: about us
It seems to help a bit more, and to me it gives non-visual browsers even more help in navigating the page.
In terms of accessibility, there are some that would argue that it is not entirely accessible. In the case of images-off-css-on, you will be left with a blank space.
I think it is a fair comprimise personally as I do struggle to think of a scenario where someone would be browsing with images diabled and CSS enabled.
The one problem that I have found with this method is that background images do not usually show up on a printed page, so you end up with a page of print with no title/heading.
Another drawback with the method of using the h1 tag with updated text for each page-
You’re turning the title of every other page into a link to the home page. To me this seems strange, and it would be better for users with either images, CSS, or both turned off to see either the company name in the form of the image’s alt text, or the image itself.(I agree with Ape Web above – if the logo is included as a background image, then CSS lacking browsers will not see the logo)
It seems that i can’t change the H1 and it’s the same on every page
that seems lkike its the template it is on then
Thank you very much this will help moving forward.