タグのかたちが分かったところで、いちばん出番の多い2つを書き分けてみましょう。見出しと段落です。この2つだけで、もう “文章のあるページ” が作れます。
見出しには6段階ある
見出しはh1からh6まで、6段階あります。hはheading(見出し)の頭文字。数字が小さいほど「えらい(大きな)見出し」です。
<h1>いちばん大事な見出し</h1>
<h2>その次の見出し</h2>
<h3>さらにその下の見出し</h3>本の目次を思い出してください。「章」があって、その中に「節」があって……という入れ子の関係。h1が章タイトル、h2が節、というふうに使い分けます。この上下関係のおかげで、読む人も、コンピュータも「どれが大きな話で、どれが小さな話か」が一目でわかります。
見出しの番号は飛ばさない
もうひとつ、見出しの大事なお約束。番号は順番に使います。h1の次はh2、その下の話はh3。本の「章→節→項」と同じで、階段を1段ずつ降りるイメージです。
<!-- ○ よい例:1段ずつ -->
<h1>しまちゃん</h1>
<h2>すきなもの</h2>
<h3>たべもの</h3>
<!-- × わるい例:h2を飛ばしていきなりh4 -->
<h1>しまちゃん</h1>
<h4>すきなもの</h4>わるい例のようにh1からいきなりh4へ飛ぶと、読む人も検索エンジンも「あれ、章と節はどこ?」と迷子になります。「小さめの見出しにしたいからh4」は見た目の理由なのでNG。階層が1つ下がるなら、番号も1つ下です。
段落はpではさむだけ
ふつうの文章は、ぜんぶ<p>ではさみます。
<h1>しまちゃん</h1>
<p>はじめまして。しまちゃんです。</p>
<p>いまははじめてのホームページを作っています。</p>文章のまとまりごとに<p>で区切るのがコツ。改行したいだけで<p>を分ける必要はなく、「ここで話が一区切り」というところで分けます。逆に、長い文章をぜんぶ1つの<p>に詰め込むと読みにくくなります。話題が変わったら、あたらしい<p>。これだけ意識すれば十分です。
ちなみに「話は続いているけれど、行だけ変えたい」(住所を2行に分けたい、など)という場面もあります。それ用の小さなタグが別にあるので、のちのレッスンでのお楽しみに。
このレッスンのまとめ
- 見出しは
<h1>〜<h6>の6段階 - 見出しは大きさでなく意味で選ぶ(
h1は一番大事なやつ) - 文章は
<p>でまとまりごとにはさむ
