Writing Good HTML for Multiple Browsers While Waiting for HTML5

The Interwebs have been ablaze over the last few months with articles and commentary regarding HTML5. While this is remarkable in and of itself given that HTML5 will not be officially ready until the year 2022, the fact that browsers are starting to implement some of the features from the current draft of the language has triggered some interesting comments.

One of the questions that people are starting to ask is what Doctype they should be using in anticipation of the upcoming changes to HTML. Is it better to stick with HTML4 or XHTML, or should people starting using HTML5?

However, regardless of which Doctype you pick, there are some important points to remember when designing for the Internet.

Platform Independence

Doctype

In order to ensure that your pages will look the same across all modern browsers (and hopefully even some non-modern browsers), one of the best pieces of advice is to simply include some sort of valid Doctype declaration. Leaving it off or using an old or invalid Doctype will result in your browser entering "Quirks Mode," resulting in unpredictable changes to the rendering engine.

There are several Doctypes at your disposal, listed in this article by standards evangelist Jeffrey Zeldman. You can't go wrong with any of them, but be aware that each one imposes a different set of rules on your markup.

Another option, one which I have been using lately, is to go ahead and start using the HTML5 Doctype: . This will be readily accepted by modern browsers and will still stop older browsers from entering Quirks Mode.

The CSS Reset

A common problem one faces when designing a web page is how to convince each browser to render a page in the same way. While there isn't an easy way to guarantee that every page will look 100% the same in every browser, some very clever tools have been created for getting pretty close.

One of these is the idea of the CSS reset, which erases all of the default values that browsers assign to various HTML tags. Since these values vary between browsers (making cross-browser compatibility a pain in the butt), resetting them and then applying your own values is a good way to overcome this.

A simple solution would be:

* {
    padding: 0;
    margin:  0;
}

This simply gets rid of all of the default padding and margin from every HTML tag. A more complicated (but better) example, taken from Eric Meyer, is:

html, body, div, span, object, iframe, h2, h3, h2, h3, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.6;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

This goes several steps farther in terms of resetting browser defaults and sets some basic typography rules as well.

Semantic Markup

The abstraction between page content and presentational markup is very important to preserve when designing a page. This helps to maximize accessibility, enhances search engine optimization, and makes it easier to alter the presentation of the document when needed. The best way to achieve this is to abstract all page styling into CSS (in its own file rather than inline with the style attribute).

HTML elements should be used properly in accordance with their semantic meaning to the document. For example, the h2 tag should be used for important headings (not simply to achieve a larger font size), and the BLOCKQUOTE tag should be used for quotes (not just to achieve indentation).

It is also important to note that the table tag should not be used to define page layout as long as it can be avoided. The table tag, which was prevalent in the days before CSS, will only harm accessibility, page load times, and SEO. To this end, it should not be used except to display tabular data.

Meaningful CSS class names

Another good guideline is to use meaningful CSS class names when building your markup. There is always the temptation to use class names such as aligned-right for a right-hand navigation or red-border for an image you want to highlight. However, keeping the style totally abstracted would mean using class names like navigation and feature-image respectively.

Validation

It is also important to make sure that your HTML and CSS documents validate against modern validation services such as the W3C validator. This will help ensure cross-platform compatibility. And will minimize load times by saving browsers from attempting to auto-correct the markup.

When in Doubt

And finally, if you ever have a question about the correct way to do something, I highly recommend relying on standards. Adhering to the best practices that have been given to you by the standard community will always help, not hurt.