Is Using CSS to Style H1 Font Size a Best Practice?

[shilly]

I found a site using css to manipulate the size of their H1 tag. I would assume google would look at this and dismiss any extra optimization a H1 tag would give. In a way, they are trying to trick the engines. If you weren’t, then why not simply bold it and make it he size you really want.

I found posts on other sites also stating they do this and it is perfectly fine?

I think Google would ding a site for this. What would prevent someone from changing the size to zero and still get the benefit of the H1 tag? I would think ANY manipulation of that tag would discredit it as an H1.

Anyone have any input or completed any testing using it as an H1 then maybe adding it to CSS with a different font size for note any position changes?

[cryptblade]

There are a lot of reasons for changing the H1 tag sizes for design purposes. Why do you think this is wrong? Also, if anyone tries to game the engines by making H1 nearly invisible, chances are, they are doing other things that are wrong too - so they'll still be caught.

The rules go, that only 1 H1 tag should be used per page. H2 and H3 used multiple times are fine. But there's a limit there too. Sometimes for design purposes, the H1 tag needs to look the same, or smaller, than the H2 tag. That's all by the whim of the designer - and the client.

...they would be trying to trick/spam the engines if there are more than 1 H1 tags - for sure.

[shilly]

Originally Posted by cryptblade

There are a lot of reasons for changing the H1 tag sizes for design purposes. Why do you think this is wrong? Also, if anyone tries to game the engines by making H1 nearly invisible, chances are, they are doing other things that are wrong too - so they'll still be caught.

The rules go, that only 1 H1 tag should be used per page. H2 and H3 used multiple times are fine. But there's a limit there too. Sometimes for design purposes, the H1 tag needs to look the same, or smaller, than the H2 tag. That's all by the whim of the designer - and the client.

...they would be trying to trick/spam the engines if there are more than 1 H1 tags - for sure.

"Sometimes for design purposes, the H1 tag needs to look the same, or smaller, than the H2 tag. That's all by the whim of the designer - and the client."

Then why not just make it bold and change the font size to what you want, why put it in an H1 and manipulate tag?
This is why I would think google would think something is not right about this and dismiss the weight the H1 tag has in optimisation of a site if the size of the tag is changed in any way.

[cryptblade]

Originally Posted by shilly

This is why I would think google would think something is not right about this and dismiss the weight the H1 tag has in optimisation of a site if the size of the tag is changed in any way.

What exactly is your problem with this? Is this other site ranking higher than yours or your clients? Thereby making you jealous?

There are MUCH more factors for ranking other than the CSS that is used. Linking for one. Site age. Authority. Compliance. Etc.

There are design reasons for using CSS to make some H1 tags smaller than H2 tags. Maybe to fit H1 tags into the top header of the site and use H2 for more stylized purposes within the content body.

An H1 tag does not make or break a site and search engines aren't going to drop or punish you because your H1 tags are stylized to be smaller than your H2 tags.

I've already stated the fundamentals before. If this site you're jealous of is breaking it by having more than 1 H1 tag, then they are wrong. If not, then they aren't doing anything wrong.

[shilly]

Anyone else have any input or completed any testing using it as an H1 then maybe adding it to CSS with a different font size for note any position changes?

[Marcia]

Can that be best practice?
Yes, it can be and it is best practice.

Originally Posted by shilly

"Sometimes for design purposes, the H1 tag needs to look the same, or smaller, than the H2 tag. That's all by the whim of the designer - and the client."

Then why not just make it bold and change the font size to what you want, why put it in an H1 and manipulate tag?
This is why I would think google would think something is not right about this and dismiss the weight the H1 tag has in optimisation of a site if the size of the tag is changed in any way.

If that's what you think, then you're wrong.

Why not just use bold?
Because that is not correct; and it isn't what the HTML/CSS specifications say to do for page structure and markup. There's nothing wrong with what you suggest, except that it doesn't really comply with page structure and markup recommendations according to standards.

Why use H1 and use formatting?
Because that is correct, and is is what the proper HTML and CSS page structure, markup and specifications are for HTML and CSS.

To see what is correct and what the standards recommend, you should read for yourself and study what the official organization that sets the standards has to say, and then adjust your sites if necessary.

The official source for standards:

Worldwide Web Consortium

http://www.w3.org/

I hope that helps to settle your discomfort and chagrin with what other sites are doing, and helps you with your own sites. Pull up a chair, start reading and enjoy!

[Dann404]

Just a short explanation of why I do this.
Okay, I coded my css over two years ago on a particular site, on my home page it looked great. My site grew and got huge. So now I want to put an <h> tag on some text, as much as I try <h1> wraps, <h2> look too small and stupid so I modify <h1> to be pleasing to the eye.
So you say why not use <span style="font-family:Abadi MT Condensed; vertical-align:top; text-align:center; text-indent:20px; letter-spacing:50pt; line-height:120pt; background-color:#8000ff;"> or some other kind of odd coding. I want small 10kb pages that load fast.
Here's the answer, I only want my style sheet to load once, I do not want to make a special style sheet for one page, and I do not want to redo my entire site so I can get the font text, color and size to work with all of my pages. I hope that makes sense

[beu]

Originally Posted by shilly

"Sometimes for design purposes, the H1 tag needs to look the same, or smaller, than the H2 tag. That's all by the whim of the designer - and the client."

Then why not just make it bold and change the font size to what you want, why put it in an H1 and manipulate tag?
This is why I would think google would think something is not right about this and dismiss the weight the H1 tag has in optimisation of a site if the size of the tag is changed in any way.

I believe the correct way of doing this is to use an image of your desired text with ALT tag in your H1. That way you control the "font" size seen by users and search engines see the image's alt tag as the text in the H1.

To see this technique in action check out: "/Icons/w3c_main" at http://www.w3.org/

[Dann404]

beu, I would never, ever disagree with WC3 standards, but in this case I would have to say this is wrong from a "web masters" point of view.
The <h>, <i>, <b> tags are not only used for display purposes, they also assist the SE spiders as to what your pages are all about. Spiders do not read graphics, and as far as the alt attribute, it means little to the SEs due to severe abuse in the past. As of today the spiders rely on surrounding text and filename to categorize a graphic image. They cannot read .jpeg, .png, .pix or any of the like.
So I would have to say DO NOT put your headlines into an image and rely on alt attribute to have an effect on how your website found via organic search results. Won't happen.
Oh, and as far as W3C standards, how many of the SE's pages validate?
Answer: none! So much for standards.
Dan

Oh, I checked out your url's alt attribute, this is what I got: The image http://www.w3.org/Icons/w3c_main cannot be displayed, because it contains errors.

[beu]

Originally Posted by Dann404

beu, I would never, ever disagree with WC3 standards, but in this case I would have to say this is wrong from a "web masters" point of view.
The <h>, <i>, <b> tags are not only used for display purposes, they also assist the SE spiders as to what your pages are all about. Spiders do not read graphics, and as far as the alt attribute, it means little to the SEs due to severe abuse in the past. As of today the spiders rely on surrounding text and filename to categorize a graphic image. They cannot read .jpeg, .png, .pix or any of the like.
So I would have to say DO NOT put your headlines into an image and rely on alt attribute to have an effect on how your website found via organic search results. Won't happen.
Oh, and as far as W3C standards, how many of the SE's pages validate?
Answer: none! So much for standards.
Dan

Right on, that's the only "correct" (W3C) way I know of to alter the size of text in H1s! Few folks seem to be aware of the method so, I just wanted to offer it up as "one option". That said, alt tags may be a little more important to seach engines than you think.

Also most search engines don't validate because, to them speed is more important.

[cryptblade]

There are so many scenarios why someone would do this. But think about it this way. There can be only 1 H1 tag per page. But maybe styling purposes require you to use header tags. So the only one you can use multiple times are H2 and H3. So you style H1 to be smaller and out of the way, and focus on the H2 and H3. Styling purposes.

...where the designers to chime in???

[beu]

Originally Posted by cryptblade

There are so many scenarios why someone would do this. But think about it this way. There can be only 1 H1 tag per page.

You can use more than one H1, it's the TITLE that you can only use one time per page.
http://www.w3.org/MarkUp/html-spec/h..._5.html#SEC5.4

[Marcia]

I believe the correct way of doing this is to use an image of your desired text with ALT tag in your H1

No, I don't know where you got that from, but it is not the correct way to do it, to substitute an image for adjusting displaying fonts in HTML markup elements; that is the incorrect way. And it certainly isn't 100%usability compliant. You'll have to document your assertion with the specification from the W3C site.

Using CSS is the right way, just as it's stated in the standards documentation.

[beu]

Originally Posted by Marcia

No, I don't know where you got that from, but it is not the correct way to do it, to substitute an image for adjusting displaying fonts in HTML markup elements; that is the incorrect way. And it certainly isn't 100%usability compliant. You'll have to document your assertion with the specification from the W3C site.

Using CSS is the right way, just as it's stated in the standards documentation.

It's being used on W3C's homepage. It's an "H1 id". As far a usability, the text in the image displays because it's also in the ALT. I'm not saying it's the best way but rather an option that is perhaps worth considering.

[Dann404]

Okay, I'll try again. If you are to amend 1 <h1> tag for one page it would look like this.
In the <head> of the page:
h1.c4 {text-align: center}
span class="c3" {secret}
</head>
<h1 class="c4"><span class="c3">My headline</span</h1>
See how much less code that is compared to anything else. All of my pages validate, rank highly on Google and the other two, and I can reuse this at my will on new pages. Why would I create an image file make another packet request, access my images and slow down page loading time if I can do something as simple as this. If your visitors are patient and you don't care about bandwidth by all means use images. There are better ways though.
Dan

[Marcia]

Originally Posted by beu

It's being used on W3C's homepage. It's an "H1 id". As far a usability, the text in the image displays because it's also in the ALT. I'm not saying it's the best way but rather an option that is perhaps worth considering.

You most certainly did say that it's the correct way, beu.

I believe the correct way of doing this is to use an image of your desired text with ALT tag in your H1. That way you control the "font" size seen by users and search engines see the image's alt tag as the text in the H1.

And then, this:

that's the only "correct" (W3C) way I know of to alter the size of text in H1s!

It may be "a" way for design purposes, but it's a substitution, not the "correct" way.

They're doing that because they're using their logo in lieu of HTML markup for the header of the page.
<h1 id="logo"><img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" /></h1>

If you go back and read the first post you'll see that this discussion is about using CSS to style text in an <H1> element. The proper way to style text in HTML markup is by using CSS - not a hack or a kludge using an image. An image is for design, not for formatting of HTML presentation.

[cryptblade]

Originally Posted by beu

You can use more than one H1, it's the TITLE that you can only use one time per page.
http://www.w3.org/MarkUp/html-spec/h..._5.html#SEC5.4

There's also information architecture in this. Like this:

H1

blah blah blah

H2

blah blah blah

H2

blah blah blah:
H3
blah blah blah blah blah

...I seem to recall this kind of stuff have been covered in years past???

[Dann404]

Originally Posted by cryptblade

There's also information architecture in this. Like this:

H1

blah blah blah

H2

blah blah blah

H2

blah blah blah:
H3
blah blah blah blah blah

...I seem to recall this kind of stuff have been covered in years past???

Yes, I believe the topic was if it was ethical altering your <h1> in cascading style sheets. Me being 100% white hat I would have to say YES! There is nothing wrong with it and SEs tend to have very little tolerance to keyword stuffed or excessively long <h> tags. So no worries they may be cheating?? Who knows, who cares, concentrate on making the best website ever and you have nothing to worry about.
CHEATERS the ones coming to the forums "Google banned me" WAAAAA!

[Marcia]

Yes, I believe the topic was if it was ethical altering your <h1> in cascading style sheets. Me being 100% white hat I would have to say YES!

Yes, that's EXACTLY what the topic of this thread is, and I agree 100% that it's 100% white hat.

H1 is the MAIN topic of the page and is used once.
H2-H6 are subheadings, and are used hierarchically to structure the page, one main heading and sub-headings in descending order. And styling them with CSS is perfectly legitimate to adjust the font size.

<BODY>
<H1>One main topic</H1>
<H2>Subtopic 1</H2>
<P>Text goes here</P
<H2>Subtopic 2</H2>
<P>Text goes here</P>
<H2>Subtopic 2</H2>
<P>Text goes here</P>
</BODY>

And so on. Standard practice.

[beu]

Sorry, but I disagree. (Hope that is allowed )

Some browsers scale text dramatically unless you use %. That can be a problem if you want an H1 to be smaller than an H2 as was previously suggested by someone else.

Given:
The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines the smallest header. The six heading elements, H1 through H6, denote section headings.

Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.

Search engines assume the H1 is the largest h on the page and place value on them for that reason. By using an external style sheet search engines don't know your h2 renders larger than h1.

Do search engines often crawl and consider external CSS? I don't think they do! For that reason, I consider the manipulation of an H1 in a way not intended or seen by the user as less white hat than the method I suggested. I would not use CSS to manipulate an H1 so, I'm not sure such CSS is valid.

Either way, you can chek it here:
http://jigsaw.w3.org/css-validator/

The method I suggested uses CSS to scale text as perceived by the user in H1s on browsers that support images. That said the text is in the ALT. Check out #logo in the CSS. If it's good enough for the W3C to use it on their own homepage, it's good enough for me.

The proper way to style text in HTML markup is by using CSS - not a hack or a kludge using an image. An image is for design, not for formatting of HTML presentation.

W3C determines what is proper and we are talking about their homepage which uses CSS. For that reason I'm surprised by your statement.