Obsolete practices to avoid

  • Revision slug: Web_development/Historical_artifacts_to_avoid
  • Revision title: Historical artifacts to avoid
  • Revision id: 386679
  • Created:
  • Creator: slhuang
  • Is current revision? No
  • Comment

Revision Content

介紹

許多人藉由觀看原始碼並且複製並貼上來學習HTML, CSS,及JavaScript,然而他們並沒有思考其來源是否充分經過implemented. 這代表他們延續了一些過去必要但現在不需要的練習程式習慣.而此頁便是要列出這些隨著時間變得不必要或不好的習慣.

Doctype

以下有十項(X)HTML doctypes. 這些項目的差異是非常細微的(甚至不存在).以下是一些當您使用HTML5 doctype的建議:

<!DOCTYPE html>

which triggers standard mode in every browser (even Internet Explorer 6).

<meta> element and charset attribute

It is not uncommon to find source code with the following line:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

However, all Web browsers (even Internet Explorer 6) will act the same if you reduce it to:

<meta charset="UTF-8" />

This knowledge has been acquired by some amazing reverse engineering and pragmatism. Use it.

Non-existing <meta> elements

Numerous deprecated values or non-standard and non-used values are still copied from one site to the other. Especially, don't use:

  • <meta name="MSSmartTagsPreventParsing" content="true"> which was useful only in one beta version of Internet Explorer 6. That version is not used anymore and the feature, smart tags, has been removed and won't come back.
  • <meta name="robots" content="all">. If the robots value does exists and is perfectly legitimate, don't use not existing values, like all. By default it is index, follow which is basically what the non-existing all is supposed to do. Just remove the whole <meta>.
  • <meta name="copyright" content="…">. This meta doesn't exist. Remove it and creates a copyright page or div, link to it using the {{HTMLElement("link")}} HTML element with the rel="copyright" value
  • <meta name="rating" content="…">. This meta doesn't exist. Just remove the whole <meta>.

HTML comments in scripts

There was once a time in which some browsers understood the {{ HTMLElement("script") }} tag and others didn't. This sometimes led to browsers rendering as text what should be interpreted as script. A natural idea was to put scripts as HTML comments. This way, browsers executing scripts would execute them and those who did not understand scripts would just ignore them.

From this era, we inherit things like:

<script>
<!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//-->
</script>

or:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
Blabla.extend(MyFramework.settings, { "basePath": "/" });
//--><!]]>
</script>

All of this is completely useless nowadays - even browsers which do not execute scripts just ignore {{ HTMLElement("script") }} tags. Just write your scripts within between the start and end {{ HTMLElement("script") }} tags. Better, insert your scripts as separate files with the {{ htmlattrxref("src", "script") }} attribute; while you're at it, consider trying the HTML5 {{ htmlattrxref("async", "script") }} and {{ htmlattrxref("defer", "script") }} attributes.

Elements which should not be used anymore

font

The font tag should not be used any more. CSS is preferred to control typography appearance on the elements, targeted by tag or ID/Class attributes..

b, i, u

These tend to be a bit more controversial, but as much as possible, try to use respectively {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} or {{ HTMLElement("span") }} and CSS (text-decoration:underline) when relevant.

Exercise discretion when choosing which of these elements to use. Some development-oriented pages advise simply replacing {{ HTMLElement("b") }} with {{ HTMLElement("strong") }} and {{ HTMLElement("i") }} with {{ HTMLElement("em") }}. It is a bad idea to follow this advice. {{ HTMLElement("strong") }} is for statements of strong importance, while {{ HTMLElement("em") }} is for otherwise emphasized text. For example, it's a bad idea to use {{ HTMLElement("em") }} simply to achieve italicization; italic, non-emphasized text can be achieved by using font-style:italic in your pages' CSS. Similarly, titles of books and works of art are traditionally styled with italic text, but using the {{ HTMLElement("cite") }} element for these items provides more semantic mark-up than {{ HTMLElement("em") }} or {{ HTMLElement("i") }}.

Revision Source

<h2 id="Introduction">介紹</h2>
<p>許多人藉由觀看原始碼並且複製並貼上來學習HTML, CSS,及JavaScript,然而他們並沒有思考其來源是否充分經過implemented. 這代表他們延續了一些過去必要但現在不需要的練習程式習慣.而此頁便是要列出這些隨著時間變得不必要或不好的習慣.</p>
<h2 id="Doctype">Doctype</h2>
<p>以下有十項<a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">(X)HTML doctypes</a>. 這些項目的差異是非常細微的(甚至不存在).以下是一些當您使用HTML5 doctype的建議:</p>
<pre>
&lt;!DOCTYPE html&gt;</pre>
<p>which triggers standard mode in every browser (even Internet Explorer 6).</p>
<h2 id="&lt;meta&gt;_element_and_charset_attribute"><code>&lt;meta&gt;</code> element and <code>charset</code> attribute</h2>
<p>It is not uncommon to find source code with the following line:</p>
<pre>
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;</pre>
<p>However, all Web browsers (even Internet Explorer 6) will act the same if you reduce it to:</p>
<pre>
&lt;meta charset="UTF-8" /&gt;
</pre>
<p>This knowledge has been acquired by some amazing <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">reverse engineering</a> and <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">pragmatism</a>. Use it.</p>
<h2 id="Non-existing_&lt;meta&gt;_elements">Non-existing <code>&lt;meta&gt;</code> elements</h2>
<p>Numerous deprecated values or non-standard and non-used values are still copied from one site to the other. Especially, don't use:</p>
<ul>
  <li><code>&lt;meta name="MSSmartTagsPreventParsing" content="true"&gt;</code> which was useful only in one <em>beta</em> version of Internet Explorer 6. That version is not used anymore and the feature, smart tags, has been removed and won't come back.</li>
  <li><code>&lt;meta name="robots" content="all"&gt;</code>. If the robots value does exists and is perfectly legitimate, don't use not existing values, like <code>all</code>. By default it is <code>index, follow</code> which is basically what the non-existing <code>all</code> is supposed to do. Just remove the whole <code>&lt;meta&gt;</code>.</li>
  <li><code>&lt;meta name="copyright" content="…"&gt;</code>. This meta doesn't exist. Remove it and creates a copyright page or div, link to it using the {{HTMLElement("link")}} HTML element with the <code>rel="copyright"</code> value</li>
  <li><code>&lt;meta name="rating" content="…"&gt;</code>. This meta doesn't exist. Just remove the whole <code>&lt;meta&gt;</code>.</li>
</ul>
<h2 id="HTML_comments_in_scripts">HTML comments in scripts</h2>
<p>There was once a time in which some browsers understood the {{ HTMLElement("script") }} tag and others didn't. This sometimes led to browsers rendering as text what should be interpreted as script. A natural idea was to put scripts as HTML comments. This way, browsers executing scripts would execute them and those who did not understand scripts would just ignore them.</p>
<p>From this era, we inherit things like:</p>
<pre>
&lt;script&gt;
&lt;!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//--&gt;
&lt;/script&gt;
</pre>
<p>or:</p>
<pre>
&lt;script type="text/javascript"&gt;
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
Blabla.extend(MyFramework.settings, { "basePath": "/" });
//--&gt;&lt;!]]&gt;
&lt;/script&gt;
</pre>
<p>All of this is completely useless nowadays - even browsers which do not execute scripts just ignore {{ HTMLElement("script") }} tags. Just write your scripts within between the start and end {{ HTMLElement("script") }} tags. Better, insert your scripts as separate files with the {{ htmlattrxref("src", "script") }} attribute; while you're at it, consider trying the HTML5 {{ htmlattrxref("async", "script") }} and {{ htmlattrxref("defer", "script") }} attributes.</p>
<h2 id="Elements_which_should_not_be_used_anymore">Elements which should not be used anymore</h2>
<h3 id="font">font</h3>
<p>The font tag should not be used any more. CSS is preferred to control typography appearance on the elements, targeted by tag or ID/Class attributes..</p>
<h3 id="b.2C_i.2C_u">b, i, u</h3>
<p>These tend to be a bit more controversial, but as much as possible, try to use respectively {{ HTMLElement("strong") }}, {{ HTMLElement("em") }} or {{ HTMLElement("span") }} and CSS (<code>text-decoration:underline</code>) when relevant.</p>
<p>Exercise discretion when choosing which of these elements to use. Some development-oriented pages advise simply replacing {{ HTMLElement("b") }} with {{ HTMLElement("strong") }} and {{ HTMLElement("i") }} with {{ HTMLElement("em") }}. <strong>It is a bad idea to follow this advice.</strong> {{ HTMLElement("strong") }} is for statements of strong importance, while {{ HTMLElement("em") }} is for otherwise emphasized text. For example, it's a bad idea to use {{ HTMLElement("em") }} simply to achieve italicization; italic, non-emphasized text can be achieved by using <code>font-style:italic</code> in your pages' CSS. Similarly, titles of books and works of art are traditionally styled with italic text, but using the {{ HTMLElement("cite") }} element for these items provides more semantic mark-up than {{ HTMLElement("em") }} or {{ HTMLElement("i") }}.</p>
<!--commenting out as there's nothing there yet, and I don't know of any offhand to list, but wanted to leave for someone in the future--><!--<h2>Attributes which should not be used anymore</h2>-->
Revert to this revision