Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
usable web page tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


usability testing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

CSS Tip:
Create Custom Headers With CSS

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
July 2002 (Part 2)
Vol. 5, No. 14
 • CSS Tip
 • Usability Tip
 • Design Tip
  

Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout. When designers ignore header tags, they can't take advantage of the structure that header tags give the document. They also lose the boost to search engine promotion that header tags provide.

If design issues cause you to shun header tags, read on. We'll show you how to quickly customize those headers using cascading style sheets.

Structure And Promotion

One of the great things about header tags is that they have multiple uses.

Their primary purpose is to define a document's structure. Remember that HTML is a structural language. You use it to describe the document's content, not the content's style.

Think of a house under construction. There's always a wood or metal frame that goes up first. You can't tell much about the finished structure just by looking at the frame - you have to wait until the granite countertops, the carpet, and the wallpaper is installed. Well, on a Web page, the HTML code is the house's frame and the style sheet is the decorative part of the house.

Header tags define what information is the most important or most deserving of attention. H1 tags are more important than H2 tags. H3 tags are subsections of H2 tags, and so on.

They're important to search engine algorithms too. Ranking formulas often give more weight to keywords that you include in header text. Search engines assume that if header tags contain important information, the keywords inside header tags must be equally important.

Standard Headers Take Up Space

Why aren't such handy and versatile little tags used all over the Web? It's because standard header tags take up room on the page - sometimes a lot of room.

Here's an example. We used a graphic image to make sure that everyone will see the same example. This is an H1 tag with some text under it.

Example of a normal H1 tag.

Notice the amount of space between the H1 element and the text? You can't change that in standard HTML and it drives designers crazy.

So they spurn header tags and instead use font attributes and bold tags to mimic headers. While they gain more layout control, they lose the benefits of the header tags.

Customize With CSS

You can use CSS to get the best of both worlds: layout control with structural and promotion benefits! All you have to do is adjust the header tag's margin and padding values.

Remember that a header tag is a block-level element. Other block-level elements include images, paragraphs, and lists.

You can adjust the space around any block-level element by changing the properties that control spacing:

  • Padding: the area between text and the border.
  • Border: the area between the padding and the margin.
  • Margin: the area outside the border that separates one element from another element.

To change the amount of space around the header tag, you need to adjust the margin-top and margin-bottom properties. The tricky part is that 0 is the default value (the one that causes all the space!). So when you look at a regular header tag, the value of the margin is 0 - even though there's a lot of space around it.

To decrease the size of an element's margin, you have to use a negative value like this:

<style>
H1 {
font-size:24px;
           color:blue;
           margin-top:-10px;
           margin-bottom:-15px;
      }
</style>

This header will display in blue, 24-pixel type and be nestled snugly between the other page elements.

Here's part of the screen shot of a Web page. One H1 tag has no styles applied. Contrast the basic tag to the one below that has negative margins. Example of a H1 tag with custom style.

Browsers Like It!

Unlike many style sheet techniques, this renders fine in all recent browsers: Opera, Netscape 6.x, and Explorer. It doesn't work for Netscape 4.x browsers, but those versions have very poor CSS support and you have to deal with a lot of other Netscape CSS bugs too. Still, you don't get a broken page in Netscape 4.7, just the standard header with all that space around it.

Refer to our May 2001 newsletter story, Structure Documents With Header Tags for even more information about document structure and layout.

Looking for other tips to improve your page and promote your Web site? Search Engine Power Pack contains the valuable Page Primer tool. It analyzes your page, alert you to problems, and even give you browser-specific tips on how to make your page more search engine friendly.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.