HTML5ではセクショニングコンテンツが追加され、従来より詳細に文書構造を定義する事が出来る様になりましたが、セクションタグの使い方、とりわけアウトラインがよくわからない、という質問をよく頂きます。
アウトラインとは一体何なのでしょうか?
アウトラインとは
アウトラインの意味は、輪郭、物事のあらまし、大要、などです。
アウトラインとは、階層構造であり、ページの中での文書構造の区切りの事を指します。
「この見出しについての内容は、文章のここからここまで書かれています。」という文章の区切りを表します。
例えるなら「話題」という所でしょうか。
私たちは文章を書く際に、読みやすくする為、内容を「章・節・項」に分けて記述します。
今までのHTMLは見出し要素しか用意されておらず、これらの要素を使用して暗黙的に階層構造を定義していました。
従来のHTMLは「章・節」にあたる要素が存在していなかった訳です。
HTML5では明示的にセクションを定義する要素として新たに「セクショニング・コンテンツ」に属する要素が追加されました。
セクショニング要素を使用して、文章の構造や内容に応じて適切に文章の区切りを定義し、各セクションごとに適切に見出しを定義する事で、明示的なアウトライン構造を構築する事が出来ます。
見出し要素は従来通り、h1~h6の順に設定しますが、HTML5では各セクションごとに見出しをh1~h6の順に設定します。
なぜアウトラインが必要か
検索エンジンのクローラー、特にGoogleのクローラーにWebページの構造を伝え、読みやすくする為といってよいでしょう。
人間は見た目や操作感でサイトの良し悪しを評価しますが、機械は見た目より中身、つまりHTMLでどのような文書構造が定義されているか、どのようなコンテンツが存在しているか、を重視します。
HTMLが適切に記述出来ていればSEO対策が出来て検索順位が上がるのか、というとそれはまた別の話になります。
HTMLの構造やコンテンツの内容などさまざまな要素が総合的に評価され順位は決定されます。
どう記述すれば正解か
特に正解はありません。
作文を書く際、最低限のルールはあるけど正解がないのと同じです。
コンテンツの内容に基づいて、適切に要素の設定が出来ている、読みやすい文章が正解です。
アウトラインの確認方法
自分で記述したHTMLのアウトラインがどのようになっているか確認するには下記の様なサービスやブラウザの機能拡張を使用する事で可能です。
HTML 5 Outliner
https://gsnedders.html5.org/outliner/
HTML 5 Outliner Chrome機能拡張
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja
記述例
例えば次のようなHTMLを記述し、HTML5Outlinerでチェックすると下記のようなアウトラインが表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<header> <h1>ヘッダー見出し1</h1> <nav id="global_navi">グローバルナビ</nav> </header> <main> <section id="main_contents"> <h1>メインコンテンツ-見出し1</h1> <section> <h1>コンテンツ1-見出し1</h1> <p>段落</p> <h2>見出し2</h2> <p>段落</p> </section> <section> <h1>コンテンツ2-見出し1</h1> <p>段落</p> <h2>見出し2</h2> <p>段落</p> </section> </section> <article id="comment"> <h1>コメント-見出し1</h1> </article> </main> <aside> <h1>広告</h1> </aside> <footer> フッター </footer> |
結果
1.ヘッダー見出し1
1.Untitled Section
2.メインコンテンツ-見出し1
1.コンテンツ1-見出し1
1.見出し2
2.コンテンツ2-見出し1
1.見出し2
3.コメント-見出し1
4.広告
最後に
HTML5でアウトラインを定義するには、文書を読みやすくまとめること、文章を書く為のルールを実践することが一番でしょう。