# Do span elements in the middle of a word affect a crawler's ability to detect content?

I have a site with a heading tag like this:

<h1><span class="initial">H</span>andyman <span class="initial">S</span>ervices</h1>


I've done this so that I can apply a bigger font size to the first letter of each word. However, in webmaster tools I see the keyword 'andyman' under Optimization > Content Keywords

Is that anyway to acheive a bigger font size for first letter) without effecting a webcrawlers ability to detect the word?

Update:

I can't simply use text-transform: capitalize as the element in question already has text-transform: uppercase; and I would like the effect to more dramatic than that provided by the uppercase letters of most fonts.

-
nice question! javascript is the answer –  skyline26 Jul 28 '12 at 17:07
@toPeerOrNotToPeer: In light of Google's increasing ability to index JavaScript generated content, I'm not sure that JavaScript is necessarily the answer. –  w3d Jul 30 '12 at 16:14

You can also use CSS and the :first-letter psuedo-element like this

http://jsbin.com/acagop/2/edit#html,live

Edit to demonstrate multiple words:
http://jsbin.com/acagop/4/edit#html,live

Edit to demonstrate Raffael Luthiger's idea to wrap entire words: http://jsbin.com/acagop/6/edit#html,live

<style>
h1:first-letter {
font-size:300%;
color:red;
}
</style>

<h1>Welcome</h1>

-
He has multiple words within his header <h1> tag that will only work with the first letter of the first word it's not doing what he wants at all. –  Anagio Jul 28 '12 at 21:31
Incorrect it will work for the first letter only. Does not apply to each word and works in all modern browsers jsbin.com/acagop/4/edit#html,live –  Anthony Hatzopoulos Jul 28 '12 at 21:36
It's not capitalizing and styling the first letter of each word –  Anagio Jul 28 '12 at 22:28
@Raffael : That makes sense, css would need to be adjusted since it doesn't work on inline elements. I've updated my answer to include the new idea. –  Anthony Hatzopoulos Jul 29 '12 at 0:58
The OP is already doing a hack job with the <span class="initial">. Doing this in php or javascript is a moot point to argue about. Both would have performance issues, php would slightly effect backend (fixed with caching) and javascript solution would be a bit worse and also slow down client side performance and make FOUC effect. I wouldn't do either personally. CSS Capatalize should have the same effect and be proper English. And maybe the OP can just use an already Capatalized webfont, but again slowness which I don't like personally. –  Anthony Hatzopoulos Jul 30 '12 at 12:33

The better way would be to use CSS. You can use text-transform like:

text-transform: capitalize;

-
I should have mentioned, I have already applied text-transform: uppercase; –  pgraham Jul 27 '12 at 22:18

You could use jQuery to select the first character and change it on the fly, so crawlers wouldn't see the span.

Update: There is a plugin for this feature as well: http://812studio.com/initial-letter-a-jquery-plugin-for-making-drop-caps-and-more/

-

Google is clearly reading the rendered HTML and separating the word because of the span tag. Since headers are pretty important to tell Google what keywords are a little more important on your page than others you may re-consider your code to be semantically correct. While you get a nice looking header is it worth it if google sees andyman instead of Handyman

-