section要素 - ドキュメントのセクション
当ページのリンクには広告が含まれています。
スポンサーリンク
ここでは HTML5 の section要素についてみていきます。
section要素の概要
section要素は、HTML5 から新たに追加された要素で、HTMLドキュメントのセクションを表す要素です。
| カテゴリー |
フロー・コンテンツ セクショニング・コンテンツ |
| コンテンツモデル | フロー・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
ドキュメントの中のコンテンツをグループ化する要素です。
実際の文章でセクションを言い換えると章・節・項といったコンテンツのグループになります。そのため、section要素の中には、そのコンテンツの見出し（h1〜h6要素）が必要になります。
使用例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>section要素</title> <link rel="stylesheet" src="style.css" /> </head> <body> <h1>section要素</h1> <section> <h2>セクションのタイトル</h2> <p>セクションの本文</p> </section> <section> <h2>タンポポの綿毛</h2> <p><img src="img/dandelion-seeds.jpg" /></p> </section> </body> </html>
表示
section要素とarticle要素
ブログやニュースサイトの記事には article要素を使います。section要素を使ってはいけません。
section要素は article要素の中のコンテンツのグループに使います。その際、見出し（h1〜h6要素）を忘れないように入れましょう。
使用例
<article> <h1>記事のタイトル</h1> <p>記事の概要とか</p> <section> <h2>見出し①</h2> <p>見出し①の内容</p> </section> <section> <h2>見出し②</h2> <p>見出し②の内容</p> </section> </article>
section要素とdiv要素
section要素は見出しを伴うコンテンツのまとまり、div要素は単なるまとまりです。使い方を間違えないようにしましょう。
使用例
<section> <h1>見出し</h1> <div> 見出しのないまとまり </div> </section> <div> 見出しのないまとまり </div>
スポンサーリンク
スポンサーリンク