Tweet

Pocket

HTML5におけるaside要素の使用例を紹介します。

aside要素は、主要なコンテンツと少し関連性のある内容をマークアップします。具体的にはサイドメニューや広告等で使用します。

<aside>
　　<h2>記事検索</h2>
　　<form method="get" action="index.php">
　　　　<input type="hidden" name="amount" value="0" />
　　　　<input type="hidden" name="blogid" value="1" />
　　　　<input name="query" alt="検索キーワード" class="formfield" size="10" maxlength="60" accesskey="4" value="" />
　　　　<input type="submit" alt="検索" value="検索" class="formbutton" />
　　</form>
　　
　　<h2>最新記事</h2>
　　<ul>
　　　　<li><a href="item1">記事1</a></li>
　　　　<li><a href="item2">記事2</a></li>
　　　　<li><a href="item3">記事3</a></li>
　　</ul>
　　
　　<h2>カテゴリー</h2>
　　<ul>
　　　　<li><a href="category1">カテゴリー1</a></li>
　　　　<li><a href="category2">カテゴリー2</a></li>
　　　　<li><a href="category3">カテゴリー3</a></li>
　　</ul>
　　
　　<h2>アーカイブ</h2>
　　<ul>
　　　　<li><a href="archive1">2011年5月</a></li>
　　　　<li><a href="archive2">2011年4月</a></li>
　　　　<li><a href="archive3">2011年3月</a></li>
　　</ul>
</aside>

上記例のように、検索窓、最新記事、カテゴリー、アーカイブなど、主要コンテンツであるブログ記事記事を補足したり、付随するものをasideでマークアップします。