SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist TRISPECTIVE's Avatar
    Join Date
    Sep 2002
    Location
    n/a
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Span inside H1 tags

    I am trying to have one of the letters of my H1 tag line in a different color then the other. So for instance I have `Apples` where I want `A` to be green color.
    The way I would like to accomplish it is by using a CSS-ed span with a color: green; set to it in my CSS file. For instance:
    Code:
    <h1><span class="green">A</span>pples</h1>
    My concerns are:
    1) Will it still be seen as a whole word (apples) by the SE, or it will be split as `a pples`?
    and
    2) Do you get any sort of penalty for having this strange H1 tag?

    PS: I know I could just add a green font tag in front it or even do it by javascript, but I would like to know about this implementation method instead.

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my experience, the search engines should read it fine, and I don't know of any penalty for using that technique; lots of people do a similar thing for image replacement (to replace the heading by a nicer-looking graphic of the same text).

    Anyway, have you tried playing with the CSS "first-letter" pseudo element? I've never tried it myself and I don't know about its browser support.
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  3. #3
    SitePoint Addict CWebguy's Avatar
    Join Date
    Mar 2009
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for kicks, try this

    h1:first-letter {color:#ff0000;font-size:1em}

    Make sure it is still a block element (which is default unless you changed it)

  4. #4
    SitePoint Evangelist TRISPECTIVE's Avatar
    Join Date
    Sep 2002
    Location
    n/a
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, forgot about that pseudo. Never been a big fan of them. According to
    http://www.w3schools.com/CSS/CSS_pseudo_elements.asp
    it is supposed to be compatible IE5/FF1/NS8 and above.
    Anyway, the thing is that the letter is in the middle of the word and there is a chain of 3 letters. So I guess I will still try the span method and see if I get any slap from SE.
    Thanks

  5. #5
    SitePoint Addict CWebguy's Avatar
    Join Date
    Mar 2009
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's for a logo, you could maybe make an image, although you might lose the <h1> power, you can always add an alt text.

  6. #6
    SitePoint Evangelist TRISPECTIVE's Avatar
    Join Date
    Sep 2002
    Location
    n/a
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The logo contains some object related to the website and I was thinking of gaining more ranking weight by using the site name and the aimed keywords within a H1 right under that image.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2009
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CWebguy View Post
    If it's for a logo, you could maybe make an image, although you might lose the <h1> power, you can always add an alt text.
    You don't lose the H1 "power" if you use a nice image-replacement technique. Look at what Slashdot does; try turning off CSS styles, and you'll see the H1 title is still there. Perhaps I do it on my sites too; I don't want to encourage you to look at the sites in my signature...
    Learn all about diamonds,
    Check out some period-drama movies and TV series,
    Or get festive with The Wonder of Christmas.

  8. #8
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TRISPECTIVE View Post
    My concerns are:
    1) Will it still be seen as a whole word (apples) by the SE, or it will be split as `a pples`?
    2) Do you get any sort of penalty for having this strange H1 tag?
    1) Whole word (apples)
    2) No.

    Search engines largely ignore HTML from a rendering point of view - they only see it from an emphasis and semantic point of view - so you are quite safe using this method.

    If you are concerned - use the Lynx browser which Googler's have said gives a *fair* representation of how they see your content.

  9. #9
    SitePoint Evangelist TRISPECTIVE's Avatar
    Join Date
    Sep 2002
    Location
    n/a
    Posts
    477
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lynx outputs it just fine. I was mostly worried about falling into some blackhat pattern and get kicked for it. I will just give it a try and see what turns out.


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
  •