【HTML】asideタグで関連する内容をページ中で定義する

asideタグHTML
書いてる人
あいりゅー

プログラミングを学びながら更新しています。
iPhone/iPad/Mac/Apple WatchなどのApple製品はこちらで主に更新しています。
麻雀の反省をひたすら掲載してるブログもやってます。

あいりゅーをフォローする

このページについて

このページではHTMLで使えるasideタグでページの内容に関連する内容をページ中で定義する方法を解説しています。

asideタグ

asideはコンテンツとは別だけども、そのコンテンツに関連のある内容をページ中で定義する機能を持っています。ちなみにasideは「余談」とかいう意味になります。

その名の通り、asideはメインのコンテンツでは無く「メインのコンテンツに関係あること」に対して使います。そしてこのasideはよくサイドバーなどに使われます

asideはブロック要素です。使用するとその前後に改行が追加されます。

asideタグの書き方

asideは関連コンテンツを囲むだけでOKです。

<p>メインコンテンツ</p>
<aside><p>関連する内容</p></aside>
<p>メインコンテンツの続き</p>

このように中間に挟むこともできます。

asideタグはレンダリングされても何も変化はありません。CSSで独自のスタイルを適用させることでより見やすくしたりする事ができます。

asideタグで使える属性

aside専用で使えるような属性は無く、グローバル属性とイベント属性の2種類に対応しています。

まとめ

asideはページ中のコンテンツそのものでは無く、そのコンテンツに関連する内容に対して使います。あとはメニューバーやサイドバーなど、そういったところにもよく使われます。

HTMLの基礎
HTMLってどんな言語?書き方やHTMLファイルの作成方法などを解説。
HTMLタグで押さえておきたいポイント3選
HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
HTMLタグと属性一覧
HTMLタグと属性の一覧です。
tableタグ生成ページ
tableタグの基本形を生成できるページです。
ulタグ・olタグ生成ページ
ulタグolタグの基本形を生成できるページです。
タイトルとURLをコピーしました