HTMLの <aside> タグ

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

Figure 1. aside

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。aside要素の終了タグは省略できない。

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

サンプル

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>

コンテンツモデル

aside要素の開始タグと終了タグの間にはフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

属性

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要素はセクショニング・コンテンツが期待される場所で使用できる。

JavaScript

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

HTMLElementインタフェースのプロパティ
プロパティ 型 説明
accessKey string accessKey属性
accessKeyLabel string 要素に割り当てられたアクセスキー（読取り専用）
contentEditable string contenteditable属性
isContentEditable boolean この要素が編集できるかどうか（読取り専用）
dataset DOMStringMap カスタムデータ属性
dir string dir属性
draggable boolean draggable属性
innerText string ノードに描画されるテキスト
lang string lang属性
style string style属性
tabIndex number tabIndex属性
title string title属性

JavaScriptからaside要素のカスタムデータ属性を取得する例を以下に示す。

<aside id="p1001" data-author="tsuka" data-publisher="Puffin">
</aside>
<script>
  const e = document.querySelector('#p1001')
  if ('author' in e.dataset === true) {
    console.log(e.dataset.author)
  }
  if ('publisher' in e.dataset === true) {
    console.log(e.dataset.publisher)
  }
</script>

参考文献

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