Placing styled content in <H1> tags

HTML & CSS
1

Hi,

My page heading needs to contain styled content, eg. some bold, some coloured, line breaks, and so on.

What is the most sematically correct way to do this? Would something such as:


<h1>
<span class="first-word">WELCOME TO</span>
<span class="second-word">THIS</span>
<span class="third-word">PAGE</span>
</h1>

be semantically correct, and not overload the idea of what a H1 is for?

Many thanks.

2

That is perfectly legitimate, although one of the <span>s is redundant - just style the basic h1 to be like the first word! But with that kind of mish-mash of styles, you’re in danger of making something that looks disjointed, uncoordinated and a mess, if you’re not very careful about it…

3

SPAN is the best choice because it applies no extra meaning to the content – You have to ask “why am I making this a different color?” – if you cannot come up with an answer that matches an existing tag, that’s what SPAN and DIV are for. You’ve already got a semantic meaning – heading, don’t try to apply more. SPAN and DIV are semantically neutral, they apply NO extra meaning to the content inside them.

Stevie is correct in that you don’t need one of those span since you could just use the h1’s default – I’d point out you don’t need the classes either since you could nest them.


<h1>
	WELCOME TO <span>THIS <span>PAGE</span></span>
</h1>

In the CSS hit “h1” for the “welcome to” text, “h1 span” for the “this” and “h1 span span” for “page”. Avoid adding classes you don’t need… remember, as George Carlin said, “not every ejaculation deserves a name” – or in this case not every element needs a class or ID on it.

4

Thanks guys,

All good advice.

Chris.