HTMLのasideタグの使い方！補足情報をマークアップ

html

HTMLのasideタグについて書いています。

asideタグは、Webページの主要なコンテンツとは直接関連しないが、補足的な情報や関連するコンテンツを示すために使用されます。
サイドバー、引用、広告、関連リンク集など、主要コンテンツを補完する要素をマークアップするのに適しています。

asideタグの基本的な使い方と配置

asideタグは、補足的なコンテンツを囲むだけで使用できます。
通常、mainタグの内側や外側に配置され、主要なコンテンツとの関連性を示すために使用されます。

<body>
  <main>
    <article>
      <h2>メインコンテンツのタイトル</h2>
      <p>主要なコンテンツの本文...</p>
    </article>
    <aside>
      <h3>関連記事</h3>
      <ul>
        <li><a href="/article1">関連記事1</a></li>
        <li><a href="/article2">関連記事2</a></li>
      </ul>
    </aside>
  </main>

  <aside>
    <h3>広告</h3>
    <img src="ad.png" alt="広告" width="250">
  </aside>

  <footer>
    <p>© 2025 〇〇株式会社</p>
  </footer>
</body>

上記の例では、<main>要素内の関連記事リストと、<main>要素外の広告をasideタグでマークアップしています。
ブラウザで確認すると、下記のように表示されました。
HTMLのasideタグの表示確認

asideタグの意味合いと重要性

asideタグは、囲まれたコンテンツが主要なコンテンツとは区別され、補足的または関連する情報であることを示す意味合い（セマンティクス）を持っています。
これは、単にコンテンツをサイドに配置するためだけでなく、Webページの構造を明確にし、検索エンジンやスクリーンリーダーなどの支援技術が補足的なコンテンツを認識できるようにするために重要です。

asideタグとアクセシビリティ

asideタグを適切に使用することは、Webサイトのアクセシビリティ向上に貢献します。

  • ランドマーク要素: asideタグは、ARIA landmark roleのcomplementaryを暗黙的に持ちます。これにより、スクリーンリーダーなどの支援技術のユーザーは、主要なコンテンツを補完する関連情報セクションに直接ジャンプすることができます。
  • 構造の理解: asideタグを使用することで、Webページの主要なコンテンツと補足的なコンテンツが明確に区別され、支援技術のユーザーがコンテンツの役割を理解しやすくなります。
  • 適切な見出し: asideタグ内には、内容を適切に表す見出し (<h3> など) を含めることが推奨されます。これにより、補足情報の構造がより明確になり、アクセシビリティが向上します。

asideタグの使用例

asideタグは、以下のような補足的なコンテンツをマークアップする際に使用します。

  • サイドバー: 関連する記事へのリンク、広告、著者の情報、目次など。
  • 引用: 主要なテキストから分離された引用文。
  • 広告: Webページ内の広告ユニット。
  • 関連リンク集: 主要なコンテンツに関連する外部サイトへのリンク集。
  • 注釈、補足: 本文の内容を補足する情報。
  • 用語集: 主要なコンテンツで使われている専門用語の説明。

asideタグは、<main>タグの内外どちらにも配置できますが、配置場所によって主要なコンテンツとの関連性の強さが暗示されます。
<main>内に配置されたasideタグは、その主要コンテンツに強く関連していると解釈されることが多いです。

asideタグを使用する際の注意点

  • 補足的なコンテンツに限定する: asideタグは、Webページの主要なコンテンツではなく、それを補完する情報に対してのみ使用するべきです。主要なコンテンツをasideタグで囲むのは適切ではありません。
  • 関連性を持たせる: asideタグで囲むコンテンツは、そのWebページまたはそのセクションの主要なコンテンツと何らかの関連性を持つべきです。
  • 適切な見出し要素: asideタグ内には、内容を適切に表す見出し要素 (<h3> など) を含めることが推奨されます。
  • 主要コンテンツとの区別: CSSを使用して、asideタグで囲まれたコンテンツが主要なコンテンツとは視覚的に区別できるようにスタイリングすることが望ましいです。

asideタグの記述例

以下に、様々な補足的なコンテンツをasideタグでマークアップした例を示します。

<main>
  <article>
    <h2>最新のテクノロジー動向</h2>
    <p>主要なコンテンツ...</p>
  </article>
  <aside>
    <h3>執筆者について</h3>
    <p>山田 太郎：〇〇株式会社のエンジニア。最新技術に詳しい。</p>
    <a href="/authors/yamada-taro">執筆者の詳細</a>
  </aside>
</main>

<article>
  <h2>〇〇に関する解説</h2>
  <p>主要なコンテンツ...</p>
  <aside>
    <h3>用語解説</h3>
    <dl>
      <dt>AI</dt>
      <dd>人工知能...</dd>
      <dt>IoT</dt>
      <dd>モノのインターネット...</dd>
    </dl>
  </aside>
</article>

<aside>
  <h3>人気の記事</h3>
  <ul>
    <li><a href="/popular/1">人気記事1</a></li>
    <li><a href="/popular/2">人気記事2</a></li>
    <li><a href="/popular/3">人気記事3</a></li>
  </ul>
</aside>

まとめ

asideタグは、Webページの主要なコンテンツを補完する情報や関連コンテンツを意味的にマークアップするための重要なHTML要素です。
サイドバー、引用、広告、関連リンク集など、主要コンテンツを補強する要素を適切にasideタグで囲むことで、Webページの構造が明確になり、アクセシビリティが向上し、ユーザーにとってより理解しやすいWebサイトを構築することができます。

補足的なコンテンツをマークアップする際には、積極的にasideタグを活用しましょう。

HTML
yasuaki

コメント