＜aside要素＞ - 無関係なコンテンツ
公開日:
aside要素は、周りのコンテンツから逸脱していることを表す要素です。この要素を切り離してもコンテンツに影響がない、別コンテンツとみなせる内容でなければいけません。例えば、広告や人気記事一覧、著者情報やSNSのウィジェットなどが該当します。テキスト内の()表記をaside要素で囲むのは適切ではありません。
概要
- 名前
- aside
- カテゴリー
- Flow content
- Sectioning content
- Palpable content
- 配置できる場所
- Flow contentが期待される場所。ただし、main要素の子孫にしてはいけない。
- コンテンツモデル
- Flow content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLElement
- デフォルトのスタイル
aside { display: block; }- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-aside-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】＜aside要素＞ - 無関係なコンテンツ</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/aside/">
<style>
body {
background-color: #fff ;
}
article {
background-color: #fffff0 ;
}
aside {
background-color: #ffeeff ;
}
</style>
</head>
<body>
<p>aside要素はコンテンツから切り離しても問題ない、ほとんど無関係なコンテンツです。</p>
<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>
</body>
</html>