HTMLで見出しをつける

ホーム
BLOG
html
HTMLで見出しをつける

html
2018.11.20

はじめに

ホームページの見出しをつけたいんですが、どうすればいいですか？

ホームページに見出しをつけるためには、h1~h6タグを使います。
h1が基本的には、一番大きな見出しとなっていて、順番にしたがって使うことがルールとなっています。

つまり、いきなりh4とかから使うことはダメってことですね。

そういうことです。そうですね・・ファミレスなどのメニュー表を例にとってみると、いきなりメニューと書いてあるところに、メニューの名前が書いてあるような感覚ですね。

ファミレスのメニュー表とっていきなりメニューのところに　オムライス！なんて書いてあって中見たらオムライス以外のメニューがたくさんのってたら変な話ですよね

そういうことですね。では実際にどうやって書いて行くのかサンプルを見ながら説明していきましょうか。

見出しをつけよう

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

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

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

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

サンプルコード

<!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>