【HTML】h1、h2、h3、h4、h5、h6要素の使い方【見出しを表します】

Program

記事の中の見出しは、h1〜h6要素を使って表しましょう。

h1、h2、h3、h4、h5、h6要素の基本的な使い方

以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h1、h2、h3、h4、h5、h6</title>
</head>
<body>
    <h1>サラリーマン出張記録</h1>
        <h2>記録の一覧</h2>
            <h3>出張1日目</h3>
                <h4>取引先で会議</h4>
                    <h5>議事録の内容</h5>
                        <h6>取引の内容</h6>
</body>
</html>

body要素の中に、h1〜h6要素を使って見出しを記述しました。

要素の名前に含まれる「1〜6」の数字は、見出しのランクを示します。

そして「h1」が最上位のランクの見出しを意味し、「h2」、「h3」と数字が大きくなるに従って見出しのランクが下がり、「h6」が最下位のランクを意味します。

ブラウザの表示結果に示す通り、ランクが高い見出しであれば文字のサイズは大きくなり、ランクが低い見出しであれば文字のサイズは小さくなります。

また、h1〜h6要素は、HTML5のアウトライン(階層構造)を生成することができます。

つまり、サンプルとして示したHTML文書では、h1要素が最上位の階層として生成され、h2、h3などと順にランクを下げていくに従い、階層が下層となり、h6要素が最下位の階層として生成されています。

このように、h1〜h6要素の記述により生成される階層構造を「暗黙的なアウトライン」と呼びます。

「セクショニング要素」との併用

次に、以下のプログラムと、ブラウザでの表示結果を見てください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h1、h2、h3、h4、h5、h6</title>
</head>
<body>
    <h1>サラリーマン出張記録</h1>
        <section>
        <h2>記録の一覧</h2>
            <section>
            <h3>出張1日目</h3>
                <section>
                <h4>取引先で会議</h4>
                    <section>
                    <h5>議事録の内容</h5>
                        <section>
                        <h6>取引の内容</h6>
                        </section>
                    </section>
                </section>
            </section>
        </section>
</body>
</html>

先ほどのプログラムについて、「セクショニング要素」であるsection要素を使って、アウトライン(階層構造)を生成しました。

h1〜h6要素は、各々のsection要素によって、各階層における見出しとして記述された状態になってます。

このように、section要素などの「セクショニング要素」の記述により生成される階層構造を「明示的なアウトライン」と呼びます。

そして、h1〜h6要素は、「セクショニング要素」の記述により生成される各階層において、見出しとして記述することができます。

各種ブラウザでの表示結果

h1〜h6要素の各種ブラウザにおける最新のサポート状況は、以下のようになってます。

【HTML】Internet ExplorerGoogle ChromeMicrosoft EdgeSafariFirefoxOpera
h1、h2、h3、h4、h5、h6
要素
〇:サポートあり、△:制限あり、×:サポートなし。?:不明

以上、h1、h2、h3、h4、h5、h6要素の使い方について、ご参考になさってください!

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