Ok this is thinking outside the box to solve a somewhat annoying and completely arguable problem.

The problem: I want my websites heading to have two words and one of those words I want to be in bold, or, and maybe even in a different colour.

The usual solution:
{code type=php}

firstWord secondWord

{/code}

Looks something like this after some CSS – “firstWird secondWord”

The question I ask myself is simple, does Google like me putting spans, an element with no semantic value inside of my h1’s, h1’s being an element with very important semantic value?

If it doesn’t, why should I be punished for using text instead of an image to make my title stand out? Seems annoying doesn’t it. Well it annoyed me so much I came up with a solution.

A+ solution:

View Demo

The html
{code type=html}

firstWord secondWord

{/code}

The CSS
{code type=php}
h1 {
font: normal 2.25em Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
position:relative;
height:0px;
padding:50px 0px 0px 0px;
overflow:hidden;
}
h1:before {
content: ‘firstWord ‘;
position:absolute;
top:0px;
}
h1:after {
content: ‘secondWord’;
font-weight:bold;
position:absolute; top:0px;
left:4.5em;
}
{/code}

That’s it you’re done. View the demo and you will see the bolded second word, you can set any number of different styles on the words to achieve your desired look. Plus it is semantically more correct, it requires no span inside your h1 tag. If you have FireBug installed, inspect the element, you will see the inner value for the h1 node is simply ‘firstWord secondWord’ and that is how a search engine will see it!

Obviously this solution is of limited use, you can’t use more than two words, as you can only define a single :before and a single :after on each element, in this case our h1. You also need to specifically set where the second word will appear, as it is inserted after the normal content, which is hidden by the extra padding, so your second word without the positioning styles will also be hidden until you move it into view.

Well that’s it folks, although it is dubious that this will become a mainstream solution it certainly solved my dilemma of useless markup in my headings.

Enjoy!