SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <h1> tags around an image?

    is it possible to put <h1> tags around an image if that image has an "alt" tag?

    because i read to only put one <h1> on a page, (makes more sense to SE's, so it says). but my headings are images of text, these images have alt tags saying the same thing. coz what i have on my page right now, is the image of the topic of the page (ex. The Area), an alt tag saying the same thing, and the divisions of the article all with <h1> tags.

    so i was wondering if this is possible, or rather advisable.

    am i making sense? hehe!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Yeah, you can. Search engines might not give your alt text as much weight as plain text though, since the alt attribute has been misused for keyword stuffing a lot in the past.

  3. #3
    Non-Member daedalux's Avatar
    Join Date
    Jan 2006
    Location
    Charlotte, NC
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're going for search engine optimization, it's best to use text rather than graphics for your h1 tag. Search engines put much less weight on an image's alt tag than actual text -- reason being, the alt tag can say anything, while the graphical text says something else.

    With h1 tags being so important to SEO, I strongly advise using text instead!

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    If the image you're using for your h1 tag explicitly reflects what you'd write in text form, then you could also use text instead for your h1 tag but hide it via CSS and have your image show instead. This is not the best accessibility method, but if you absolutely have to use an image, you can use something like this (mind you, there are many different methods you can use, some more and some less accessible):

    h1#welcome
    {
    background: #fff url(../myh1replacementimage.gif) no-repeat;
    height: n px;
    width: n px;
    text-indent: -99999px;
    }

    Then you could use your markup like this in your html document: <h1 id="welcome">this is my heading</h1>

    That way you'd position your h1 text off screen.

    Another option would be to use a span and place the image inside your span instead and place that on top of your h1.

    None of these methods are as good as pure text, however.
    Last edited by kohoutek; Jun 4, 2006 at 18:53.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the suggestions! I used a .GIF image because the font for my headings, is one i doubt most people have. I might use the replacement image. would SE's still give the same weight to the text inside the markup even if i didn't have a replacement image?

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by belledumonde
    would SE's still give the same weight to the text inside the markup even if i didn't have a replacement image?
    SEs don't read background images so essentially all they're seeing is your text.

  7. #7
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! i think i'll go with the image replacement method, sounds easy enough to do and yields the same results as plain text.

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have a look through the methods discussed here: http://www.mezzoblue.com/tests/revis...e-replacement/

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Most techniques for image replacement are discussed in this article. It is very informative.

    http://www.mezzoblue.com/archives/20...plac/index.php
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i forgot to say thank you to all that helped me out here. i used an image replacement method to get the outcome i wanted. so thanks for teaching me something new!


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
  •