見出しを表す

07/20/2018

HTML入門

見出しを表す要素

/*見出しの記述*/
<h1>見出しHeading1</h1>
<h2>見出しHeading2</h2>
<h3>見出しHeading3</h3>
<h4>見出しHeading4</h4>
<h5>見出しHeading5</h5>
<h6>見出しHeading6</h6>

h1要素からh6要素は、それが見出し(heading)であることを表します。1~6の数字は見出しの階層を示しています。h1要素が1番上の階層の見出し(大見出し)、h6要素が6番目の階層の見出しというように6段階まで用意されています。

一般的なブラウザでは特に何も指定しなくても階層が見出しほど大きく表示されますが、これはCSSを適用していない状態でも見出しのおよその階層が分かるようにするための措置です。HTMLの仕様でこのように表示することが決められているわけではないので注意しましょう。

見出しの大きさや具体的な表示方法は最終的にはCSSで指定します。表示される大きさによって使用する見出しを選ぶのではなく、必ず文書構造の実際の階層に合わせた見出しを使いましょう。

見出しを使った例

見出しを使った例です。実際は見出しと見出しの間に文章を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しを使った例</title>
</head>
<body>
<h1>1番目の階層の見出し</h1>
<h2>2番目の階層の見出し</h2>
<h3>3番目の階層の見出し</h3>
<h4>4番目の階層の見出し</h4>
<h5>5番目の階層の見出し</h5>
<h6>6番目の階層の見出し</h6>
</body>
</html>

見出しを表示した例です。

見出しの例

実際に表示させてみると分かりますが、デフォルトでは基本的に装飾がなく、フォントのサイズが異なるくらいです。それをCSSでサイズや色、背景などを指定することでサイト独自に装飾された見出しになります。ただし、どのサイトであっても見出しの役割にほとんど違いはありません。

HTML5で導入されたセクションについて

HTML5におけるセクションとは、書類における「章」や「節」のようなものです。

先頭にある見出しと、その見出しによる主題の及ぶ範囲(文章や画像など)にあるコンテンツ全体のことをセクションと言います。そのため、セクションと見出しは基本的にはセットで使われます。ただし、セクションによっては見出しのないものもあります。

セクションを表す要素

HTML5の7種類のカテゴリーのうち、「セクショニングコンテンツ」に該当する4つの要素(article要素・section要素・aside要素・nav要素)がセクションを表す要素です。

セクショニングルートについて

他の文献やサイトから引用するときに使うのが引用文です。その引用文の中に見出しやセクションの要素を含む場合があります。この場合、その見出しやセクションの要素はあくまで引用してきた文章のものなので、その引用文を含む文章の見出しやセクションとは切り離して扱う必要があります。

このように、その要素の内部に見出しやセクションがある場合に、外部とは切り離して扱う必要のある要素をセクショニングルートと言います。HTML5では、body要素もこのセクショニングルートの1つとして定義されていて、body要素内の先頭に配置した見出しは、body要素の見出し(HTML文書のコンテンツ全体の大見出し)であると認識されます。

Posted by kiri