この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
asideタグとは
asideタグのasideとは「余談」、「補足情報」を意味しており、HTMLにおいてはメインコンテンツに対する「補助的な内容」であることを示すタグです。補足や脚注、用語解説など、メインコンテンツとは直接関係無いが、触れておきたい情報を表し、asideタグ内のコンテンツを省いてもメインコンテンツに支障が出ない要素です。
asideタグの目的
asideタグはHTML文書の構造を明確にするセクショニングに関するタグの1つです。asdeタグを使用してセクショニングを明確にすることで、検索エンジンやスクリーンリーダーなどのプログラムが内容をより正確に把握することが可能になります。また後からソースコードを見たときにすぐに補足情報が記述されている部分であると把握できるため、保守性の向上にも繋がります。
その他のセクショニングタグにはheaderタグ、sectionタグ、articleタグ、navタグなどがあります。
- headerタグ：文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
- navタグ：ナビゲーションリンクを表す。グローバルナビゲーションなどに使う。
- articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
- sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
- footerタグ：直近のセクションに関する情報を示す。関連リンクや著作権情報など。
asideタグの使い方
asideタグはメインコンテンツに対して「補助的な内容」を表す要素に使用します。よくある使い方としては、本文中の補足情報に使用する他、「サイドバー」、「広告」、「関連記事へのリンク」、「SNSシェアボタン」などにも使われます。
本文中の補助的な内容に使用する例
以下の例は、本文中の補足情報に対してasideタグを使う例です。h2タグで示された「asideタグの使い方」という主題に対して補足的な情報をasideタグで囲います。
<article>
<h1>使用例1</h1>
<section>
<h2>asideタグの使い方</h2>
<p>ここに本文が入ります</p>
</section>
<aside>
<p>asideタグの使い方についての余談・補足情報</p>
</aside>
</article>
サイドバーに使用する例
サイドバーに対してasideタグを使用するケースもあります。
以下の例ではナビゲーションリンクをサイドバーに設置しています。ナビゲーションリンクなのでasideタグの子要素にnavタグを使用しています。
<body>
<main>
<article>
<h1>使用例1</h1>
<p>ここに本文が入ります</p>
</article>
</main>
<aside>
<nav>
<ul>
<li><a href=”#”>ホーム</a></li>
<li><a href=”#”>会社概要</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</nav>
</aside>
</body>
asideタグの注意点
複数回使用できる
asideタグは1ページ内で何度でも使用可能です。
asideタグの中にasideタグは入れられない
asideタグを入れ子にすることはできません。
文章中の括弧書きにasideタグを使用しない
文章内で括弧書きにたいしてasideタグを使用してはいけません。asideタグはブロックレベル要素なので、段落の途中で使用することが不適切なためです。
見出しは無くても問題ない
asideタグはセクショニングコンテンツのため、アウトラインを生成しますが、見出しが無くても、補足情報であるという性質上、特に問題ありません。
まとめ
本記事では、asideタグの役割と使い方を解説しました。asideタグでセクションニングを行うことで文書構造が明確になり、検索エンジンにサイト構造が理解されやすくなるメリットがあります。
