Span inside H1 tags

Marketing
1

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:


<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

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.

3

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

Yea, forgot about that pseudo. Never been a big fan of them. According to

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

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

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

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…

8
  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

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.