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?


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
    Commented Jul 28, 2012 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.
    – MrWhite
    Commented Jul 30, 2012 at 16:14

4 Answers 4


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


Edit to demonstrate multiple words:

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

h1:first-letter { 

  • 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
    Commented Jul 28, 2012 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 Commented Jul 28, 2012 at 21:36
  • It's not capitalizing and styling the first letter of each word
    – Anagio
    Commented Jul 28, 2012 at 22:28
  • 2
    @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. Commented Jul 29, 2012 at 0:58
  • 1
    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. Commented Jul 30, 2012 at 12:33

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

Refer https://stackoverflow.com/questions/3039397/jquery-select-first-letter

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


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
    Commented Jul 27, 2012 at 22:18

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.