Header Tags

Manipulating header tags

[woldie]

Hi all,

I've got this dilema, surrounding header tags. I have a client of mine who wants to change the layout of this text but its in a <h1> tag. However he's being very picky and he wants the 1st letter to be 22px and then the rest 18px and the same goes for the next word. What a pain!

My question is this can I do this within a <h1> tag? Secondly will this affect the optimisation?

e.g. <h1><span class="bigtext">W</span><span class="smalltext">idget</span></h1>

Widget being the keyword.

Thanks

Woldie

[meta_PI]

This will have an impact on optimization if this word is a keyword you're trying to target. You will essentially be taking a perfectly good keyword and splitting it up into nonsense.

Incidentally, it also sounds like a bad design decision...

[rainborick]

meta_PI's got it right and I know because I realized recently that I had done the same thing on some pages I'd designed about a year ago. The solution I use is to use CSS styling on the enclosing tag (in my case, it was simply a <p>), as in:

<h1 class="myclass">Widget</h1>

and then style it:

.myclass { font-size: smalltextsize; }
.myclass:first-letter { font-size:bigtextsize; }

The first-letter pseudo-class is widely supported by nearly everything post version 4.x's. Good luck!

[woldie]

Thanks rainborick,

That works well indeed.

Nice....

Woldie.

[Nick_W]

rainborick has the right of it.

You can also do it without the class like this:

h1 { font-size: 18px; }
h1:first-letter { font-size: 22px; }

Nick

[woldie]

Actually,

Theres one more thing, this does work however what happens you have more then one word.

i.e. Widgets Are Cool

Can this be done? This works for the word Widgets but for the remainder it doesn't.

Is this worth all the effort? :-(

Thanks

W.

[Nick_W]

>>Is this worth all the effort?

No.

AFAIK that can't be done without spanning each letter. You can easily capitalize an <h1> but make the first letter of each word bigger? - I can't think of an easy way off-hand..

Nick

[woldie]

Cheers Nick_W,

I thought so, its only one keyword which is important but the client wants this style across this header.

I will get in touch with them and decide against it.

Thanks all

W.

[DrDoc]

There's always the font-variant: small-caps; solution

[killroy]

well at least you could span each word without breakign up keywords like this:

.funkystyle span{font-size:18px}
.funkystyle span.first-letter{font-size:24px}

<h1 class="funkystyle"><span>Welcome</span> <span>to</span> <span>keyword</span></h1>

SN

[woldie]

Thanks

But that doesn't work, I've tried placing funkystyle in each of the spans but no joy.

W.

[DrDoc]

span.first-letter doesn't work since it refers to a class...
The correct syntax would be span:first-letter..

However, that still wouldn't work since first-letter only works on block level elements

[Nick_W]

How about making it block level?

Nick

[DrDoc]

Well, then why not just wrap the span around the first letter, and skip the :first-letter pseudo?

[pageoneresults]

Is this worth all the effort?

I'll mirror what Nick_W said above, it is not worth the effort or the loss of keeping a primary word whole. Send the boss over here and we'll take care of em'. ;)

P.S. Make sure you reread your replies and there is nothing there to get you in trouble before sending the boss over.

[killroy]

You could block level them and flaot them.

The point of enclosing thewords instead of the first letter only were to keep th keywords intact.

SN