Skip to main content

Visit Mozilla.org

Using Web Standards in your Web Pages:Making your page using web standards - how to

From MDC


Contents

[edit] 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:

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.

[edit] "Doctype switching"

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":

[edit] 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.

[edit] Where can I validate my webpages? How to validate webpages?

Free online services:

Free offline extension:

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 for correcting validation errors.

[edit] Top 5 most frequently encountered validation errors and how to fix them

Ampersands (&'s) in URLs from WDG
Ampersands, PHP Sessions and Valid HTML from W3C Quality tip for webmaster

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.

[edit] How to upgrade markup code in some frequently encountered cases: <font>, <center>, bgcolor

[edit] I use <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>

... becomes: 

<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

[edit] I use <center> or 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

CSS 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 margin-left and margin-right are 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

[edit] How to replace bgcolor? How to colorize background with CSS?

The 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>

[edit] How to upgrade markup code in specific cases: <embed>, <applet>, <marquee>, <bgsound>

[edit] 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.

[edit] What if I use <applet>?

We recommend these resources:

[edit] What if I use <marquee>?

Marquee can be replaced with content string inside a <div> or <span> rotating over time with Javascript and DOM level 1. It must be said that this sort of effect is discouraged. Studies have shown that constantly moving objects or moving text disturb reading and weakens peripherical vision. DHTML marquee also greatly consumes user system resources (cpu, RAM) on tested browsers and will put modest systems under considerable stress. If after webpage assessment and consideration, you still want to include a marquee effect in your page, then you can use the following recommendable tutorials:
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

[edit] What if I have <bgsound>?

Then use HTML 4.01 OBJECT, e.g.:
<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

[edit] Step 3: Validate your CSS code

[edit] 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/

Retrieved from "http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages:Making_your_page_using_web_standards_-_how_to"