いまさらHTML,CSS講座 > HTML5 > aside要素 - セクション -

aside要素

aside要素はメインのコンテンツと少なからずも関連があり、なおかつ、メインとなるコンテンツから切り離されてもメイン・コンテンツに影響がないようなコンテンツで構成されるページのセクションを表します。例えば、記事のリード、またはサイドバーのようなタイポグラフィカルな効果を表すセクションや、コンテンツ連動型の広告や、コンテンツと関連のある広告、ブログロールなどのnav要素のグループなどが考えられます。

例）

<body>
<header>
<h1>ドキュメントタイトル</h1>
<p><a href="xxxxx.html">News</a> -<a href="xxxxx.html">Blog</a> -<a href="xxxxx.html">Forums</a></p>
<p>Last Modified:20XX-XX-XX</span></p>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="xxxxx.html">All Entries</a></li>
<li><a href="xxxxx.html">Entry 1</a></li>
<li><a href="xxxxx.html">Entry 2</a></li>
</ul>
</nav>
</header>

<main>
<article>
<header>
<h2>記事タイトル</h2>

<aside>
<p>記事のリードのセクション</p>
</aside>
</header>

<div>
<p>内容</p>
<p>内容</p>
</div>

<footer>
<p>Posted 20XX-XX-XX</p>
</footer>
</article>
...more blog posts...
</main>

<aside>
<nav>
<h3>Related Links</h3>
<ul>
<li><a href="http://example.ttt.jp/">example site1</a></li>
<li><a href="http://example.sss.jp/">example site2</a></li>
</ul>
</nav>

<nav>
<h3>Friends of the blog</h3>
<ul>
<li><a href="http://example.aaa.jp/">AAAさんのブログ</a></li>
<li><a href="http://example.bbb.jp/">BBBさんのブログ</a></li>
<li><a href="http://example.bbb.jp/">CCCさんのブログ</a></li>
</ul>
</nav>
</aside>

<footer>
<p>Copyright c 2014 The Example Company</p>
<p><a href="xxxxx.html">About</a> -<a href="xxxxx.html">Privacy Policy</a> -<a href="xxxxx.html">Contact Us</a></p>
</footer>
</body>

上記のHTMLドキュメント

カテゴリ
フロー・コンテンツ、セクショニング・コンテンツ、パルパブル・コンテンツ。
要素を使用することができる場所
フロー・コンテンツが使用できる場所。
コンテンツ モデル（内容に含めることのできる要素）
フロー・コンテンツ（main要素を除きます。）
コンテンツ属性
グローバル属性。