【HTML/CSS第3回】見出しの付け方を理解しよう【headingタグ】

今回は、見出しの付け方について理解しましょう。

このブログを読むことで以下のことができるようになります。

見出しの付け方について理解することができる

HTMLファイルを作ろう
headingタグについて
練習問題
まとめ

HTMLファイルを作ろう

まずは、HTMLファイルを作りましょう。

「003」フォルダを作り、その中に「index.html」ファイルを作りましょう。

コードは以下のように記述し、ブラウザで開いてみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>heading</title>
    </head>

    <body>
        <h1>見出し1</h1>
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h4>見出し4</h4>
        <h5>見出し5</h5>
        <h6>見出し6</h6>
    </body>
</html>

ブラウザを開くと以下のようになります。

6種類の大きさの見出しが表示されました！

headingタグについて

それでは、コードの説明をします。

今回説明する部分はこちらです。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

<h1>〜</h1>のようなタグのことをheadingタグといいます。
headingタグには、上に示すように6種類あり、数字が小さいものほど大きな見出しとなります。

ちなみに、<h1>〜</h1>は大見出し、<h2>〜</h2>は中見出し、<h3>〜</h3>は小見出しとも呼ばれます。

見出しを付けるためのタグをheadingタグという
headingタグは6種類あり、数字が小さいものほど大きな見出しとなる
<h1>〜</h1>は大見出し、<h2>〜</h2>は中見出し、<h3>〜</h3>は小見出しと呼ぶ

練習問題

それでは練習問題です。

大見出しで「練習」、中見出しで「name」、小見出しで「あなたの名前」をブラウザに表示するコードを書きましょう。
ページのタイトルは「practice」としてください。

答え

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>practice</title>
    </head>

    <body>
        <h1>練習</h1>
        <h2>name</h2>
        <h3>CPLAB</h3>
    </body>
</html>