Snippet-Editor.com

ブログのサイドバーをHTML5流のセマンティクスにする

<aside>
<div class="aside">

<section>
<div class="section">
<h1>SIDEBAR TITLE HERE</h1>
<ul>
	<li>LIST ITEM</li>
	<li>LIST ITEM</li>
	<li>LIST ITEM</li>
</ul>
</div><!-- /section -->
</section>

<section>
<div class="section">
<h1>SIDEBAR TITLE HERE</h1>
<ul>
	<li>LIST ITEM</li>
	<li>LIST ITEM</li>
	<li>LIST ITEM</li>
</ul>
</div><!-- /section -->
</section>

</div><!-- /aside -->
</aside>

セマンティクスと横文字で攻めて見ましたが、要するに「意味」という意味です。

HTML5では、サイドバーはasideタグ。見出しを含む一塊はsectionタグで記述します。

各sectionタグの内側はh1から始めることができるので、サイドバーの見出しレベル論争（そういうものがあるとしたら）も終焉を迎えそうです。

現在は過渡期にあるので、CSSは全て冗長気味に書いてあるdivタグ（div.aside, div.section）の方に当てました。

なお、asideタグやsectionタグを使用するためには、DoctypeをHTML5にする必要がありますので、下をご参考までに。CSSもお忘れなく。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>aside, section { display: block; }</style>
</head>
<body>
</body>
</html>

表示させるだけなら、IE6でも特に問題はありませんでした。その他、Firefox 3以降、Safari 4以降、ChromeとOperaの最新版で確認してあります。

10/4, 2010 | Lang: HTML| Tags: , , | Author: tomohiro_kasuga