Step 1: Choosing a doctype declaration referring to a strict DTD
Here is a list of possible doctype declarations: http://www.w3.org/TR/html4/struct/global.html#version-info
We recommend you use a doctype declaration which indicates a strict Document Type Definition (DTD); we recommend HTML 4.01 strict.
Unless you know you need to serve a document as content-type
application/xhtml+xml, you should use HTML 4.01 strict: there is no known, significant benefit of using an XHTML doctype declaration if your webpage is to be served as content-type
text/html. Explaining in detail this issue goes beyond the scope of this article. The reader is invited to read:
- No to XHTML an excellent article from Spartanicus
- Beware of XHTML by David Hammond
- Sending XHTML as text/html Considered Harmful by Ian Hickson
- XHTML's Dirty Little Secret by Mark Pilgrim
- XHTML Is Dead by Tommy Olsson
- XHTML - What's the Point? by Henri Sivonen
- XHTML is not for Beginners by Lachlan Hunt
In HTML 4.01 strict, elements and attributes which are dedicated to presentation are excluded, deprecated in favor of CSS. In that sense, HTML 4.01 strict helps to achieve a clear separation of structure from presentational aspects. Also because of the deprecation of some elements and attributes, HTML 4.01 strict is a trimmed version of HTML 4.01 and therefore is likely to be better supported by a larger number of user agents and media.
HTML 4.01 strict brings other benefits. Modern browsers can render webpages in 2 different rendering modes: backward-compatible rendering mode (also called "quirks mode") and standards compliant rendering mode (also called "standards mode" and sometimes called "strict mode"). Modern browsers will choose one of these 2 rendering mode based on the doctype declaration in use in a webpage: this feature is referred as the "doctype switching" or "doctype sniffing". When choosing a doctype declaration (like HTML 4.01 strict) which triggers standards compliant rendering mode, modern browsers conform more closely to the specification of web languages (HTML 4 and CSS), in particular in their implementation of what is known as the "CSS 1 box model". So, the webpage code needs less browser forks and less workarounds: this is furthermore true when the most recent browser versions are involved (Opera 9, Safari 2.x, Icab 3, MSIE 7, Firefox 2, Camino 1, Seamonkey 1, Konqueror 3.5+, etc.). Choosing to trigger standards compliant rendering mode is a safe and sound decision as a very wide majority of browsers in use today support the "doctype switching" feature.
More on "doctype switching":
- Mozilla's DOCTYPE sniffing at Mozilla Developer Center
- Activating the Right Layout Mode Using the Doctype Declaration by Henri Sivonen
- Doctype switching and standards compliance: An overview by Matthias Gutfeldt
- Doctype switching rules chart for popular web browsers by David Hammond
Step 2: Validate your HTML 4 code
Next step is to validate your HTML 4 code. Validation is a process by which the web author checks that the syntax, grammar of his webpage conforms to the formal rules of the DTD. Web authors should be particularly attentive to errors reported by HTML validators.
Where can I validate my webpages? How to validate webpages?
Free online services:
- W3C markup validation service from the World Wide Web Consortium
- WDG HTML Validator
- Validome validation services: Validome validator is multi-lingual (English, Français, Русская версия and Deutch) and its report is more complete, more accurate as it is able to report more errors
Free offline extension:
- HTML validator as a Firefox extension working offline (SGML parser): Marc Gueury's Firefox extension (currently at version 0.8.3.9, still in beta) when using the SGML parser will report the same errors as the W3C markup validator.
Shareware offline HTML validator:
- "A real validator" from WDG is an HTML validator for Windows; the registration cost for this shareware is $25. US. It can validate several HTML documents at once and it comes with a complete HTML 4.01 reference. Such reference is quite handy as it provides examples, explanations and useful information.
Top 5 most frequently encountered validation errors and how to fix them
- incorrect nesting of elements
- unescaped ampersands in URLs: ampersands (&'s) in an URL must be escaped, must be replaced with &
- misplaced elements (eg block-level element nested within inline element)
- missing elements (eg missing <title> in <head> section)
- missing alt attribute in <img>
The alt attribute must be a textual replacement, a text rendering equivalent if/when, for some reason (network problem, user agent, user preference setting), the image can not be rendered. When one thinks of the alt attribute of an image, one should think of what he would say of such image if he was to describe it on the telephone. More info on alt attribute:
W3C Quality Assurance Tip for Webmasters: Use the alt attribute to describe the function of each visual
A useful tutorial on correcting the most frequently encountered validation errors is: Liberty! Equality! Validity! from Eric A. Meyer.
How to upgrade markup code in some frequently encountered cases:
<font>. How to define or to replace
<font> with CSS?
The purpose of the deprecated
FONT element is to specify typeface, color and size of the enclosed text. This functionality has been offloaded from HTML to CSS. The FONT element can be directly replaced with a
SPAN element that includes the same style information:
<p><font color="blue" face="Helvetica"> A really <font size="+1">big</font> shoe. </font></p>
<p><span style="color: blue; font-family: Helvetica, sans-serif;"> A really <span style="font-size: larger;">big</span> shoe. </span></p>
... or even more concisely:
<p style="color: blue; font-family: Helvetica, sans-serif;"> A really <span style="font-size: larger;">big</span> shoe.</p>
This is appropriate usage for a local change to the font. However, this is not the best use of styles; the strength of CSS lies in the ability to gather text and other styling into logical groupings that can be applied across a document, without repeating the specific styling on every element that requires it.
More on conversion of <FONT>: W3C Quality Assurance tip for webmaster: Care With Font Size, Forget <font> and use CSS
align="center". How to align with CSS?
The CSS1 text-align property specifies how text or inline elements (like an image) are aligned within an element.
<p style="text-align: center;"><img src="..." width="..." height="..." alt="..."></p> // will center the image inside the <p> element
margin-left: auto; margin-right: auto; properties will center a block-level element within its containing block. Defining margin-left and margin-right is for block-level elements. When both
auto, they are set to equal values, thus centering a block-level element within its parent.
CSS1 horizontal formating
Worth mentioning is the excellent tutorial:
Centring using CSS by David Dorward
Also Interactive demo on CSS horizontal alignment and horizontal formating by Gérard Talbot
How to replace
bgcolor? How to colorize background with CSS?
bgcolor attribute can be replaced with CSS1 background-color property.
If you have
<td bgcolor="green" width="150"> ... content here ... </td>
... can replace it with:
<td style="background-color: green;" width="150"> ... content here ... </td>
How to upgrade markup code in specific cases:
What if I use
<embed> for Flash or for a video?
Explaining in details how to do this would go beyond the scope of this article. Nevertheless, we recommend the following articles so that you can have a Flash movie or a video in your web page and, at the same time, have your page validate.
- Embedding Flash While Supporting Standards by Drew McLellan, November 2002
- Bye Bye Embed: Embedding a video by Elizabeth Castro, July 2006
- Embedding Object with valid code by MediaWiki, March 2007
- Embedding flash without <embed> by Ian "Hixie" Hickson, April 2004
- Flash Embedding Cage Match by Bobby van der Sluis, February 2006
What if I use
We recommend these resources:
- Java applet using <object> tag by Shayne Steele
- HTML 4.01 on Including an applet
- HTML 4.01 on Including an object
Worth mentioning here: Java Upgrade Guide: Migrating From the Microsoft VM for Java to the Sun JRE http://java.sun.com/j2se/1.4.2/docs/guide/deployment/deployment-guide/upgrade-guide/index.html "after December, 2007, Microsoft will no longer support or provide a Java implementation with any of its products. (...) Those running applets in the Internet Explorer web browser will need to download and install an alternate VM."
What if I use
Marquee can be replaced with content string inside a
Cross-browser and web standard compliant Stock Ticker example by D. Rosenberg
Comprehensive web standard compliant alternative to <marquee> by D. Rosenberg
Mozilla 1.4+, NS 7.2 and Firefox 1.x support the non-standard
<marquee> element. On the other hand, users can disable such support using this tip
What if I have
Then use HTML 4.01
<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
See this DevEdge article for information on rendering a sound OBJECT invisible within the page.
Web page background sound often slows down considerably web page loading; like the text effects above, music or sound accompanying a page is seldom appreciated. According to the survey page What we really hate on the web, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.
Why Playing Music on your Web Site is a Bad Idea by A. Gulez
Step 3: Validate your CSS code
Where can I validate my CSS code?
Free Online CSS validation services:
Built-in report of CSS parsing errors in modern browsers:
- Error console in Firefox 2. From the menu, Tools/Error console; the error console reports CSS parsing errors.
- Error console in Opera 9. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.
- Error console in Icab 3. From the menu, Preferences/Show All/Other/Error report: the error console reports CSS parsing errors.
There are also other possible and excellent debugging CSS and DHTML tools, useful tools (Addons, Toolbars, Extensions) for developers. Here is a list of recommendable and free debugging tools from http://css.tests.free.fr/