HTML <aside> element

<aside>はサイドメニューや広告など、メインコンテンツと関連性の低い要素を表わすHTMLタグです。

Figure 1. aside

HTML

HTMLの場合、タグ名及び属性名は大文字と小文字を区別しない。

<ASIDE>
  <!-- flow content -->
</ASIDE>

XHTML

XHTMLの場合、タグ名及び属性名は小文字で記述する。

<aside>
  <!-- flow content -->
</aside>

使用例

<body>
  <header>
    <img src="logo.png">
  </header>
  <main>
    <!-- main content -->
  </main>
  <aside>
    <nav>
      <ul>
        <li>
          <a href="/">home</a>
        </li>
      </ul>
    </nav>
  </aside>
  <footer>
    <p>© 2001 Tsukamoto Hiroyuki</p>
  </footer>
</body>

属性

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。
dir
テキストを記述する方向を指定する。
dir属性
値 値
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
id
HTML文書内で一意な識別子を指定する。
lang
何語で記述されているかを指定する。
lang属性
値 説明
en 英語
en-UK 英語（イギリス）
en-US 英語（アメリカ）
ja 日本語
ja-JP 日本語（日本）
th タイ語
th-TH タイ語（タイ）
onblur
要素がフォーカスを失ったときに実行するJavaScript
onclick
要素がクリックされたときに実行するJavaScript
ondblclick
要素がダブルクリックされたときに実行するJavaScript
onkeydown
キーを押したときに実行するJavaScript
onkeypress
キーを押して離したときに実行するJavaScript
onkeyup
キーを離したときに実行するJavaScript
onmousedown
マウスのボタンが押下されたときに実行するJavaScript
onmousemove
マウスポインタを要素内で動かしたときに実行するJavaScript
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行するJavaScript
onmouseover
マウスカーソルが乗ったときに実行するJavaScript
onmouseup
マウスのボタンを押下した後で離すときに実行するJavaScript
oncontextmenu
要素上でマウスの右ボタンをクリックしたときに実行するJavaScript
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

カテゴリ

aside要素は次に示すカテゴリに属する。

この要素が使用できるコンテキスト

aside要素はセクショニング・コンテンツが期待される場所で使用できる。

内容

aside要素の内容にはフロー・コンテンツを含めることができる。具体的には次の要素である。

タグの省略

aside要素の開始タグおよび終了タグは、共に省略できない。

JavaScript

JavaScriptからは HTMLElement インタフェースを通じて aside 要素へアクセスできる。

参考文献

Web Hypertext Application Technology Working Group (2022) "Sections" HTML Living Standard