HTML・はじめの一歩

見出しと段落を書いてみよう

見出し(h1〜h6)と段落(p)の使い方。見出しが6段階ある理由、番号を飛ばさないルール、段落の書き方を学びます。文字の大きさではなく意味で選ぶことが、なぜ大事なのかも説明します。

タグのかたちが分かったところで、いちばん出番の多い2つを書き分けてみましょう。見出しと段落です。この2つだけで、もう “文章のあるページ” が作れます。

見出しには6段階ある

見出しはh1からh6まで、6段階あります。hはheading(見出し)の頭文字。数字が小さいほど「えらい(大きな)見出し」です。

<h1>いちばん大事な見出し</h1>
<h2>その次の見出し</h2>
<h3>さらにその下の見出し</h3>
番号が小さいほど文字が大きく表示されます。

本の目次を思い出してください。「章」があって、その中に「節」があって……という入れ子の関係。h1が章タイトル、h2が節、というふうに使い分けます。この上下関係のおかげで、読む人も、コンピュータも「どれが大きな話で、どれが小さな話か」が一目でわかります。

CSS文字の大きさをかえようなんで大きさじゃなく“意味”で選ぶの?その答え合わせは、ずっと先のCSSで

見出しの番号は飛ばさない

もうひとつ、見出しの大事なお約束。番号は順番に使います。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行に分けたい、など)という場面もあります。それ用の小さなタグが別にあるので、のちのレッスンでのお楽しみに。

このレッスンのまとめ

  1. 見出しは<h1>〜<h6>の6段階
  2. 見出しは大きさでなく意味で選ぶ(h1は一番大事なやつ)
  3. 文章は<p>でまとまりごとにはさむ

やってみよう:自己紹介ページ

覚えた2つだけで、しまちゃんの“自己紹介ページの中身”が作れます。エディタに、そのまま打ちこんでみましょう。

<h1>しまちゃん</h1>
<p>おえかきとラーメンがすきなしまです。はじめてつくった、じぶんのホームページへようこそ!</p>

<h2>じこしょうかい</h2>
<p>こんにちは! しまちゃんといいます。おえかきするのがだいすきで、しゅうまつはよくラーメンをたべにいきます。</p>
<p>このページは、はじめてじぶんでつくったWebサイトです。さいごまでつくれたら、きみもこれがつくれるよ!</p>

<h2>すきなもの</h2>
<p>おえかき、ラーメン、ゲーム。まいにちたのしい!</p>

ブラウザで開くと、こう表示されます。

ブラウザ表示。「しまちゃん」が大きな見出し、その下に自己紹介の段落、さらに「じこしょうかい」「すきなもの」の見出しと段落が並んでいる
見出しは大きく、段落はふつうの文字で、話題ごとに区切られて表示されます。

できたら、自分のことに書きかえてみましょう。<h1>に自分の名前、段落は自分の言葉に。これが、これから育てていくあなたのホームページの1ページ目です。

よくある質問

h1は1ページに1つだけですか?
ルール上は複数置けますが、h1は「このページで一番大事な見出し」という意味なので、1ページに1つが基本です。検索エンジンにもページの主題が伝わりやすくなります。
見出しの文字が大きすぎるときは、小さい番号に変えていいですか?
見た目のために番号を変えるのはおすすめしません。大きさはあとでCSSで自由に調整できるので、HTMLの見出しは文章の階層という「意味」で選びましょう。
段落を分ける目安はありますか?
「話がひと区切りついたら新しいp」が目安です。改行したいだけならpを分ける必要はなく、逆にひとつのpに長々と詰め込むと読みにくくなります。