Compare Revisions

Fixing common validation problems

Change Revisions

Revision 36862:

Revision 36862 by Dikrib on

Revision 36863:

Revision 36863 by Dikrib on

Fixing common validation problems
Fixing common validation problems
HTML, XHTML, "Web Standards", "Web Development"
HTML, XHTML, "Web Standards", "Web Development"

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="">W3C Quality Assurance 
> tip for webmaster: Care With Font Size, Forget &lt;font&gt; and  
>use CSS</a> 
n182      The <a class="external" href="      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
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="
>izontal-formatting">CSS1 horizontal formating</a> 
192    </p>
193    <p>
194      Worth mentioning is the excellent tutorial:<br>
195      <a class="external" href=""
>>Centring using CSS</a> by David Dorward<br> 
196      Also <a class="external" href="
>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=">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
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
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="
>les/flashsatay">Embedding Flash While Supporting Standards</a> by 
> Drew McLellan, November 2002 
232      </li>
233      <li>
234        <a class="external" href="
>les/byebyeembed">Bye Bye Embed: Embedding a video</a> by Elizabet 
>h Castro, July 2006 
235      </li>
236      <li>
237        <a class="external" href="
>.php/Object_Embedding">Embedding Object with valid code</a> by Me 
>diaWiki, March 2007 
238      </li>
239      <li>
240        <a class="external" href="
>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="
>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=" 
>/deployment/deployment-guide/upgrade-guide/index.html" rel="freel 
>ink"></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="        <a class="external" href="
>oolbox/examples/2001/stock-ticker/" title=">/toolbox/examples/2001/stock-ticker/" title="http://devedge-temp.
>">Cross-browser and >">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
237      </li>
238      <li>
272      <a class="external" href="        <a class="external" href="
>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
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 
>">customizing an userCon 
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
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
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=" 
>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="      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="">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