mozilla

Revision 36702 of Making your page using web standards - how to

  • Revision slug: Using_Web_Standards_in_your_Web_Pages/Making_your_page_using_web_standards_-_how_to
  • Revision title: Making your page using web standards - how to
  • Revision id: 36702
  • Created:
  • Creator: Dikrib
  • Is current revision? No
  • Comment 32 words added

Revision Content

{{ outdated("Some of the recommendations in this page are outdated by HTML5. You may want to look at our quirks mode article or our web devekoper FAQ instead.") }}


<- Previous section: Benefits of web standards

Next section: Using the W3C DOM ->

 

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/gl...l#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.

"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 (MSIE 8, Firefox 3, Opera 9.5, Safari 3.1, Konqueror 4, Icab 4, Camino 1.6, Seamonkey 2, 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":

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:

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.

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.

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

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

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

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>

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

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.

What if I use <applet>?

We recommend these resources:

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/...ide/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>?

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
Firefox 2 and Firefox 3 support the non-standard <marquee> element. On the other hand, Firefox users can disable such support by customizing an userContent.css

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

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 3. From the menu, Tools/Error console; the error console reports CSS parsing errors.
  • Error console in Opera 9.5. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.
  • Error console in Safari 3. From the menu, Develop/Show Error console: the error console reports CSS parsing errors.
  • Error console in Icab 4. 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/

<- Previous section: Benefits of web standards

Next section: Using the W3C DOM ->

Revision Source

<p>{{ outdated("Some of the recommendations in this page are outdated by HTML5. You may want to look at our <a href="/en/Quirks_Mode_and_Standards_Mode" title="en/Quirks_Mode_and_Standards_Mode">quirks mode</a> article or our <a href="/en/Mozilla_Web_Developer_FAQ" title="en/Mozilla_Web_Developer_FAQ">web devekoper FAQ</a> instead.") }}</p>
<p><br> <a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards">&lt;- Previous section: Benefits of web standards</a></p>
<p style="text-align: right;"><a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM">Next section: Using the W3C DOM -&gt;</a></p>
<p> </p>
<h3 name="Step_1:_Choosing_a_doctype_declaration_referring_to_a_strict_DTD">Step 1: Choosing a doctype declaration referring to a strict <abbr title="Document Type Definition">DTD</abbr></h3>
<p>Here is a list of possible doctype declarations: <a class=" external" href="http://www.w3.org/TR/html4/struct/global.html#version-info" rel="freelink">http://www.w3.org/TR/html4/struct/gl...l#version-info</a></p>
<p>We recommend you use a doctype declaration which indicates a strict Document Type Definition (DTD); <strong>we recommend HTML 4.01 strict</strong>.</p>
<p>Unless <strong>you know you need</strong> to serve a document as content-type <code>application/xhtml+xml</code>, 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 <code>text/html</code>. Explaining in detail this issue goes beyond the scope of this article. The reader is invited to read:</p>
<ul> <li><a class="external" href="http://www.spartanicus.utvinternet.ie/no-xhtml.htm">No to XHTML</a> an excellent article from Spartanicus</li> <li><a class="external" href="http://www.webdevout.net/articles/beware-of-xhtml">Beware of XHTML</a> by David Hammond</li> <li><a class="external" href="http://www.hixie.ch/advocacy/xhtml">Sending XHTML as text/html Considered Harmful</a> by Ian Hickson</li> <li><a class="external" href="http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html">XHTML's Dirty Little Secret</a> by Mark Pilgrim</li> <li><a class="external" href="http://www.autisticcuckoo.net/archive.php?id=2005/03/14/xhtml-is-dead">XHTML Is Dead</a> by Tommy Olsson</li> <li><a class="external" href="http://hsivonen.iki.fi/xhtml-the-point/">XHTML - What's the Point?</a> by Henri Sivonen</li> <li><a class="external" href="http://lachy.id.au/log/2005/12/xhtml-beginners">XHTML is not for Beginners</a> by Lachlan Hunt</li>
</ul>
<p>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.</p>
<h4 name=".22Doctype_switching.22">"Doctype switching"</h4>
<p>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". <strong>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"</strong>. So, the webpage code needs less browser forks and less workarounds: this is furthermore true when the <strong>most recent browser versions</strong> are involved (MSIE 8, Firefox 3, Opera 9.5, Safari 3.1, Konqueror 4, Icab 4, Camino 1.6, Seamonkey 2, etc.). <strong>Choosing to trigger standards compliant rendering mode is a safe and sound decision</strong> as a very wide majority of browsers in use today support the "doctype switching" feature.</p>
<p>More on "doctype switching":</p>
<ul> <li><a class="external" href="/en/docs/Mozilla's_DOCTYPE_sniffing" title="en/docs/Mozilla's_DOCTYPE_sniffing">Mozilla's DOCTYPE sniffing</a> at Mozilla Developer Center</li> <li><a class="external" href="http://hsivonen.iki.fi/doctype/">Activating the Right Layout Mode Using the Doctype Declaration</a> by Henri Sivonen</li> <li><a class="external" href="http://gutfeldt.ch/matthias/articles/doctypeswitch.html">Doctype switching and standards compliance: An overview</a> by Matthias Gutfeldt</li> <li><a class="external" href="http://www.webdevout.net/doctype-switching#rules">Doctype switching rules chart for popular web browsers</a> by David Hammond</li>
</ul>
<h3 name="Step_2:_Validate_your_HTML_4_code">Step 2: Validate your HTML 4 code</h3>
<p>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 <abbr title="Document Type Definition">DTD</abbr>. Web authors should be particularly attentive to errors reported by HTML validators.</p>
<h4 name="Where_can_I_validate_my_webpages.3F_How_to_validate_webpages.3F">Where can I validate my webpages? How to validate webpages?</h4>
<p>Free online services:</p>
<ul> <li><a class="external" href="http://validator.w3.org/">W3C markup validation service</a> from the World Wide Web Consortium</li> <li><a class="external" href="http://www.htmlhelp.com/tools/validator/"><abbr title="Web Design Group">WDG</abbr> HTML Validator</a></li> <li><a class="external" href="http://www.validome.org/">Validome validation services</a>: Validome validator is multi-lingual (English, Français, Русская версия and Deutch) and its report is <a class="external" href="http://www.validome.org/lang/en/errors/ALL">more complete, more accurate as it is able to report more errors</a></li>
</ul>
<p>Free offline extension:</p>
<ul> <li><a class="external" href="http://users.skynet.be/mgueury/mozilla/index.html">HTML validator as a Firefox extension working offline (SGML parser)</a>: Marc Gueury's Firefox extension (currently at version 0.8.5) when using the SGML parser will report the same errors as the W3C markup validator.</li>
</ul>
<p>Shareware offline HTML validator:</p>
<ul> <li><a class="external" href="http://arealvalidator.com/">"A real validator" from <abbr title="Web Design Group">WDG</abbr></a> 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.</li>
</ul>
<h4 name="Top_5_most_frequently_encountered_validation_errors_and_how_to_fix_them">Top 5 most frequently encountered validation errors and how to fix them</h4>
<ul> <li><a href="#incorrectnesting">incorrect nesting of elements</a></li> <li>unescaped ampersands in URLs: ampersands (&amp;'s) in an URL must be escaped, must be replaced with &amp;amp;</li>
</ul>
<p><a class="external" href="http://www.htmlhelp.org/tools/validator/problems.html.en#amp">Ampersands (&amp;'s) in URLs</a> from <abbr title="Web Design Group">WDG</abbr><br> <a class="external" href="http://www.w3.org/QA/2005/04/php-session">Ampersands, PHP Sessions and Valid HTML</a> from W3C Quality tip for webmaster</p>
<ul> <li>misplaced elements (eg <a href="#blocknestedininline">block-level element nested within inline element</a>)</li> <li>missing elements (eg missing &lt;title&gt; in &lt;head&gt; section)</li> <li>missing alt attribute in &lt;img&gt;</li>
</ul>
<p>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:<br> <a class="external" href="http://www.w3.org/QA/Tips/altAttribute">W3C Quality Assurance Tip for Webmasters: Use the alt attribute to describe the function of each visual</a></p>
<p>A useful tutorial on correcting the most frequently encountered validation errors is: <a class="external" href="/en/docs/Liberty!_Equality!_Validity!" title="en/docs/Liberty!_Equality!_Validity!">Liberty! Equality! Validity!</a> from Eric A. Meyer.</p>
<h4 name="How_to_upgrade_markup_code_in_some_frequently_encountered_cases:_.3Cfont.3E.2C_.3Ccenter.3E.2C_bgcolor">How to upgrade markup code in some frequently encountered cases: <code>&lt;font&gt;</code>, <code>&lt;center&gt;</code>, <code>bgcolor</code></h4>
<h5 name="I_use_.3Cfont.3E._How_to_define_or_to_replace_.3Cfont.3E_with_CSS.3F">I use <code>&lt;font&gt;</code>. How to define or to replace <code>&lt;font&gt;</code> with CSS?</h5>
<p>The purpose of the deprecated <code>FONT</code> 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 <code>SPAN</code> element that includes the same style information:</p>
<pre>&lt;p&gt;&lt;font color="blue" face="Helvetica"&gt;
A really &lt;font size="+1"&gt;big&lt;/font&gt; shoe.
&lt;/font&gt;&lt;/p&gt;</pre>
<p>... becomes:</p>
<pre>&lt;p&gt;&lt;span style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; shoe.
&lt;/span&gt;&lt;/p&gt;</pre>
<p>... or even more concisely:</p>
<pre>&lt;p style="color: blue; font-family: Helvetica, sans-serif;"&gt;
A really &lt;span style="font-size: larger;"&gt;big&lt;/span&gt; shoe.&lt;/p&gt;</pre>
<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.</p>
<p>More on conversion of &lt;FONT&gt;: <a class="external" href="http://www.w3.org/QA/Tips/font-size#css">W3C Quality Assurance tip for webmaster: Care With Font Size, Forget &lt;font&gt; and use CSS</a></p>
<h5 name="I_use_.3Ccenter.3E_or_align.3D.22center.22._How_to_align_with_CSS.3F">I use <code>&lt;center&gt;</code> or <code>align="center"</code>. How to align with CSS?</h5>
<p>The <a class="external" href="http://www.w3.org/TR/REC-CSS1#text-align">CSS1 text-align property</a> specifies how text or inline elements (like an image) are aligned within an element.</p>
<pre>&lt;p style="text-align: center;"&gt;&lt;img src="..." width="..."
height="..." alt="..."&gt;&lt;/p&gt;
// will center the image inside the &lt;p&gt; element</pre>
<p>CSS <code>margin-left: auto; margin-right: auto;</code> properties will center a block-level element within its containing block. Defining margin-left and margin-right is for block-level elements. When both <code>margin-left</code> and <code>margin-right</code> are <code>auto</code>, they are set to equal values, thus centering a block-level element within its parent.<br> <a class="external" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting">CSS1 horizontal formating</a></p>
<p>Worth mentioning is the excellent tutorial:<br> <a class="external" href="http://dorward.me.uk/www/centre/">Centring using CSS</a> by David Dorward<br> Also <a class="external" href="http://www.gtalbot.org/NvuSection/NvuWebDesignTips/HorizontalAlignment.html">Interactive demo on CSS horizontal alignment and horizontal formating</a> by Gérard Talbot</p>
<h5 name="How_to_replace_bgcolor.3F_How_to_colorize_background_with_CSS.3F">How to replace <code>bgcolor</code>? How to colorize background with CSS?</h5>
<p>The <code>bgcolor</code> attribute can be replaced with <a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS1 background-color property</a>.</p>
<p>If you have</p>
<pre>&lt;td bgcolor="green" width="150"&gt;
... content here ...
&lt;/td&gt;</pre>
<p>... can replace it with:</p>
<pre>&lt;td style="background-color: green;" width="150"&gt;
... content here ...
&lt;/td&gt;</pre>
<h4 name="How_to_upgrade_markup_code_in_specific_cases:_.3Cembed.3E.2C_.3Capplet.3E.2C_.3Cmarquee.3E.2C_.3Cbgsound.3E">How to upgrade markup code in specific cases: <code>&lt;embed&gt;</code>, <code>&lt;applet&gt;</code>, <code>&lt;marquee&gt;</code>, <code>&lt;bgsound&gt;</code></h4>
<h5 name="What_if_I_use_.3Cembed.3E_for_Flash_or_for_a_video.3F">What if I use <code>&lt;embed&gt;</code> for Flash or for a video?</h5>
<p>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.</p>
<ul> <li><a class="external" href="http://www.alistapart.com/articles/flashsatay">Embedding Flash While Supporting Standards</a> by Drew McLellan, November 2002</li> <li><a class="external" href="http://www.alistapart.com/articles/byebyeembed">Bye Bye Embed: Embedding a video</a> by Elizabeth Castro, July 2006</li> <li><a class="external" href="http://wiki.dreamhost.com/index.php/Object_Embedding">Embedding Object with valid code</a> by MediaWiki, March 2007</li> <li><a class="external" href="http://ln.hixie.ch/?start=1081798064&amp;count=1">Embedding flash without &lt;embed&gt;</a> by Ian "Hixie" Hickson, April 2004</li> <li><a class="external" href="http://alistapart.com/articles/flashembedcagematch">Flash Embedding Cage Match</a> by Bobby van der Sluis, February 2006</li>
</ul>
<h5 name="What_if_I_use_.3Capplet.3E.3F">What if I use <code>&lt;applet&gt;</code>?</h5>
<p>We recommend these resources:</p>
<ul> <li><a class="external" href="http://ww2.cs.fsu.edu/%7Esteele/XHTML/appletObject.html">Java applet using &lt;object&gt; tag</a> by Shayne Steele</li> <li><a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-APPLET">HTML 4.01 on Including an applet</a></li> <li><a class="external" href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT">HTML 4.01 on Including an object</a></li>
</ul>
<p><span class="comment">Worth mentioning here: Java Upgrade Guide: Migrating From the Microsoft VM for Java to the Sun JRE <a class=" external" href="http://java.sun.com/j2se/1.4.2/docs/guide/deployment/deployment-guide/upgrade-guide/index.html" rel="freelink">http://java.sun.com/j2se/1.4.2/docs/...ide/index.html</a> "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."</span></p>
<h5 name="What_if_I_use_.3Cmarquee.3E.3F">What if I use <code>&lt;marquee&gt;</code>?</h5>
<p>Marquee can be replaced with content string inside a <code>&lt;div&gt;</code> or <code>&lt;span&gt;</code> rotating over time with Javascript and DOM level 1. It must be said that this sort of effect is discouraged. Studies have shown that <strong>constantly moving objects or moving text disturb reading and weakens peripherical vision</strong>. DHTML marquee also <strong>greatly consumes user system resources (cpu, RAM)</strong> 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:<br> <a class="external" href="http://devedge-temp.mozilla.org/toolbox/examples/2001/stock-ticker/" title="http://devedge-temp.mozilla.org/toolbox/examples/2001/stock-ticker/">Cross-browser and web standard compliant Stock Ticker example</a> by D. Rosenberg<br> <a class="external" href="http://devedge-temp.mozilla.org/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive web standard compliant alternative to &lt;marquee&gt;</a> by D. Rosenberg<br> Firefox 2 and Firefox 3 support the non-standard <code>&lt;marquee&gt;</code> element. On the other hand, Firefox users can disable such support by <a class="external" href="http://www.mozilla.org/unix/customizing.html#userContent">customizing an userContent.css</a></p>
<h5 name="What_if_I_have_.3Cbgsound.3E.3F">What if I have <code>&lt;bgsound&gt;</code>?</h5>
<p>Then use HTML 4.01 <code>OBJECT</code>, e.g.:<br> <code>&lt;OBJECT data="audiofile.wav" type="audio/wav" ...&gt;&lt;/OBJECT&gt;</code><br> See <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEdge article</a> for information on rendering a sound OBJECT invisible within the page.<br> 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 <a class="external" href="http://www.lowendmac.com/musings/02/0528.html">What we really hate on the web</a>, 41.9% of survey respondents will avoid sites that automatically play music; 71.1% strongly dislike sites that automatically play music.<br> <a class="external" href="http://www.wowwebdesigns.com/power_guides/music_off.php">Why Playing Music on your Web Site is a Bad Idea</a> by A. Gulez</p>
<h3 name="Step_3:_Validate_your_CSS_code">Step 3: Validate your CSS code</h3>
<h4 name="Where_can_I_validate_my_CSS_code.3F">Where can I validate my CSS code?</h4>
<p>Free Online CSS validation services:</p>
<ul> <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a></li> <li><a class="external" href="http://www.htmlhelp.org/tools/csscheck/"><abbr title="Web Design Group">WDG</abbr> CSS checker</a></li>
</ul>
<p>Built-in report of CSS parsing errors in modern browsers:</p>
<ul> <li>Error console in Firefox 3. From the menu, Tools/Error console; the error console reports CSS parsing errors.</li> <li>Error console in Opera 9.5. From the menu, Tools/Advanced/Error console; the error console reports CSS parsing errors.</li> <li>Error console in Safari 3. From the menu, Develop/Show Error console: the error console reports CSS parsing errors.</li> <li>Error console in Icab 4. From the menu, Preferences/Show All/Other/Error report: the error console reports CSS parsing errors.</li>
</ul>
<p>There are also other possible and excellent debugging CSS and DHTML tools, useful tools (Addons, Toolbars, Extensions) for developers. Here is a <a class="external" href="http://css.tests.free.fr/en/debugging_css_tools.php">list of recommendable and free debugging tools</a> from <a class=" external" href="http://css.tests.free.fr/" rel="freelink">http://css.tests.free.fr/</a></p>
<p><a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Benefits_of_using_web_standards">&lt;- Previous section: Benefits of web standards</a></p>
<p style="text-align: right;"><a class="external" href="/en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM" title="en/docs/Using_Web_Standards_in_your_Web_Pages:Using_the_W3C_DOM">Next section: Using the W3C DOM -&gt;</a></p>
Revert to this revision