SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wrapping logo/ image in a <h1> tag

    Hi

    Forgive me if this is a poor question but........

    I'm just wondering whether its a good idea to wrap a logo in a <h1> tag or not and how search engines would react to it.

    Thanks,

    Noelt

  2. #2
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,304
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't see it giving any benefit. what are you hoping to accomplish?

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Bill,

    Saw it mentioned on A List Apart last year (I think). There was also an article on adding your logo as a background image via CSS with your <h1>being a link back to your homepage.

    Just wondering which way is most common i.e.
    1. Not wrapping your logo in a <h1> tag
    2. Wrapping it in a <h1> tag
    3. Placing the logo in the background via CSS with the <h1> tag being a link back to your home page


    Noelt

  4. #4
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noeltkelly
    Wrapping it in a <h1> tag
    That one's fine, as long as your logo has the appropriate alt text.
    Quote Originally Posted by noeltkelly
    Placing the logo in the background via CSS with the <h1> tag being a link back to your home page
    That one's fine too, but your company name (the alt text of your logo) won't be anywhere on the page.

    As for the most popular, who knows? It depends on the situation. Personally I'd probably wrap it in an <h1> on the home page, but not on any subsequent pages.
    Olly Hodgson
    thinkdrastic.net

  5. #5
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's no bad thing - as long as you've given the image an appropriate alt attribute.

    That said, search engines would probably treat the contents of the <h1> as the most important heading on the page. For everywhere except the front page, that's possibly something you should be saving for the headline on your top bit of content.
    Olly Hodgson
    thinkdrastic.net

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use one of the Image Replacement techniques on this page: http://www.ryznardesign.com/web_codi...ent/index.html
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use it all the time.

    What I do is use the <h1> element (since I use it as the site's title, it only gets used once per document) as the container for the header image, then put the site title as the header text.

    Here's an example:
    HTML Code:
    <h1>ABC Widget Company</h1>
    Then I add a <span> element just before the header text (won't work in Mac-IE, but then again, why should I cater to a DEAD browser anyway?):
    HTML Code:
    <h1><span></span>ABC Widget Company</h1>
    After that, I apply the CSS for the effect. Note that I use the header on EVERY page in the site, since it identifies the Web site's title. Though my methods are a bit... unorthodox...
    Code:
    h1, h1 span {
    	background: url('/images/header.jpg') no-repeat;
    	height: 165px;
    	width: 750px;
    }
    	h1 span {
    		display: block;
    		margin-bottom: -165px;
    		position: relative;
    		z-index: 1;
    	}
    You'll notice that the header and the span have the same background, height and width properties applied to it. The background declaration simply states which image you're going to use, where it's at and that you do not want it to repeat. The height is the height of the image, same for the width.

    The <span> is set to display: block; since you want to convert it to a block-level element. Its bottom margin is set to a negative value equal to the height of the image, and then has its position set to "relative" so you can apply a z-index to it, which will cause the image to stack above the default header text.

    This is the same technique described in the Sitepoint article "Accessible Header Images With CSS And XHTML." If you want to read more about it, go here:
    http://www.sitepoint.com/article/hea...ages-css-xhtml

  8. #8
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another useful resource about image replacement techniques:
    http://www.stopdesign.com/articles/replace_text/

  9. #9
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    That's a great idea, works very well, covers all the bases !

    Much appreciated.

    Thanks for the reference simsim

    Noelt

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It covers all the bases but one. What if you want a link inside the header?

    Paul O'B has a solution to it, but I took one look at the CSS for it this morning and thought it was pretty messy. Granted, he's just as good with CSS as I am (probably even better) but once I have some free time, I'm going to take a stab at re-writing his example.

  11. #11
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is very simple.
    You do:

    <h1>Text</h1>

    and then in the css for the h1 tag you put a background image (your image logo) and a property of : "text-indent: -1000em". That's all.

  12. #12
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan

    It was one of the objectives I was trying to acheive, I done this

    <h1 id="imagereplacement"><a href="/test/index.shtml"><span></span>acme.com</a></h1>

    with no changes to the CSS the link just sits behind the image.

    Am I missing your point here........

    Noelt

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Skyblaze
    it is very simple.
    You do:

    <h1>Text</h1>

    and then in the css for the h1 tag you put a background image (your image logo) and a property of : "text-indent: -1000em". That's all.
    Try turning off images while still letting the CSS get rendered and you'll see the problem with your technique. If you're going to use CSS based image replacement techniques, they have to be accessible to peopel who, while still having the site's stylesheets applied, have images turned off.

    Who in their crazy mind would do something as preposterous as this? DIALUP users. Like me .

  14. #14
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My personal take is that the <h1> should be the main title of the individual page, not the name of the site (i.e. the same on every page).

    Just use a plain <img/> for your logo (not image-replaced, as background-images don't get printed) - and with respect to SEO, if you can't manage to place in the SERPs for searches for your own company name you need to try harder.

  15. #15
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats a good point Buddy........that the <h1> tag should be the page title and as such you have a different top level heading depending on the content of each page.............

    so why move away from this with all of the above techniques...........whats the reason behind it..........can anyone shed light on it.........

    Noelt

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a reason why I use the <h1> element as the site title. I use it as a global hook to define the site's header when I style it. Plus, it also defines the site itself for text-baed browsers *cough* Lynx *cough* and screen readers.

    As for adding links to CSS based accessible image header replacement, I'm going to give you the link to Paul O'B's page that shows how to do it. I *might* have some free time this weekend, and if I do, I'll try to whip up an improved version of his CSS (giving proper attribution of course) and then share it here.

    Here's the link:
    http://www.pmob.co.uk/temp/navimagereplace.htm

  17. #17
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    There's a reason why I use the <h1> element as the site title. I use it as a global hook to define the site's header when I style it. Plus, it also defines the site itself for text-baed browsers *cough* Lynx *cough* and screen readers.

    As for adding links to CSS based accessible image header replacement, I'm going to give you the link to Paul O'B's page that shows how to do it. I *might* have some free time this weekend, and if I do, I'll try to whip up an improved version of his CSS (giving proper attribution of course) and then share it here.

    Here's the link:
    http://www.pmob.co.uk/temp/navimagereplace.htm
    wow! that technique is amazing.....i'll use it definetevely! But i don't understand the "hover" image on ems! Where are they? And why if i click with the right mouse button i can't see any "view image"?

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <em> in this case is a replacement for <span>, since Mac-IE (a dead browser that people still seem to use with some regularity) doesn't understand the styles when used with a <span> element in this case.

    Paul can tell you more about it.

  19. #19
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    <em> in this case is a replacement for <span>, since Mac-IE (a dead browser that people still seem to use with some regularity) doesn't understand the styles when used with a <span> element in this case.

    Paul can tell you more about it.
    it is not that! I can't figure out which are the images! One for the normal vision and one for the "hover". In the css source code i can't see any different image for the hover!

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see what he did. He used a single image for both states, and then adjusted the position of the image depending on the current state. The top half for normal (and visited) links, and the bottom half for the hover effect.

  21. #21
    SitePoint Guru Skyblaze's Avatar
    Join Date
    Jul 2005
    Location
    Italy
    Posts
    734
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    I see what he did. He used a single image for both states, and then adjusted the position of the image depending on the current state. The top half for normal (and visited) links, and the bottom half for the hover effect.
    What i mean is that i can't see "View background image" when i click with right mouse button in firefox over the image!

  22. #22
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Skyblaze
    What i mean is that i can't see "View background image" when i click with right mouse button in firefox over the image!
    Actually Firefox have a very cool tool that I use a lot in studying webistes image slicing as long with HTML/CSS source. You can access it as follows:

    Tools => Page Info => Media.

    It shows detailed information on all images on a current page, including background images of course.

  23. #23
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yep a single image for both states. The rollover image is hidden outside the ul and the pulled in to position using background-position in the css. It takes a bit of messing around to get the rollover background positioning right, especially if you have different sized link images.

    Basically to get round it, if you do happen to have different sized images you have to specify the width of each image and background position properties for each link image seperatley. Its a little heavy on the css but a really good technique all the same.

    You can do it with two seperate images but its slow becuase the hover images dont load until you rollover them causing a slight delay when you rollover for the first time

  24. #24
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's called CSS Sprites - have a google.

  25. #25
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it is! Never heard of it before!

    you've got to love alistapart:

    http://www.alistapart.com/articles/sprites/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •