<aside> 本筋から分離しても問題のない余談や補足を表す
取り扱い | 現行の標準 |
カテゴリ |
フロー・コンテンツ セクショニング・コンテンツ パルパブル・コンテンツ |
親にできる要素 | フロー・コンテンツを受け入れる要素 |
子にできる要素 | フロー・コンテンツ |
対応ブラウザ | caniuseで確認 |
<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">
<address>
<h1>プロフィール</h1>
<p>運営者への連絡先</p>
</address>
<aside>
<h2>今日の一言</h2>
<p>余談を表す内容。</p>
</aside>
<ul>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
<li>リンク</li>
</ul>
<aside>
<h3>スポンサードリンク</h3>
<div>コンテンツに関連する告知や広告</div>
</aside>
</div>
<footer>
<small>コピーライト</small>
</footer>
</body>
<aside>に関連するHTMLタグ
文書の構造を組み立てる要素 | |
---|---|
<article> | 自己完結した記事であることを示す |
<section> | 文書構造におけるセクションを定義する |
<aside> | 本筋から分離しても問題のない余談や補足を表す |
<nav> | ページ上の主要なナビゲーションであることを表す |
<header> | セクションの先頭となるグループを表す |
<footer> | セクションのフッターを表す |
<h1> 〜 <h6> | 文書やセクションの見出しを表す |
<p> | 文章の段落を指定する |