ウェブランサー

<aside> 本筋から分離しても問題のない余談や補足を表す

取り扱い HTML5から追加された要素
カテゴリ フロー・コンテント
セクショニング・コンテント
パルパブル・コンテント
親にできる要素 フロー・コンテンツが期待される場所
子にできる要素 フロー・コンテンツ
対応ブラウザ <aside>の対応状況を確認する

<aside>タグの説明

<aside>は、親要素に含まれる情報の中で、本筋とは別に触れておきたい余談や補足、または本筋から分離して問題のない内容を含んだセクションを表します。

よくあるウェブページの構成では、ヘッダー、メインコンテンツ、サイドバー、フッターの中で、サイドバーに使われることが考えられます。サイドバーは、メインコンテンツに対して関連するが本筋には影響しない補足情報が含まれていることが多いからです。

ただし、サイドバーを設置する場合に、必ずしも<aside>を使うことが推奨される訳ではありません。あくまで、ドキュメントに書かれている内容に適切な意味を付与していくようなマークアップが求められます。<aside>は、レイアウト目的で使用されるべきではないという点に注意してください。

メインコンテンツの中でも、本文ほど重要ではないが、関連する情報を書き残しておきたいという場合に用いることが考えられます。適用範囲は、あくまで余談や補足情報です。その内容を除外した時に、本筋の意味やコンテクストが失われてしまうような箇所に使うことは避けて下さい。

<aside>タグの特徴

<aside>はページ内に複数使うことができます。この要素自体を入れ子構造にすることはできません。

この要素はセクショニングコンテントなので、文章構造のアウトラインに影響を与えます。原則として見出しを含むことを想定していますが、無くても問題ないようです。

<aside>タグに指定できる属性

グローバル属性
基本的に全てのHTML要素に共通で指定できる属性です。
イベントハンドラ
基本的に全てのHTML要素に指定することができるコンテンツ属性です。

<aside>タグの使い方とサンプル

<aside>は、ドキュメントのアウトラインに影響を与えるセクショニングコンテントです。各要素との相対的な関係、文章に書かれている内容に対して適切な範囲に記述しましょう。

以下は<aside>の使用例として比較的シンプルな内容です。

HTML
<article>
	<h1>文章のタイトル</h1>

	<section>
		<h2>文章の小見出し</h2>
		<p>この文章の段落。この文章の段落。</p>
		<p>この文章の段落。この文章の段落。</p>
	</section>

	<section>
		<h2>文章の小見出し</h2>
		<p>この文章の段落。この文章の段落。</p>
		<p>この文章の段落。この文章の段落。</p>
	</section>

	<aside>
		<h3>余談</h3>
		<p>本筋から省いても問題ない範囲の関連情報。</p>
	</aside>
</article>

<aside>の中には、原則として見出しを付けた方が良いと考えられます。文章構造上、各セクションの役割りが明確になり、見出しと内容のセットで一つのまとまりにすることで、視覚的にも分かりやすいというメリットがあるからです。

次の例は、サイドバーに<aside>を用いた時の使われ方を示しています。

HTML
<body>
	<header>
		<h1>サイト名</h1>
		<h2>このサイトのキャッチコピー</h2>
		<nav>
			<ul>
				<li><a href="home">ホーム</a></li>
				<li><a href="blog">ブログ</a></li>
				<li><a href="contents">コンテンツ</a></li>
				<li><a href="sitemap">サイトマップ</a></li>
				<li><a href="contact">コンタクト</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<h1>コンテンツの見出し</h1>
		<p>コンテンツの説明。コンテンツの説明。</p>
		<article>
			<h1>独立した文章のタイトル</h1>
			<p>この文章の段落。この文章の段落。</p>
			<p>この文章の段落。この文章の段落。</p>
			<aside>
				<h2>余談</h2>
				<p>本筋から省いても問題ない範囲の関連情報。</p>
			</aside>
		</article>
		<section>
			<h2>子コンテンツ</h2>
			<p>コンテンツの内容</p>
		</section>
		<section>
			<h2>子コンテンツ</h2>
			<p>コンテンツの内容</p>
		</section>
	</main>

	<div id="sidebar">
		<aside>
			<h3>プロフィール</h3>
			<p>サイト運営者の情報</p>
		</aside>
		<aside>
			<h3>スポンサードリンク</h3>
			<p>広告などを設置する場所</p>
		</aside>
	</div>

	<footer>
		<small>コピーライト</small>
	</footer>
</body>

<aside>に関連するHTMLタグ

セクション要素
<address> 連絡先(問い合わせ先)として扱う
<article> 自己完結した記事であることを示す
<aside> 本筋から分離しても問題のない余談や補足を表す
<body> ページ本体の表示領域
<footer> セクションのフッターを表す
<h1> 〜 <h6> 見出しを指定する
<header> セクションの先頭となるグループを表す
<hgroup> 見出しをグループ化してセクションのヘッダを表す
<nav> ページ上の主要なナビゲーションであることを表す
<section> ウェブページ内の文章構造におけるセクションを定義する