Ed's Software Guide on HTML / CSS

HTML / CSS Tips and Suggestions

Updated: $Date: 2002/12/10 09:34:45 $
Home > HTML / CSS Tips

Welcome to my Guide on HTML / CSS!

Here are my top 7 tips and suggestions for developing high-quality, maintainable web pages:

  1. Use HTML Tidy to validate and cleanup your HTML files
  2. Use style sheets as much as possible to control layout and formatting
  3. Check out Open Source Web Design for pre-made page designs.
  4. Consider design guidelines for creating a usable and clean site
  5. Use online tools to validate your HTML and style sheets
  6. Specify the document type for each page
  7. View your pages with both IE and Netscape / Mozilla to find compatibility issues

Use HTML Tidy

What is HTML Tidy? It is a software tool, originally created by Dave Raggett, that validates HTML code and and fixes errors. It also does neat things like indent the code and provide suggestions for improving it from a technical perspective. I always run Tidy on HTML pages before uploading them to a site.

You can download HTML Tidy from SourceFourge. You can find releases for many different platforms (e.g. Windows, Linux, etc).

Use Style Sheets

Style sheets (also known as CSS, or Cascading Style Sheets) offer an incredibly powerful and maintainable mechanism for controlling the visual representation of your HTML (e.g. formatting, fonts, colors, spacing between elements, etc.). Before style sheets were introduced, HTML authors used attributes with their HTML tags to control representation. While this worked, it resulted in code that was horribly redundant and unmaintainable.

Styles can either be "in-line" in the HTML page or "included" via the LINK tag in the HEAD section of your page. E.g.: 

<link rel="StyleSheet" href="../style/default.css" type="text/css">

One of the easiest ways to quickly ramp up on style sheets is to look at examples, e.g. the style sheet used to format this page.

Here are my suggestions for using style sheets:

  • Try to minimize use of in-line styles; put style declarations in a separate .css document.
  • Use styles instead of tables as much as possible to control formatting.
  • Use styles instead of JavaScript wherever possible. E.g. rollovers can be easily implemented using CSS: 
    a:hover { background: #ffff71; /* yellow highlight */ }
  • View your pages with both IE and Netscape / Mozilla to find style sheet compatibility issues

The W3C site has more information on style sheets.

Check out Open Source Web Design

The Open Source Web Design site provides hundreds of page designs contributed by the design community that you can preview and download. If you visit the site, make sure to sort the designs by "Rating" so you see the best stuff first.

I based the design of this site on Droll and Pretension from OSWD.

Consider Design Guidelines

By following basic guidelines for good site design and avoiding bad site design practices, you can make your site much more usable.

Use Online Tools to Validate Your HTML and Style Sheets

W3C offers 2 great tools:

You'll find that if you're already using HTML Tidy , you won't find any issues with your HTML :)

Specify the Document Type

You have the option of declaring the document type at the beginning of an HTML page. What does the document type do? It tells the browser or client what version of the HTML standard your code adheres to. This is important, as it helps your browser decide how to visually render the page.

You have several options in terms of the type of declaration you can use:

  • The "strict" HTML document type. This is strict from the perspective that NO deprecated tags are supported. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
  • The "loose" HTML document type. This is a very convenient type to use, as it supports deprecated tags. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • The "frameset" HTML document type. This supports deprecated tags and framesets. I highly recommend you DON'T use framesets, as they are butt ugly and tend to confuse the user. 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

There are also documents of type XHTML. An XHTML document can be thought of as an HTML page that is a valid XML document. The primary difference between an HTML page and an XHTML page is that all the tags in the XHTML page are "well-formed" (i.e. they're always closed properly). There are other minor requirements such as quoting the value of attributes and such. What's so great about XHTML? Aside from ensuring documents are well-formed, non-browser clients can parse your XHTML page. Here is a sample XHTML declaration 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

The W3C site has more information on XHTML.

View Your Pages With Both IE and Netscape / Mozilla

Despite standardization around HTML v4.0.1, you'll still notice differences between how browsers render a given page. To make your pages look great and function properly, you should make sure to view your site with major browsers to identify issues and test fixes. Note that Netscape 4.x has poor support for CSS.

Copyright © 2002 Ed B. Park

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Need more help?
Search on Google
Google is the best search engine on the Net.
Browse thru the W3C docs
The W3C is the standards body that defines versions of HTML, such as HTML 4.01.
Post on a message board
There are many HTML groups that are willing to answer questions.
Ask me
E-mail me your question.