HTMLの <aside> タグ

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

header, main, footer and aside
Figure 1. header, main, footer and aside
グルーピングとセクショニング
要素 説明
address 連絡先
article 独立した記事
aside コンテンツとは無関係なもの（広告等）
div 意味的ではなく視覚的な区切り
figure 図とキャプション
footer フッター
header ヘッダー
hgroup 見出し、サブタイトル及びリード文
main メインコンテンツ
nav ナビゲーション
section 意味的な区切り

構文

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 から読み取るための仕組みである。data- の接頭辞を付ければ、任意の属性名にすることができる。 
<aside id="a1" data-author="tsuka" data-publisher="Puffin">
</aside>
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
HTML 要素の accessKey 属性
accessKeyLabel
HTML 要素に割り当てられたアクセスキー（読取り専用）
autocapitalize
HTML 要素の autocapitalize 属性
contentEditable
HTML 要素の contenteditable 属性
dataset
HTML 要素のカスタムデータ属性

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

<aside id="a1" data-author="tsuka" data-publisher="Puffin">
</aside>
<script>
  const e = document.querySelector('#a1')
  if ('author' in e.dataset === true) {
    console.log(e.dataset.author)
  }
  if ('publisher' in e.dataset === true) {
    console.log(e.dataset.publisher)
  }
</script>
dir
HTML 要素の dir 属性
draggable
HTML 要素の draggable 属性
hidden
HTML 要素の hidden 属性
inert
HTML 要素の inert 属性
innerText
HTML 要素のテキストをレンダリングされた状態で返す。値を代入する場合は、テキストのみを置き換える。 
<aside>
  <p>old</p>
</aside>
<script>
  let aside = document.querySelector("aside");
  console.log(aside.innerText); // "old"
  aside.innerText = "new";
</script>

JavaScript 実行後の HTML は以下のように変化する。

<aside>
  <p>new</p>
</aside>
isContentEditable
HTML 要素が編集できるかどうか（読取り専用）
lang
HTML 要素の lang 属性
outerText
HTML 要素のテキストをレンダリングされた状態で返す。値を代入する場合は、コンテンツ全体を置き換える。 
<aside>
  <p>old</p>
</aside>
<script>
  let aside = document.querySelector("aside");
  console.log(aside.outerText); // "old"
  aside.outerText = "new";
</script>

JavaScript 実行後の HTML は以下のように変化する。

<aside>
  new
</aside>
spellcheck
HTML 要素の spellcheck 属性
style
HTML 要素の style 属性
tabIndex
HTML 要素の tabIndex 属性
title
HTML 要素の title 属性
translate
HTML 要素の translate 属性

参考文献

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