最終更新日:
公開日:
リファレンス
HTML
アサイド
aside要素
ページの内容とは直接関係のない補足情報、サイドメニューなどを表したい場合に使用します。メインではないけれど、触れておきたい内容という位置付けです。
サンプルコード
<article>
<h1>美味しいコーヒーのお店をご紹介</h1>
<p>今回は渋谷駅周りで見つけた、美味しいコーヒーが飲めるお店を紹介します!</p>
<p>...記事本文...</p>
<aside>
<h2>渋谷駅周辺に喫茶店が集まる理由</h2>
<p>遡ること1994年。<br>当時流行っていた...</p>
</aside>
</article>
-
カテゴリー
フローコンテンツ、セクショニングコンテンツ、パルパブルコンテンツ
-
コンテンツモデル
フローコンテンツ
-
使用ケース
フローコンテンツが期待される場所(メインコンテンツを子孫要素に持つことはできない)
属性
- グローバル属性
-
グローバル属性のみ使用することができます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。
使用例
サイドメニューのサンプルコード
ブログでよく見かけるサイドメニューを想定したHTMLコードです。
<main>
<h1>メインコンテンツ</h1>
<p>記事テキスト</p>
</main>
<aside>
<h2>カテゴリー</h2>
<nav>
<ul>
<li><a href="/shibuya">渋谷周辺のカフェ情報</a></li>
<li><a href="/ikebukuro">池袋周辺のカフェ情報</a></li>
<li><a href="/ebisu">恵比寿周辺のカフェ情報</a></li>
<li><a href="/coffee">コーヒー豆知識</a></li>
</ul>
</nav>
</aside>