” HTML5 Outliner “ と検索し、そのページをクロムの拡張機能でhタグを見ることができます。
hタグはそのページのレイアウトであり、そのページの各セクションの見出し(heading)が表示されます。しかし、そのトピックがセクショニングコンテンツ内(body)にある場合は、重要性が低下します。例からhタグのアウトラインは上記のようになります。
ヘッダーとフッターの使い方
1. h1、h2、h3、h4、h5、h6の使い方
2. hgroupの使い方
3.ヘッダーの使い方
4.フッターの使い方
hタグに段落を使って、すべて見出し(headings)が表示されていることがわかります。その見出しの重要性を表示します。hタグは目次(Table of contents)のような役割も果たしています。
もう一つの例を見てみましょう。
この例から、hタグは次のようになります。
1.ヘッダーとフッターの使い方
1. h1、h2、h3、h4、h5、h6の使い方
2. hgroupの使い方
3.ヘッダの使い方
4.フッターを使う
2.セクショニングコンテンツの使い方
なぜhタグのアウトラインがこのようになったのでしょうか？以下に理由を説明します。
- 大きな枠が2つあります。１番目の<article> と２番目の<article>です。
- 「ヘッダーとフッターの使い方」はセクションの見出しで、１番目の<article>の中に作成されています。
- 「セクショニングコンテンツの使い方」はセクションの見出しですが、2番目の<article>に作成されています。
- 2つのセクションの見出しは、どちらも同じぐらい重要度となります。