<aside>はサイドメニューや広告など、メインコンテンツと関連性の低い要素を表わすHTMLタグです。
| 要素 | 説明 |
|---|---|
| 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 要素の開始タグと終了タグの間にフロー・コンテンツを含めることができる。
data- の接頭辞を付ければ、任意の属性名にすることができる。
<aside id="a1" data-author="tsuka" data-publisher="Puffin">
</aside>| 値 | 値 |
|---|---|
| ltr | 左から右へ記述する (日本語や英語など) |
| rtl | 右から左へ記述する (アラビア語など) |
| auto | ユーザーエージェントに決定させる |
| 値 | 説明 |
|---|---|
| en | 英語 |
| en-UK | 英語（イギリス） |
| en-US | 英語（アメリカ） |
| ja | 日本語 |
| ja-JP | 日本語（日本） |
| th | タイ語 |
| th-TH | タイ語（タイ） |
aside要素は次に示すカテゴリに属する。
aside要素はセクショニング・コンテンツが期待される場所で使用できる。
JavaScriptからは HTMLElement インタフェースを通じて aside 要素へアクセスできる。
HTMLElement インタフェースは、以下に示すプロパティを持つ。
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><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><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>Web Hypertext Application Technology Working Group (2023) Sections HTML Living Standard