files/ja/conflicting/learn/html/introduction_to_html/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

---
title: Historical artifacts to avoid
slug: Web/Guide/HTML/Obsolete_things_to_avoid
tags:
  - HTML
  - NeedsContent
  - NeedsTechnicalReview
translation_of: Learn/HTML/Introduction_to_HTML
translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid
---
<h2 id="導入">導入</h2>

<p>多くの人々はページのソースを見てコピー &amp; ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。</p>

<h2 id="Doctype">Doctype</h2>

<p>(X)HTML には 10 種類ほどの <a class="external" href="http://en.wikipedia.org/wiki/Document_Type_Declaration">doctype</a> があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。</p>

<pre>&lt;!DOCTYPE html&gt;</pre>

<p>これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。</p>

<h2 id="&lt;meta>_要素と_charset_属性">&lt;meta&gt; 要素と <code>charset</code> 属性</h2>

<p>以下の記述を含むソースコードを見ることがよくあります:</p>

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

<p>ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:</p>

<pre>&lt;meta charset="UTF-8" /&gt;
</pre>

<p>すばらしい <a class="external" href="http://blog.whatwg.org/the-road-to-html-5-character-encoding">リバースエンジニアリング</a> や <a class="external" href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0550.html#replies">プラグマティズム</a> によってこの知識を獲得しました。これを使用してください。</p>

<ul>
 <li>HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。</li>
 <li>Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。</li>
</ul>

<h2 id="Non-existing_&lt;meta>_elements" name="Non-existing_&lt;meta>_elements">存在しない <code>&lt;meta&gt;</code> 要素</h2>

<p>多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:</p>

<ul>
 <li><code>&lt;meta name="MSSmartTagsPreventParsing" content="true"&gt;</code>。これは Internet Explorer 6 の<em>ベータ</em>版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。</li>
 <li><code>&lt;meta name="robots" content="all"&gt;</code>。robots 値が存在して、また正当であれば、<code>all</code> のような存在しない値を使用してはいけません。既定値は <code>index, follow</code> であり、これは基本的に、存在しない値 <code>all</code> で想定される動作です。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
 <li><code>&lt;meta name="copyright" content="</code><code>…</code><code>"&gt;</code>。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに <code>rel="copyright"</code> 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。</li>
 <li><code>&lt;meta name="rating" content="</code><code>…</code><code>"&gt;。</code>この meta は存在しません。<code>&lt;meta&gt;</code> 全体を削除してください。</li>
</ul>

<h2 id="スクリプト内の_HTML_コメント">スクリプト内の HTML コメント</h2>

<p>かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。</p>

<p>そのような時期から、我々は以下のような記述を受け継いできました:</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>または以下のような記述:</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>このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。</p>

<h2 id="もはや使用すべきではない要素">もはや使用すべきではない要素</h2>

<h3 id="font">font</h3>

<p>&lt;font&gt; タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。</p>

<h3 id="b_i_u">b, i, u</h3>

<p>これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (<code>text-decoration:underline</code>) を適用した {{ HTMLElement("span") }} を用いるようにしてください。</p>

<p>これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。<strong>このアドバイスに従うことは悪い考えです。</strong> {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で <code>font-style:italic</code> を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。</p>