このページの本文へ

ここが変わった!HTML5マークアップ入門 (3/6)

2011年08月01日 13時00分更新

文●浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

新しい要素が増えたことにより、ソースコードの可読性が上がった

 HTML5では、ヘッダーを表す「header」、ナビゲーションを表す「nav」など、新しい要素が追加されています。XHTML1.0などでは多くの部分にdiv要素が使われていましたが、HTML5では新しい要素へ適切に置き換えることで、より詳細な意味を持たせられるだけでなく、ソースコードの可読性の向上が期待できます。

XHTML1.0


<div class="header">
 <h1>Title</h1>
 <p>text text</p>
</div>
<div class="article">
 <div class="header">
  <h2>Entry title</h2>
 </div>
 <p>entry...</p>
 <p>entry...</p>
 <div class="footer">
  <p>2011-07-07</p>
 </div>
</div>
<div class="footer">
 <p>&#169; 2011 hamashun</p>
</div>

HTML5


<header id="siteHeader">
 <h1>Title</h1>
 <p>text text</p>
</header>
<article>
 <header class="articleHeader">
  <h2>Entry title</h2>
 </header>
 <p>entry...</p>
 <p>entry...</p>
 <footer class="articleFooter">
  <p>2011-07-07</p>
 </footer>
</article>
<footer id="siteFooter">
 <p>&#169; 2011 hamashun</p>
</footer>

a要素がブロック的な要素を含められるようになった

 たとえば以下のようなデザインのボタンの場合、本来はボタン全体がリンク領域になっていることが期待されます。しかし、XHTML1.0などではa要素はブロック要素を含められなかったので、スクリプトを使うなどの手間が必要でした。

 HTML5では、条件に従えばa要素もブロック的な要素を含められます。

XHTML1.0


<div>
 <h3>レトロ自転車</h3>
 <p>2011-07-07</p>
</div>

HTML5


<a href="index"><div>
 <h3>レトロ自転車</h3>
 <p>2011-07-07</p>
</div></a>

style要素が条件付きでbody要素内に書けるようになった

 XHTML1.0などでは、style要素はhead要素の中にしか記述できませんでしたが、HTML5ではscoped属性を指定して、いくつかのルールに従うことで、body要素の中にも記述できるようになりました。

HTML5


<p>text text</p>
<div id="sample">
 <style scoped="scoped">
  p { color: red; }
 </style>
 <p>text text</p>
</div>

 body要素内にもstyle要素が書けると、たとえばブログの記事ごとにスタイルを書くことができます。サンプルページを作成するときなどに便利でしょう。

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています