新しい要素が増えたことにより、ソースコードの可読性が上がった
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>© 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>© 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要素が書けると、たとえばブログの記事ごとにスタイルを書くことができます。サンプルページを作成するときなどに便利でしょう。