見出しを表現するh1要素~h6要素
自分はブロック要素かインライン要素か | ブロック要素 |
---|---|
含むことができる要素型 | インライン要素のみ |
名称の由来 | h は heading (見出し) の頭文字 |
見出しを表現するHTMLタグはh1、h2、h3、h4、h5、h6の6つが存在する。1から6は見出しの重要度を示すレベルを数字として表現したものであり、h1が一番重要度が高く、h6が一番重要度が低い。
自分自身はブロック要素である。内部にインライン要素やテキストを含むことができるが、ブロック要素を含むことはできない。
階層構造を意識する
見出しのレベルは高い順から順番に利用されるべきである。具体的には、h1要素の次にh4要素を書いたりしないこと。h1要素の次の見出しはh2要素を、h2要素の次の見出しにはh3要素を使うようにすること。
「大きい文字を使いたいから~」などスタイルを整える目的で見出し要素を使うべきではない。文字の大きさ、太さ等の装飾はスタイルシートを利用するべきである。文章構造はHTML、装飾(見た目)はCSSという役割を常に意識しておくことが大切である。
また、em要素(強調を意味するタグ)やstrong要素(強い強調を意味するタグ)の方が適切だと思われる箇所では見出し要素を使わないようにする。
h1要素は1ページに1つだけ
h1要素はページの中で一番重要な見出しである。title要素と同様に、閲覧者にとってわかりやすい・魅力的な見出し文の作成を意識するべきである。HTMLの仕様に明記されてはいないが、階層構造の点からもh1は1ページに1つだけ記述するようにすると良い。
h2~h6要素は複数登場しても問題無いが、先に述べたように階層構造を意識すること。ページ内で見出し要素が多すぎると、ユーザー・閲覧者にとって読みずらいページになる、トピックの始まりから終わりがわかりにくくなることがあるので注意すること。
HTML
<h1>HTMLについて</h1>
<h2>ヘッダについて</h2>
<p>これからヘッダに関する説明をします。</p>
<h3>head要素</h3>
<p>ここにhead要素の説明を記します。</p>
<h3>title要素</h3>
<p>ここにtitle要素の説明を記します。</p>