HTML・はじめの一歩

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

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

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

見出しには6段階ある

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

<h1>いちばん大事な見出し</h1>
<h2>その次の見出し</h2>
<h3>さらにその下の見出し</h3>

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

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

段落はpではさむだけ

ふつうの文章は、ぜんぶ <p> ではさみます。

<h1>しまちゃん</h1>
<p>はじめまして。しまちゃんです。</p>
<p>いまははじめてのホームページを作っています。</p>

文章のまとまりごとに <p> で区切るのがコツ。改行したいだけで <p> を分ける必要はなく、「ここで話が一区切り」というところで分けます。逆に、長い文章をぜんぶ1つの <p> に詰め込むと読みにくくなります。話題が変わったら、あたらしい <p>。これだけ意識すれば十分です。

このレッスンのまとめ

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

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

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

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

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

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

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

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

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