HTML5で誤用されがちな各要素の正しい使い方

HTML5はXHTML1.0やHTML4を継承しつつ、使い方が大きく変わった点もあります。
よく利用されるHTML5の各要素の誤用されがちな例とそれを正しく適切に使う方法を紹介します。

You're Doing it Wrong: Common HTML Tag Misuses

[ad#ad-2]

下記は各ポイントを意訳したものです。

<br>の誤用

<br>の間違った使い方

<br>のよくある誤用は、コンテンツ間にスペースをつくるために使用することです。
これはWYSIWYGエディタで作成するとよく起きる現象で、複数の空の行で隙間をつくります。

<br>の適切な使い方

<br>は文章を改行するために使用するものです。
段落に分けるには<p>を使用し、文章同士の間をあけるためにはCSSのmarginなどで間隔を設定します。

<div>の誤用

<div>の間違った使い方

HTML+CSSでページを初めて作成するとき、とにかく全てのページのアイテムを<div>で囲ってしまいがちです。

<div>の適切な使い方

<div>はページ内の主要となる構造を定義することができますが、各エレメントのために適切なタグがないか検討してみてください。パラグラフには<p>、リストには<ul>などセマンティックな選択をし、<div>は特定の意味はないが区別したい領域やグルーピングしたいときに使用します。

<small>の誤用

<small>の間違った使い方

<small>は名が示すように、テキストを小さいサイズにするために使用されてしまうことがあります。

<small>の適切な使い方

<small>は細目・注釈や法規上のテキストなどに使用します。
テキストを小さいサイズにするのは、CSSのfont-sizeでコントロールします。

[ad#ad-2]

<hr>の誤用

<hr>の間違った使い方

<hr>はセクション間に設置する罫線として使用されてしまうことがあります。

<hr>の適切な使い方

<hr>は段落の区切りで、基本的にはセクション内に使用します。

<title>の誤用

<title>の間違った使い方

<title>は二つの意味で誤用されがちです。
一つは貴重な情報を含んでいません、そしてもう一つはSEOのために数多くのキーワードが詰め込まれてしまっています。

<title>の適切な使い方

<title>はページの内容を正確に簡潔に記述するものです。

<img>の誤用

<img>の間違った使い方

<img>の誤用はその属性であるaltの使用にあります。alt内のテキストに全く無関係のものが使用されていることがあります。

<img>の適切な使い方

<img>のalt属性には画像の正確な説明を使用するべきで、画像が表示されない場合でも伝わるものにします。
もし画像がリンクとして使用されているのであれば、リンクするであろうという内容を含めます。また、画像が重要性をもっていないのであれば空にします。

<label>の誤用

<label>の間違った使い方

<label>は誤用されるというより、忘れがちなものです。

<label>の適切な使い方

<label>は記述的なラベルをフォームコントロールと関連づけるために使用します。

<address>の誤用

<address>の間違った使い方

<address>はその名から、住所や連絡先を囲むために使用されていることがあります。

<address>の適切な使い方

正しい使い方は、<address>が含まれているセクションの連絡先情報を定義します。ページ全体に対するものなのかページ内の特定のコンテンツに対するものか区別して使用します。

もっと詳しく知りたい方にオススメの本

意訳するにあたり、下記の書籍を参考にしました。

HTMLを身につけたい！ HTML5をはじめるぞ！ という人に基礎からしっかり学べる一冊です。
HTMLで使用する各要素の正しい使い方だけでなく、セクションやアウトラインなどHTML5の新たな概念も学べます。
最近、書店で見かけなくなってきたので、未の人はお早めに。