タグのかたちが分かったところで、いちばん出番の多い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>でまとまりごとにはさむ
