犯してはいけないHTMLタグの過ち10個
知っている内容も多いかと思いますが、再確認の意味を込めて見ていただければと思います。
1. インライン要素の中にブロック要素を入れない
<a href="#"><h2>これは間違いです</h2></a>
aタグのようなインライン要素の中にhタグのようなブロック要素を入れてはいけません。
<h2><a href="#">これは正しいです</a></h2>
このように、ブロック要素の中にインライン要素を入れましょう
HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。
2. 画像に代替テキストのalt属性が入っていない
<img src="sample.gif" />
alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。
<img src="sample.gif" alt="サンプル" />
必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。
HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を投稿して、代替テキストを提供しなかった場合など、かなり特殊な場面に限られるようです。
The img element - HTML5
さらに 「Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.(そのようなケース(alt属性を省略する)は必要最低限に留めるべきです。代替テキストを使う可能性が少しでもあるのであれば、alt属性を省くことは受け入れられないでしょう。) 」と述べられています。
ちなみに「A purely decorative image that doesn't add any information(情報を何も加えない純粋に装飾的なイメージ)」についてはalt=""と記述する必要があると述べられています。
3. 必要な場面でリストを使っていない
html<br /> css<br /> javascript<br /> php<br />
このように改行で箇条書きを表すのではなく、リストタグを使うようにしましょう。
<ul> <li>html</li> <li>css</li> <li>javascript</li> <li>php</li> </ul>
4. <strong>や<em>ではなく<b>や<i>を使っている
<b>これ</b>も<strong>これ</strong>も太字になります。
bタグは太字、iタグはイタリックになりますが、ともに視覚的な意味合いしかありません。ですので、cssのfont-weightやfont-styleを使った方がベターといえます。strongタグとemタグは内容の強調を表すので、内容を強調するときはこれらを使用した方がいいでしょう。
また、HTML5では詳しく意味が定義されているので注意しましょう。
5. 改行を連続して使っている
brタグは改行を表します。
<br />
<br />
<br />
このように改行を連続して使わないようにしましょう。
日記的なブログでなんかよく改行の連打を見かけますが、基本brタグは2つ以上連続して使用してはいけません。
<p>brタグは改行を表します。</p> <p>連続して使わずpタグとcssで調整しましょう。</p>
このようにpタグでくくり、cssのpadding、marginやline-heightで調整しましょう。
6. 削除された部分に<s>や<strike>を使っている
sタグとstrikeタグはともに視覚的に取り消し線を表しますが、ともに非推奨タグに指定されており、strikeについてはhtml5で廃止となっています。
削除された部分を表すときには、<del>を使い、単に取り消し線を表すときはcssでtext-decoration: line-through;を使いましょう
HTML5においてsタグは、変更されたためその内容はもう正確ではない、関連性がなくなったということを表します。間違っていたため訂正します、ということを表す場合はdelを使用します。
7. 要素に対して直接スタイルを指定している
<p style="color: red;">文字が赤くなります</p>
これは私もよく使っており、ウェブ標準ではないというわけではありません。
World Wide Webの利便性を向上させるプロジェクトの1つであるセマンティックhtmlやcssでは、構造とスタイルはそれぞれで定義される必要があるとされいるので、要素内にスタイルは指定してはいけないようです。
8. 画像にborder属性を指定している
<img src="sample.gif" alt="サンプル" border="0" />
imgタグ内のborder属性はHTML 4.01では非推奨とされており、Strict DTDでは使用できません。線を消したいときはcssでimg{ border: none; }としておきましょう。
9. 見出しの<h>タグを使っていない
<p><strong>タイトル</strong></p> <p>このように、strongタグを使って強調するのではなく、見出しタグを使いましょう。</p>
このように見出しはstrongタグを使わず、hタグを使いましょう。
<h3>タイトル</h3> <p>このように、見出しには見出しを表すhタグを使いましょう。</p>
10. <blink>や<marquee>などを使っている
点滅して表示するblinkタグや、スクロールして表示するmarqueeタグは一部ブラウザでしかサポートされておらず、HTML5で廃止が予定されていますので使うのはやめましょう。
まとめ
皆さん正しく理解できていましたか？
個人的には7番の「スタイルを直接記述している」というところは初めて聞く内容でした。それと10番のタグは知りませんでした。
後は、実践しているかどうかは別にして知っている内容でした。
strongタグ、hタグや、リストを使うなんてところは、SEO(検索エンジン対策)なんかでよく言われていることですね。
Web標準を守るということはユーザーだけでなく、検索エンジンに対しても優しいサイトになり、検索エンジンが内容を正しく理解することで正しい検索結果に反映されるということになります。
bタグとstrongタグは見た目が一緒だからといって、1文字で書ける楽なbタグばかりを使うのではなく、ちゃんとタグの意味を理解して使い分ける必要があるといえます。
今後HTML5が基準となりWeb標準を守っていないとちゃんと表示されないということもあると思いますので、今のうちに正しいHTMLを理解しておく必要があるのではないでしょうか。
@webpark2さんのツイート
キチンとするのが、やっぱり一番ですね。
やっぱ参考になります。