aside要素 - 無関係なコンテンツ

2017/02/09

aside要素は、周りのコンテンツから逸脱していることを表す要素です。この要素を切り離してもコンテンツに影響がない、別コンテンツとみなせる内容でなければいけません。例えば、広告や人気記事一覧、著者情報やSNSのウィジェットなどが該当します。テキスト内の()表記をaside要素で囲むのは適切ではありません。

概要

名前

aside (Aside)

カテゴリ

Flow content

Sectioning content

Palpable content

配置できる場所

Flow contentが期待される場所。ただし、main要素を子孫にしてはいけません。

コンテンツモデル

Flow content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

Chrome / Firefox / Safari

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}
article {
    display: block;
}

aside {
	display: block;
	unicode-bidi: isolate;
}

:focus {
	outline-color: -webkit-focus-ring-color;
	outline-style: auto;
	outline-width: 5px;
}
aside {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/sections.html#the-aside-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

aside要素はコンテンツから切り離しても問題ない、ほとんど無関係なコンテンツです。例えば、複数のページ間で共有するサイドバーの各コンテンツなどをマークアップするのに適しています。

<article>
	<header>
		<h1>日記</h1>
		<p>投稿日時: 2017-01-01</p>
	</header>

	<section>
		<h2>漫画</h2>
		<p>ハイスコアガールはとても面白かった。</p>
	</section>

	<aside>
		<p>広告</p>
		<p>広告の内容〜</p>
	</aside>

	<aside>
		<p>Twitterのつぶやき</p>
		<p>つぶやきの内容〜</p>
	</aside>

	<aside>
		<p>著者紹介</p>
		<p>著者の案内〜</p>
	</aside>
</article>

デモ

aside要素のデモです。

<!-- このコードは編集できます。 -->

<article>
	<header>
		<h1>日記</h1>
		<p>投稿日時: 2017-01-01</p>
	</header>

	<section>
		<h2>漫画</h2>
		<p>ハイスコアガールはとても面白かった。</p>
	</section>

	<aside>
		<p>広告</p>
		<p>広告の内容〜</p>
	</aside>

	<aside>
		<p>Twitterのつぶやき</p>
		<p>つぶやきの内容〜</p>
	</aside>

	<aside>
		<p>著者紹介</p>
		<p>著者の案内〜</p>
	</aside>
</article>