Compare Revisions

Fixing common validation problems

Change Revisions

Revision 36862:

Revision 36862 by Dikrib on

Revision 36863:

Revision 36863 by Dikrib on

Title:
Fixing common validation problems
Fixing common validation problems
Slug:
Fixing_common_validation_problems
Fixing_common_validation_problems
Tags:
HTML, XHTML, "Web Standards", "Web Development"
HTML, XHTML, "Web Standards", "Web Development"
Content:

Revision 36862
Revision 36863
n150      The purpose of the deprecated <code>font</code> element wasn150      The purpose of the deprecated <code>font</code> element was
> to specify typeface, color and size of the enclosed text. This i> to specify typeface, color and size of the enclosed text. This i
>s however much better done with CSS. The quickest way is to direc>s however much better done with CSS. The quickest way is to direc
>tly replace the <code>font</code> element with a <code>span</code>tly replace the <code>font</code> element with a <code>span</code
>> element and add the style as inline CSS:>> element and add the style as inline CSS <a href="/en/CSS/color"
 > title="color"><code>color</code></a>, <a href="/en/CSS/font-fami
 >ly" title="font-family"><code>font-family</code></a> and <a href=
 >"/en/CSS/font-size" title="font-size"><code>font-size</code></a>:
n173      This is appropriate usage for a local change to the font. Hn173      Note that though this is the most direct change you can mak
>owever, this is not the best use of styles; the strength of CSS l>e to fix the validation errors, you should consider learning how 
>ies in the ability to gather text and other styling into logical >to use <a href="/en/CSS" title="CSS">CSS</a> properly, instead of
>groupings that can be applied across a document, without repeatin> adding style information directly to element.
>g the specific styling on every element that requires it. 
174    </p>
175    <p>
176      More on conversion of &lt;FONT&gt;: <a class="external" hre
>f="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> 
n182      The <a class="external" href="http://www.w3.org/TR/REC-CSS1n179      The <span class="external">CSS <a href="/en/CSS/text-align"
>#text-align">CSS1 text-align property</a> specifies how text or i> title="text-align">text-align</a> property</span> specifies how 
>nline elements (like an image) are aligned within an element.>text or inline elements (like an image) are aligned within an ele
 >ment.
n190      CSS <code>margin-left: auto; margin-right: auto;</code> pron187      CSS <code>margin-left: auto; margin-right: auto;</code> pro
>perties will center a block-level element within its containing b>perties will center a block-level element within its containing b
>lock. Defining margin-left and margin-right is for block-level el>lock. Defining margin-left and margin-right is for block-level el
>ements. When both <code>margin-left</code> and <code>margin-right>ements. When both <code>margin-left</code> and <code>margin-right
></code> are <code>auto</code>, they are set to equal values, thus></code> are <code>auto</code>, they are set to equal values, thus
> centering a block-level element within its parent.<br>> centering a block-level element within its parent.
191      <a class="external" href="http://www.w3.org/TR/REC-CSS1#hor
>izontal-formatting">CSS1 horizontal formating</a> 
192    </p>
193    <p>
194      Worth mentioning is the excellent tutorial:<br>
195      <a class="external" href="http://dorward.me.uk/www/centre/"
>>Centring using CSS</a> by David Dorward<br> 
196      Also <a class="external" href="http://www.gtalbot.org/NvuSe
>ction/NvuWebDesignTips/HorizontalAlignment.html">Interactive demo 
> on CSS horizontal alignment and horizontal formating</a> by Géra 
>rd Talbot 
n202      The <code>bgcolor</code> attribute can be replaced with <a n193      The <code>bgcolor</code> attribute can be replaced with <sp
>class="external" href="http://www.w3.org/TR/CSS1#background-color>an class="external">CSS <a href="/en/CSS/background-color" title=
>">CSS1 background-color property</a>.>"background-color">background-color</a></span>.
n208&lt;td bgcolor="green" width="150"&gt;n199&lt;td bgcolor="green"&gt;
n216&lt;td style="background-color: green;" width="150"&gt;n207&lt;td style="background-color: green;"&gt;
n220    <h4 name="How_to_upgrade_markup_code_in_specific_cases:_.3Cemn
>bed.3E.2C_.3Capplet.3E.2C_.3Cmarquee.3E.2C_.3Cbgsound.3E"> 
221      How to upgrade markup code in specific cases: <code>&lt;emb
>ed&gt;</code>, <code>&lt;applet&gt;</code>, <code>&lt;marquee&gt; 
></code>, <code>&lt;bgsound&gt;</code> 
222    </h4>211    <h4>
223    <h5 name="What_if_I_use_.3Cembed.3E_for_Flash_or_for_a_video.212      The <code>applet</code> element is deprecated
>3F"> 
224      What if I use <code>&lt;embed&gt;</code> for Flash or for a
> video? 
225    </h5>213    </h4>
226    <p>
227      Explaining in details how to do this would go beyond the sc
>ope of this article. Nevertheless, we recommend the following art 
>icles so that you can have a Flash movie or a video in your web p 
>age and, at the same time, have your page validate. 
228    </p>214    <p>
229    <ul>215      If your page makes use of the <code>applet</code> element t
 >o embed a Java plug-in, use the <code>object</code> element inste
 >ad, or replace your use of a plug-in with open web standards like
 > HTML, CSS and JavaScript.
230      <li>
231        <a class="external" href="http://www.alistapart.com/artic
>les/flashsatay">Embedding Flash While Supporting Standards</a> by 
> Drew McLellan, November 2002 
232      </li>
233      <li>
234        <a class="external" href="http://www.alistapart.com/artic
>les/byebyeembed">Bye Bye Embed: Embedding a video</a> by Elizabet 
>h Castro, July 2006 
235      </li>
236      <li>
237        <a class="external" href="http://wiki.dreamhost.com/index
>.php/Object_Embedding">Embedding Object with valid code</a> by Me 
>diaWiki, March 2007 
238      </li>
239      <li>
240        <a class="external" href="http://ln.hixie.ch/?start=10817
>98064&amp;count=1">Embedding flash without &lt;embed&gt;</a> by I 
>an "Hixie" Hickson, April 2004 
241      </li>
242      <li>
243        <a class="external" href="http://alistapart.com/articles/
>flashembedcagematch">Flash Embedding Cage Match</a> by Bobby van  
>der Sluis, February 2006 
244      </li>
245    </ul>
246    <h5 name="What_if_I_use_.3Capplet.3E.3F">
247      What if I use <code>&lt;applet&gt;</code>?
248    </h5>
249    <p>
250      We recommend these resources:
t263    <p>t
264      <span class="comment">Worth mentioning here: Java Upgrade G
>uide: 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="freel 
>ink">http://java.sun.com/j2se/1.4.2/docs/...ide/index.html</a> "a 
>fter December, 2007, Microsoft will no longer support or provide  
>a Java implementation with any of its products. (...) Those runni 
>ng applets in the Internet Explorer web browser will need to down 
>load and install an alternate VM."</span> 
265    </p>
266    <h5 name="What_if_I_use_.3Cmarquee.3E.3F">228    <h4 name="What_if_I_use_.3Cmarquee.3E.3F">
267      What if I use <code>&lt;marquee&gt;</code>?229      The <code>marquee</code> element is invalid
268    </h5>230    </h4>
231    <p>
232      Marquee can be replaced with content string inside a <code>
 >div</code> or <code>span</code> rotating over time with JavaScrip
 >t. It must be said that this sort of effect is discouraged. Studi
 >es have shown that <strong>constantly moving objects or moving te
 >xt disturb reading and weakens peripherical vision</strong>. If a
 >fter webpage assessment and consideration, you still want to incl
 >ude a marquee effect in your page, then you can use the following
 > tutorials:
269    <p>233    </p>
270      Marquee can be replaced with content string inside a <code>234    <ul>
>&lt;div&gt;</code> or <code>&lt;span&gt;</code> rotating over tim 
>e with Javascript and DOM level 1. It must be said that this sort 
> of effect is discouraged. Studies have shown that <strong>consta 
>ntly moving objects or moving text disturb reading and weakens pe 
>ripherical vision</strong>. DHTML marquee also <strong>greatly co 
>nsumes user system resources (cpu, RAM)</strong> on tested browse 
>rs and will put modest systems under considerable stress. If afte 
>r webpage assessment and consideration, you still want to include 
> a marquee effect in your page, then you can use the following re 
>commendable tutorials:<br> 
235      <li>
271      <a class="external" href="http://devedge-temp.mozilla.org/t236        <a class="external" href="http://devedge-temp.mozilla.org
>oolbox/examples/2001/stock-ticker/" title="http://devedge-temp.mo>/toolbox/examples/2001/stock-ticker/" title="http://devedge-temp.
>zilla.org/toolbox/examples/2001/stock-ticker/">Cross-browser and >mozilla.org/toolbox/examples/2001/stock-ticker/">Cross-browser an
>web standard compliant Stock Ticker example</a> by D. Rosenberg<b>d web standard compliant Stock Ticker example</a> by D. Rosenberg
>r> 
237      </li>
238      <li>
272      <a class="external" href="http://devedge-temp.mozilla.org/t239        <a class="external" href="http://devedge-temp.mozilla.org
>oolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive we>/toolbox/examples/2002/xb/xbMarquee/index_en.html">Comprehensive 
>b standard compliant alternative to &lt;marquee&gt;</a> by D. Ros>web standard compliant alternative to &lt;marquee&gt;</a> by D. R
>enberg<br>>osenberg
273      Firefox 2 and Firefox 3 support the non-standard <code>&lt;240      </li>
>marquee&gt;</code> element. On the other hand, Firefox users can  
>disable such support by <a class="external" href="http://www.mozi 
>lla.org/unix/customizing.html#userContent">customizing an userCon 
>tent.css</a> 
274    </p>241    </ul>
275    <h5 name="What_if_I_have_.3Cbgsound.3E.3F">242    <h4 name="What_if_I_have_.3Cbgsound.3E.3F">
276      What if I have <code>&lt;bgsound&gt;</code>?243      The <code>bgsound</code> element is invalid
277    </h5>244    </h4>
245    <p>
246      Use the <code>audio</code> or <code>object</code> element i
 >nstead:
278    <p>247    </p>
279      Then use HTML 4.01 <code>OBJECT</code>, e.g.:<br>248    <pre>
280      <code>&lt;OBJECT data="audiofile.wav" type="audio/wav" ...&249&lt;object data="audiofile.wav" type="audio/wav" ...&gt;&lt;/obje
>gt;&lt;/OBJECT&gt;</code><br>>ct&gt;
281      See <a class="external" href="http://devedge-temp.mozilla.o250</pre>
>rg/library/manuals/2002/plugin/1.0/intro.html#1003240">this DevEd 
>ge article</a> for information on rendering a sound OBJECT invisi 
>ble within the page.<br> 
282      Web page background sound often slows down considerably web251    <p>
> page loading; like the text effects above, music or sound accomp 
>anying a page is seldom appreciated. According to the survey page 
> <a class="external" href="http://www.lowendmac.com/musings/02/05 
>28.html">What we really hate on the web</a>, 41.9% of survey resp 
>ondents will avoid sites that automatically play music; 71.1% str 
>ongly dislike sites that automatically play music.<br> 
283      <a class="external" href="http://www.wowwebdesigns.com/powe252      Please note that while playing sound automatically in the b
>r_guides/music_off.php">Why Playing Music on your Web Site is a B>ackground may seem cool to you, your visitors often find it extre
>ad Idea</a> by A. Gulez>mely annoying. According to the survey page <a class="external" h
 >ref="http://www.lowendmac.com/musings/02/0528.html">What we reall
 >y hate on the web</a>, 41.9% of survey respondents will avoid sit
 >es that automatically play music; 71.1% strongly dislike sites th
 >at automatically play music.

Back to History