HTML Living Standard/aside

aside 要素

<aside> 要素は、文書の主要な内容からやや離れた補足情報や関連情報を示すためのセマンティック要素です。サイドバーや註釈、関連リンク、広告など、文書に関連しつつも主要な流れには直接関与しないコンテンツを含むのに適しています。

概要

役割: 文書の補足情報や付随するコンテンツを示す。
主な用途:
- サイドバーのコンテンツ
- 補足的なリンク
- 文書やセクションの註釈や追加情報
- 関連する広告

使用例

基本的な使用例

以下は、文書のサイドバーとして <aside> を使用した例です。

<aside>
  <h2>関連リンク</h2>
  <ul>
    <li><a href="/faq">よくある質問</a></li>
    <li><a href="/support">サポートページ</a></li>
  </ul>
</aside>

註釈としての使用例

文書内の特定の部分に関連する註釈を示す場合にも <aside> を使用できます。

<article>
  <h1>HTMLの歴史</h1>
  <p>HTMLは、1990年代初頭にティム・バーナーズ＝リーによって開発されました。</p>
  <aside>
    <p>註記: ティム・バーナーズ＝リーは「ワールドワイドウェブの父」として知られています。</p>
  </aside>
</article>

属性

<aside> 要素は、グローバル属性をサポートします。

グローバル属性の例

以下は、class と id 属性を使用して <aside> をスタイリングおよび識別する例です。

<aside id="related-articles" class="sidebar">
  <h2>関連記事</h2>
  <ul>
    <li><a href="/article1">記事1</a></li>
    <li><a href="/article2">記事2</a></li>
  </ul>
</aside>

`<aside>` 要素の仕様

許可される親要素: フローコンテンツを含む任意の要素（例: <body>、<section>、<article> など）。
含めることができる子要素: 任意のフローコンテンツ（例: 見出し、段落、リストなど）。

不適切な使用例

主要な文書内容そのものを <aside> 要素内に含めるべきではありません。補足的な内容に限定してください。

アクセシビリティの考慮

ランドマーク役割: <aside> 要素は補足的な情報を示すため、支援技術を利用するユーザーにとって文書構造が明確になります。
適切なラベル付け: <aside> 要素を識別しやすくするために、aria-label または aria-labelledby を活用することが推奨されます。

例

<aside aria-label="補足情報">
  <p>この記事の執筆者に関する情報を含みます。</p>
</aside>

ベストプラクティス

補足情報に限定: <aside> 要素は、主要な文書内容とは直接関係しない補足的な情報に使用してください。
文書全体を明確にする: 文書構造が明確になるように <aside> 要素を適切に配置します。
適切なスタイリング: サイドバーや註釈として視覚的にわかりやすくするため、CSS を利用してスタイリングします。

使用上の注意

文書の流れを乱さない: <aside> 要素が主要な文書内容の理解を妨げないよう注意してください。
関連性を保つ: <aside> 内の内容は、文書全体またはそのセクションに関連しているべきです。

まとめ

<aside> 要素は、文書の主要な流れに関連する補足情報や付随するコンテンツをセマンティックに表現するための重要なツールです。適切に使用することで、文書構造を向上させ、ユーザーエクスペリエンスを向上させます。