HTMLで見出しをつける

はじめに

ホームページの見出しをつけたいんですが、どうすればいいですか?
ホームページに見出しをつけるためには、h1~h6タグを使います。
h1が基本的には、一番大きな見出しとなっていて、順番にしたがって使うことがルールとなっています。
つまり、いきなりh4とかから使うことはダメってことですね。
そういうことです。そうですね・・ファミレスなどのメニュー表を例にとってみると、いきなりメニューと書いてあるところに、メニューの名前が書いてあるような感覚ですね。
ファミレスのメニュー表とっていきなりメニューのところに オムライス!なんて書いてあって中見たらオムライス以外のメニューがたくさんのってたら変な話ですよね
そういうことですね。では実際にどうやって書いて行くのかサンプルを見ながら説明していきましょうか。

見出しをつけよう

見出しをつけるためには、h1からh6のタグを使用します。h1からh6タグは数字が大きくなるごとに見出しとして小さくなっていきます。h1が一番大きな見出しで、上記の例にもあるようにファミレスのメニュー表のメニューと書いてある内容となっています。h2は、2番目に大きな見出しとなります。先ほどのメニュー表に例えるならば、料理の分類になります。h3は、メニュー表に照らし合わせると個々のメニュー名になります。つまり、h2は複数使われても問題ないということを意味しています。

つまり、順番を守れば次のような構造にできるということです。

  • メニュー(h1)
  •  日本食(h2)
  •       刺身(h3)
  •       天ぷら(h3)
  •  中華(h2)
  •       炒め物(h3)
  •       スープ(h3)

上記の例では、h4からh6は使用されていませんが、上記の関係を守ることで使用することができます。

サンプルコード

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
    <title>HTMLで見出しをつける</title>
 </head;>
 <body>
   <h1>メニュー</h1>
   <h2>日本食</h2>
  <h3>刺身</h3>
  <h3>天ぷら</h3>
  <h2>中華</h2>
  <h3>炒め物</h3>
  <h3>スープ</h3>
 </body>
</html>

サンプルコードの実行例

関連記事

  1. videoタグを使って動画を埋め込んでみよう

  2. cssを読み込む

  3. HTMLでラジオボタン を作ってみよう

  4. htmlの文字化け

  5. ちょっと複雑なテーブルをHTMLで作ろう

  6. ラジオボタン の文字を押したら選択できるようにしよう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930