SHU BLOG

BLOG NEWS ブログ

TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【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要素を使用する方法

記事内の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要素

サイドバーの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要素はできません。

まとめ

今回はこれで以上です。

POINT
  • aside要素とは記事の内容と関連はしているが、メインコンテンツではない余談・補足の情報を示します。
  • article要素内にasideを使用する際には、必ず記事のタイトルや記事本文と紐付く内容にしておきましょう。
  • aside要素は複数の使用が可能です。
  • aside要素の入れ子にaside要素はできません。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top