Forum Moderators: open

Message Too Old, No Replies

Heading tags are too big.

Trying to avoid CSS.

         

Tonearm

4:53 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm trying not to use any CSS in my new site design so I can be sure the site looks pretty much the same across browsers. I also don't like the way text appears first on CSS sites and then the design kind of pops in around it.

I'd like to take advantage of the SEO benefits of heading tags but they make the text bigger than I want it. Spiders only weigh h1-h3 right? Is there anything I can do without resorting to CSS to specify text as a heading for SEO while keeping the text's size under control?

Nick_W

4:55 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ROTFLMAO! ;)

Can't be done nicely. CSS is your friend, text formatting is supported by pretty much everything....

Nick

webwoman

5:03 pm on Sep 6, 2003 (gmt 0)

10+ Year Member



Yes, Nick is 100% right (as usual). But if you want a funky solution, try this:

<P><H1><SPAN STYLE="Font-Size : 10pt"><FONT COLOR="#999999" FACE="Verdana">CSS is your friend</H1></FONT></SPAN></P>

Tonearm

5:23 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



webwoman- How's the browser support for that?

webwoman

5:30 pm on Sep 6, 2003 (gmt 0)

10+ Year Member



You should test in on the ones you care about. It works on the ones I care about. But CSS is far better and isn't as unfriendly as you may think when it comes to text.

Nick_W

5:32 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Absolutely!

Wherever you got the impression of CSS for text formatting being problematical, it wasn't from testing was it? Try it...

Nick

lorax

5:42 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



CSS control of text is nearly perfect - at least as much as using <H>. Take a look at how IE displays <H1> and then look at Opera or NN or Moz. You'll see a difference. You'll get more control over your text with CSS with as much or less differences.

Tonearm

5:51 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I can't believe I didn't try it before I posted this thread but <h1><font size="2">Hello</font></h1> works in IE 6 to control the heading's size. Does anyone know if that works across browsers?

I fully agree that CSS is superior to standard HTML in every way for the CODER. But it seems like between a site written in HTML and a site written in CSS, the HTML site is going to give the USER a better experience overall.

Nick_W

5:56 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>>standard HTML

Are you talking about the standards from back in 1995?

HTML and CSS are partners, not alternatives to each other. HTML is a markup language not a style format. The font tag has been deprecated for years and excluded fully for the last 2-3yrs.

You might want to do some reading at the w3c, seems your concept of site building is slightly antiquated?

Nick

SuzyUK

6:30 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Tonearm..

try this
<h1>Hello</h1>
<h1 style="font-size: 14px;">Hello</h1>

it's less code than what you came up with.. and if you test it, it will work! I promise..

Suzy

PS: I was doing this many years ago, before I even realised what it was ;)

TheDoctor

7:10 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



so I can be sure the site looks pretty much the same across browsers

And in any case, HTML is not rendered the same in all browsers. Even if you don't use CSS, the site will look and feel different depending on which browser is being used.

So why put yourself to trouble for an impossible goal?

g1smd

10:31 pm on Sep 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Inline CSS (attached to individual HTML tags) is just as much code bloat as the deprecated HTML tags that it supposedly replaces.

Moving the CSS to a style block in the <head> is an improvement, but the real gain comes in moving it to an external stylesheet file.

You then get to share the same stylesheet with every page of the site (easy updates), save bandwidth (serve CSS once per visitor not once per page view), etc.

Farix

1:27 am on Sep 7, 2003 (gmt 0)

10+ Year Member



Tonearm, what browsers do you wish to target? It's impossible to target all of them with a pixel perfect design as each has slight variances in how they render HTML. It is generally recommended to design a webpage for the modern browsers (Mozilla/Netscape 7, IE 5 and 6, Safari, Opera, . . .) using CSS and degrade for older browsers such as Navigator 4.x and IE 4 by not giving these browsers the CSS.

Tring to create a webpage design while avoiding CSS is like tring to build a house while avoiding using a ruler.

Tonearm

10:30 pm on Sep 10, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How is the degrading accomplished when a browser doesn't do well with CSS?

TGecho

11:07 pm on Sep 10, 2003 (gmt 0)

10+ Year Member



With font stylings, the worse that can happen AFAIK is the rule you set won't be applied. In other words maybe the font won't carry through, or the size won't be exactly what you want. Nothing really bad, just slightly annoying at worst.

keyplyr

6:03 am on Sep 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I can't believe I didn't try it before I posted this thread but <h1><font size="2">Hello</font></h1> works in IE 6 to control the heading's size. Does anyone know if that works across browsers?

Yes it should "work" across browsers, but you still may be surprised at what users will actually see. This will depend on what default font they have set, and of course what fonts are available in their OS.

Also, you are sitting on the spam fence and better hope that a human never checks out your code and reports you to Google for spam techniques.

I will also invite you to use CSS for text formatting where font family, size, margin, all can be controlled. This will give you a heading a bit smaller. Adjust the number '22' to taste:

h1 {
background:transparent;
font:bold 22px times new roman,times roman,serif;
text-align:center;
margin:0;
}

Tonearm

4:00 pm on Sep 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



keyplyr - You've got to be kidding me. You mean font tags inside h tags to control the outputted text's size is considered spam, but using CSS to accomplish the exact same thing isn't?

ronin

6:21 pm on Sep 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Using CSS to style <hx> tags is fine. It's not spam.
I would go with SuzyUK's suggestion.

Why on earth would you want to use <font>?
Is it because you're writing for NS 4.x as well?
Even if that's the case, I'm pretty sure SuzyUK's solution is fine.

Tonearm

6:39 pm on Sep 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ronin - But what about using font tags to "style" h1 tags? That's not spam is it?

korkus2000

6:46 pm on Sep 11, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Why style the H1 tags with font tags? I would use css to style the H1 and if browsers don't recognize it you will have larger text. I understand your concern about CSS, but I think using CSS in this instance will be better.

keyplyr

12:49 am on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



keyplyr - You've got to be kidding me. You mean font tags inside h tags to control the outputted text's size is considered spam, but using CSS to accomplish the exact same thing isn't?

It's more a matter of how blatant you are about doing so.

<h1><font size="2">Hello</font></h1>

This is a manipulation of the H1 tag. It's done all the time, but usually not so tiny a text size as "2". This 'could' be construed as spam, especially if a competitor files a spam report and a Google editor takes a look at it in your mark-up. Hiding this manipulation in an external stylesheet, is far less conspiclative, although I would advise keeping the size relative to the standard.

Tonearm

1:08 am on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



keyplyr - Ok, that makes sense. Contextually, the contents of my header tags will be acting as headers. I'm just trying to keep their size in the same realm as the rest of the text on the page.

Go60Guy

2:52 am on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm just gonna say this flat out. There isn't a soul here at WebmasterWorld or elsewhere who can state that their site has been penalized as spam for applying style by any means to <hx> tags. It has never happened, and there's an extremely high probability that it never will happen.

The sky is not falling because of this technique. Go ahead and use CSS with impunity for this purpose.

keyplyr

3:08 am on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm just gonna say this flat out. This has been discussed many times, with many opinions. Try the site search.

Go60Guy

4:53 am on Sep 12, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes. And you'll see that I've been an active participant in many of those discussions.

BergtheRed

4:55 am on Sep 12, 2003 (gmt 0)

10+ Year Member



there's nothing wrong with using an inline style on a tag such as:

<h1 style="font-weight: 500; font-size: 14pt; line-height: 120%; margin: 0,0,0,0">Hello</h1>

granted it may "bloat the code", but it pretty much works across the board in IE, Mozilla and Opera and it will actually render the page the way you really wanted it to look. just DON'T use the touted style="font: 500 14pt/100%" shorthand --spell everything out. it'll work in IE, but it breaks in Opera and Mozilla most of the time.