html5の要素でheader、hgroup、h1-h6を使い方①

html5の要素でheader、hgroup、h1-h6を使い方①

2019.01.18

今回はヘッダーの使い方です。この記事では、ヘッダー、要素、およびその他の関連要素の使い方について説明します。使用例を含めて、様々なテクニックを正しく適切にコードを書きましょう。

h1、h2、h3、h4、h5、h6でコンテンツの見出しを入力しましょう。

h1からh6までの要素は、各セクションの中のコンテンツの見出しです。h1が最も重要な見出し、h6が重要度の低い見出しになります。


上記の例は、

で見出しをマークアップします。

で「header と footerの使い方」はマークされています。

の中に4つのセクションを作成し、各セクションにはで見出しを入れます。hタグの概要を理解しましょう。

” 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つあります。1番目の<article> と2番目の<article>です。
  • 「ヘッダーとフッターの使い方」はセクションの見出しで、1番目の<article>の中に作成されています。
  • 「セクショニングコンテンツの使い方」はセクションの見出しですが、2番目の<article>に作成されています。
  • 2つのセクションの見出しは、どちらも同じぐらい重要度となります。