HTML

文章のアウトラインを表す主な要素

以下、文章のアウトラインやセクションを示すための主な要素である。

「カテゴリー」とは要素が属する分類であり、ある要素は一つ以上のカテゴリーに属する。

「コンテンツ・モデル」は各要素が中に入れられる要素（子要素とできる要素）を定めるルールである。各要素はコンテンツ・モデルに示されたカテゴリーの他の要素を中に入れることができる。

見出しと一般的な章や節（セクション）

h1〜h6要素
書き方

<h1> 〜 </h1>

説明

見出し（heading）を示す。「文書構造を示す」参照。

カテゴリー

フロー・コンテンツ／ヘッディング・コンテンツ

コンテンツ・モデル

フレージング・コンテンツ

ページの先頭へ↑

section要素
書き方

<section> 〜 </section>

説明

セクション（section）を示す。セクションとは文章内の章や節のことである。セクションの中にまた別のセクションを示すことも可能であり、異なるセクションにおいては、また新たにh1要素から見出しを始めても良い。

例
<section>
<h1>季節の野菜</h1>

<section>
<h1>春</h1>
</section>

<section>
<h1>夏</h1>
</section>

<section>
<h1>秋</h1>
</section>

<section>
<h1>冬</h1>
</section>

</section>
カテゴリー

フロー・コンテンツ／セクショニング・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

ページの先頭へ↑

ページ内の役割

header要素
書き方

<header> 〜 </header>

説明

Webページのヘッダー部分を示す。ヘッダーとは、通常は画面の上部にあるようなWebサイトの名称や導入文、あるいは全体的なナビゲーションがまとめられた部分。

例
<header>

<h1>HTMLとCSS</h1>

<nav>

<ul>
<li>はじめに</li>
<li>HTML</li>
<li>CSS</li>
<li>代表的な要素</li>
<li>補足</li>
</ul>

</nav>

</header>
カテゴリー

フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

ページの先頭へ↑

hgroup要素
書き方

<hgroup> 〜 </hgroup>

説明

複数の見出しを一つのグループとして示す。見出しがタイトル、サブタイトル、キャッチフレーズなどに分かれ、それぞれをh1要素、h2要素、h3要素として示す場合、h1〜h3までを一つのh1を同じレベルの見出しとてグループ化する場合などに用いる。

例
<section>

<hgroup>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
<h3>キャッチフレーズ</h3>
</hgroup>

</section>
カテゴリー

フロー・コンテンツ／ヘッディング・コンテンツ

コンテンツ・モデル

1個以上のh1〜h6要素

ページの先頭へ↑

article要素
書き方

<article> 〜 </article>

説明

ブログの個々の投稿や、ニュースサイトの記事などで、それ自体が独立して成立するコンテンツを示す。他の場所に単体で再利用する可能性が高いセクションに利用する。

例
<article>

<h2>記事のタイトル</h2>
<p><time datetime="2012-05-11">2012-05-11</time></p>

<section>
<h3>小見出し</h3>
<p>文章</p>
<p>文章</p>
</section>

<section>
<h3>小見出し</h3>
<p>文章</p>
<p>文章</p>
</section>

</article>
カテゴリー

フロー・コンテンツ／セクショニング・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

ページの先頭へ↑

aside要素
書き方

<aside> 〜 </aside>

説明

Webページ内の要素ではあるものの、メインの本文との関連が薄い（その部分がなくてもコンテンツが成立するような）部分を示す。Webページやブログの（通常画面右側に配置される）サイドバー内の文章や、article要素の中の補足情報などがaside要素として示される。

例
<aside>

<section>

<h2>最新の記事</h2>

<ul>
<li><a href="">記事タイトル1</a></li>
<li><a href="">記事タイトル2</a></li>
<li><a href="">記事タイトル3</a></li>
</ul>

<h2>カテゴリー</h2>

<ul>
<li><a href="">カテゴリー1</a></li>
<li><a href="">カテゴリー2</a></li>
<li><a href="">カテゴリー3</a></li>
</ul>

</section>

</aside>
カテゴリー

フロー・コンテンツ／セクショニング・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

ページの先頭へ↑

その他

address要素
書き方

<address> 〜 </address>

例
<address>

氏名<br>
e-mail:<a href="mailto:xxx@aaa.bbb.cc">xxx@aaa.bbb.cc</a>

</address>
説明

ページ制作者や記事の著者の情報・問い合わせ先（メールアドレス、電話番号など）を示す。

カテゴリー

フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

ページの先頭へ↑