HTML・はじめの一歩

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

いちばんよく使う2つのタグ、見出し(h1〜h6)と段落(p)。「大きさ」ではなく「意味」で選ぶ——ここがだいじ。

タグのかたちが分かったところで、いちばん出番の多い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に長々と詰め込むと読みにくくなります。