【HTML】aside要素の正しい使い方を分かりやすく解説!

シュウ

今回は「【HTML】aside要素の正しい使い方を分かりやすく解説!」
についての解説になります！

こんな方に読んでほしい

HTML5を学び始めた方へ
asideの使い方について学びたい方へ
今回はaside要素について記事を書いております

上の図のように、aside要素とは記事の内容と関連はしているが、メインコンテンツではない余談・補足の情報を示します。

主なHTML5タグ

section　
解説の記事ありますよ
sectionタグは章や節といったまとまりを示すために使用します。
main　
解説の記事ありますよ
mainタグとはHTML文書のメインコンテンツを示します。
article　
解説の記事ありますよ
articleタグとはHTML文書の独立した記事の箇所を示します。
header・nav・footer　
解説の記事ありますよ
header・nav・footer要素とはセクションの情報を示すタグになります。

[記事の内容]

aside要素について

aside要素とは「バナー広告」や「関連記事」、「補足情報」、「サイドバーのカテゴリ一覧」など
余談・補足の情報を示します。

記事内の補足情報としてaside要素を使用する方法

記事内のaside要素として使用したい場合はarticle〜/articleの中にHMLを記述するように
しましょう。

記事内の補足情報


<body>
 <article>
  <h1>記事のタイトル</h1>
  <p>記事本文のテキスト</p>	
 
 <!--aside-->
  <aside>
   <h2>補足情報のタイトル</h2>
   <p>補足のテキスト....</p>
  </aside>
 <!--aside ここまで-->

 </article>
</body>

ポイント01
article要素内にasideを使用する際には、必ず記事のタイトルや記事本文と紐付く内容にしておきましょう。

サイドバーのaside要素として使用する方法

サイドバーのaside要素として使用した場合は「記事のカテゴリー」や、「関連のリンク」、「バナー広告」など
余談・補足の情報を示します。

サイドバーのaside要素

<body>
 <main>
 <!--省略-->
 </main>	

 <div id="sidebar">	 
  <!--aside-->
   <aside>
    <ul>
     <li><a href="#">カテゴリー1</a></li>
     <li><a href="#">カテゴリー2</a></li>
     <li><a href="#">カテゴリー3</a></li>
    </ul>
   <ol>
    <li><a href="#">バナー広告</a></li>
    <li><a href="#">バナー広告</a></li>
   </ol>
  </aside>
  <!--aside ここまで-->
 </div>

</body>

ポイント02
aside要素は複数の使用が可能です。
ただし、aside要素の入れ子にaside要素はできません。