Re:犯してはいけないHTMLタグの過ち10個

ネタ元：犯してはいけないHTMLタグの過ち10個

基本的には良い記事なんだけども、原文が2年近く前の物でXHTMLを前提に書かれているので少しだけ内容が古いかなと思ったりします。

1. インライン要素の中にブロック要素を入れない

<a href="#"><h2>これは間違いです</h2></a>

aタグのようなインライン要素の中にhタグのようなブロック要素を入れてはいけません、となってるけどこれはHTML5的にはこれはあり。

a要素は基本的にフロー・コンテンツが記述できる場所に記述できます。ただ、他のほとんどのインライン要素はフレージング・コンテンツしか内包できないのでNG。

<span><h2>これは間違いです</h2></span>

HTML5だとコンテンツモデルの概念が変わっているので要注意。

参考：コンテンツ・モデル - HTML5タグリファレンス - HTML5.JP

2. 画像に代替テキストのalt属性が入っていない

HTML5ではalt属性はオプション扱いで省略可能です。ちょっとここら辺はややこしいのですが、代替テキストの記述は推奨されますが、alt属性を省略することで意図的に代替テキストを利用しないことができるようになってます。代表的な例ではキャプションとして代替テキストが存在しており、alt属性に記述することで重複してしまう場合などでしょう。

参考：img 要素 - 組込コンテンツ - HTML要素 - HTML5 タグリファレンス - HTML5.JP

5. 改行を連続して使っている

これに関してはいろいろな意見があるのですが、p要素は段落を表現する為の要素で重複するbr要素を表現するものではありません。

どういうことかというと、連続している改行が段落という意図で利用されている場合はp要素で問題ないのですが、連続する改行が文間の間や静寂を表現しようとして利用されている場合はp要素とCSSで表現してしまうと、もとの文章の表現意図が損なわれてしまいます。

こういった「空行」の表現は日本のブログ文化や詩などの表現手法として存在します。(読み手が読みやすいかどうかは別にして)

そういった場合、重複するbr要素やpre要素などを利用して改行を表現するのもありではないかなと思います（異論があるのも理解しています）。

7. 要素に対して直接スタイルを指定している

某docomoな携帯電話などインラインスタイルしか受け付けないデバイスがあるという問題もあるのですが、使い回さないCSSをスタイルシートに書くのってめんどくさいですよね。

そういった際に利用できるのがHTML5のstyle要素のscoped属性です。scoped属性を利用することで、特定のコンテンツ内用のCSSをHTML文章内に記述できます。

<p>example text</p>     <!-- 赤くならない -->
<section>
  <style scoped="scoped">
  p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

参考:hamashun.me : HTML5のstyle要素が持つscoped属性について

便利そうですがstyle属性と同じで使いどころを間違えるとメンテナビリティが大幅に低下しますので、利用の際には注意してください。

スポンサードリンク

«CSS Nite LP, Disk 15「ソーシャルメディア特集」 | メイン | 「Web Intents」でTwitterの機能をサイトに埋め込む»