HTML5 見出しの付け方 HTMLの基本編 vol.7

ここからはWEBページに実際に表示される内容についての備忘録になります。まずは見出しについて説明します。

見出し要素(タグ)について

WEBサイトの見出しには<h1>~<h6>タグを使用して記述します。ちなみにタグは6種類と決まっており、数字が小さくなるほど重要性の高い見出しに使用します。

サンプルコード

<h1>h1要素を使用した見出し</h1>
<h2>h2要素を使用した見出し</h2>
<h3>h3要素を使用した見出し</h3>
<h4>h4要素を使用した見出し</h4>
<h5>h5要素を使用した見出し</h5>
<h6>h6要素を使用した見出し</h6>

上記サンプルコードをブラウザで確認すると下記のようになります。

見出し要素(タグの使い方)

見出し要素(タグ)を使用する場合は、一番重要な見出しに使用する<h1>タグ、次に中見出しに使用する<h2>タグ、小見出しの<h3>タグといったように数字の小さい方から順番に使用します

h1要素は、通常1つのWEBページ・記事につき1度だけ使用します。WEBページや記事のタイトルなどそのページの説明をする箇所に記述します。

<h2>~<h6>タグは使用回数に制限はありませんが、大体のサイトでは<h4>くらいまでの見出しを使用している場合が多いです。

サンプルコード

例えばこちらのページの見出しは下記のような構成になっています。

<h1>HTML5 見出しの付け方</h1>

<h2>見出し要素(タグ)について</h2>
<h3>サンプルコード</h3>

<h2>見出し要素(タグの使い方)</h2>
<h3>サンプルコード</h3>

記事のタイトルである<h1>タグは1度だけ記述し、本文内の中・小見出しは<h2>と<h3>を使用しています。ここにさらに小さい見出しを使用する場合は、<h4>~<h6>を使用します。

後の説明になりますが、CSSという言語を使用して見出しに線を引いたり、背景色を加えたりとデザインをカスタマイズをするができます。

今回は見出しについて備忘録を残しました。次は段落<p>要素を使用して文章・コンテンツの記載方法について説明します。

コメント

タイトルとURLをコピーしました