Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

When is an <h1> not an <h1>

I was just wondering if a page does not have an obvious h1 how would you approach it

http://www.plusonetesting.co.uk/furzedown/home/ This page has the h1as the logo but that's not really h1 material is it?

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Andrew Shook
Andrew Shook
31,709 Points

Graham Davidson, what do you mean by an "obvious" h1 element?

6 Answers

hi Andrew - well there is not really a title in the document for the page.

Andrew Shook
Andrew Shook
31,709 Points

Are you talking specifically about the plusonetesting.com or in general?

well in general but I was using that link as an example - i have set the h1 as a background image but am sure that is a bit naughty

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,028 Points

An H1 is always a H1 but is not an effective h1 if not used properly. And H1 is an important SEO tool, so should be left well away from images which are best suited for divs or spans.

Andrew Shook
Andrew Shook
31,709 Points

He included the text but hide it using css. Also its a background image not an image element

Andrew Shook
Andrew Shook
31,709 Points

No, not at all. I inspected the html and you still included the text inside the h1 element so search engines and screen readers won't be effected. How people see it is irrelevant at that point.

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ but what do you feel about this article Andrew

Andrew Shook
Andrew Shook
31,709 Points

I agree with it Graham, but the difference is you still put text in the h1, and this article was written 4 years ago. Chances are no one visiting your site will have problems rendering the bg image. You if make you feel better you can wrap the h1 and an img of the logo in a wrapper div, position the logo absolute and give it a z-index higher than the h1 so that is appears over the top of it.

Andrew Shook
Andrew Shook
31,709 Points

James Barnett, I still stand by my earlier statement. His html is still semantically correct, and he was achieving the desired visual effect. I also said that I agreed with the article, but I came to the same conclusion the author did in his follow article. Sometimes its ok to bend the rules as long as you're not breaking things like SEO and accessibility. Neither of which Graham was doing.

Thanks both - and I think that is a good work around Andrew