［HTML5］HTML5で追加された要素・属性①

　　

文書構造を明確にするための要素

1. section要素
2. header要素、footer要素
3. nav要素

１． section要素

「コンテンツやテーマによってグループ分けをするための区切り」
→文書構造上の意味のある文章を囲むために用いる

• メインコンテンツを入れる。必ず見出し要素（h1〜h6）を使う
• 入れ子が可能
• CSSやJavaScriptのための枠はdivが適切
• section要素と見出し要素を使った階層構造を「アウトライン」という

　　<section>
  　 <h1>大見出し</h1>
       <p>本文</p>
 
  　　　<section>
  　　　<h2>中見出し</h2>
  　　　<p>本文</p>
 
    　　　　<section>
    　　　　<h3>小見出し</h3>
    　　　　<p>テキスト</p>
    　　　　</section>
    
       　　　 <section>
        　　　<h3>小見出し</h3>
        　　　<p>テキスト</p>
       　　　 </section>
 
 　　　 </section>
　　</section>

 

２． header要素・footer要素

<div id="header">　→　<header>に置き換え

<div id="footer">　→　<footer>に置き換え

•  アウトラインに影響を与えない
• section要素・article要素に入れることもできる
• header要素には１つ以上の見出し要素またはnav要素が入る
• footer要素には著作者情報、連絡先などが入る。nav要素を入れてもよい

 

３． nav要素

• メインナビゲーションやサイドバーのグローバルメニューのみを囲む要素
• アウトラインを明確にするために見出しを入れることもある（なくてもよい）

HTML Outliner5での確認時にnav要素、aside要素に見出し要素がない場合は、

「untitled section」と表示される。しかし必ずしもなければならない、ということはない。

HTML 5 Outliner