「HTMLのタグ、いったい何個覚えればいいの？」——この記事は、HTMLとCSSのしくみを読んで「次は自分で書いてみたい」と思った未経験の方への3本目です。読み終わる頃には、制作でほぼ毎日使う10個のタグと、その並べ方の2つのルールが分かります。

先に結論から。タグは100種類以上ありますが、世の中のWebページの大部分は10個ほどのタグの組み合わせでできています。全部覚える必要はありません。まず10個、そして「入れ子」と「見出しの順番」という2つのルールを押さえれば、自分の手でページの骨組みが組めます。

電子レンジのボタンは15個。でも、押すのは2つ

ご自宅の電子レンジを思い出してください。「解凍」「グラタン」「発酵」「牛乳」……ボタンは15個くらい並んでいます。でも実際にあなたが毎日押すのは、「あたため」と「スタート」の2つではないでしょうか。残りのボタンは、必要になったときに説明書を開けば足ります。

タグもこれとまったく同じです。私たちがWordPressで企業サイトを1本作るとき、実際に手で書くタグの種類は10〜15個ほど。それ以外は「必要になったら調べる」で回っています。「暗記が苦手だからWeb制作は向いていない」——そう思う必要は、まったくありません。

まず5つ。文章の「形」を決めるタグ

タグ	役割	使う場面
<h1>〜<h6>	見出し	ページの題名、章のタイトル
<p>	段落	文章のかたまり1つ分
<ul>	箇条書きの外枠	「ここから一覧です」と囲む
<li>	箇条書きの1行	一覧の中の1項目ずつ
<br>	改行	住所やキャッチコピーの折り返し

この5つは、文章に形を与えるタグです。<h1>はページに1つだけ置く一番大きな見出しで、以下 h2、h3 と数字が大きくなるほど小さな見出しになります。箇条書きは<ul>で全体を囲み、その中の1行ずつを<li>で囲む——親と子で2段になっているのがポイントです。

あと5つ。ページに「部品」を足すタグ

タグ	役割	使う場面
<a>	リンク	他のページへ移動させる
<img>	画像	写真・ロゴ・バナーを置く
<strong>	強い意味を持つ語	覚えて帰ってほしい一語
<div>	まとまりの箱	複数の要素をひとかたまりに
<table>	表	料金表、比較表

<a>と<img>は、行き先や画像の場所を一緒に書きます。<div>は中身に意味を持たない「ただの箱」で、CSSでまとめて色や余白をつけたいときの取っ手になります。この10個が読めれば、他社が作ったサイトを開いても「ここは見出し、ここはリンク」と骨格が見えるようになります。

ルール1：タグは「後から開けたものを、先に閉じる」

タグは重ねて使えます。段落の中の一語だけを強調したいときは<p><strong>新着</strong></p>のように、外側と内側の二重にします。このとき守るルールは1つだけ。後から開けたタグを、先に閉じる。大きい箱に小さい箱を入れたら、小さい箱のふたを先に閉めるのと同じ順番です。

この順番が交差していると、ブラウザは推測で表示を組み立てるため、パソコンでは正常なのにスマートフォンだけ文字が消える、といった不具合が起きます。原因が見つけにくい崩れの多くは、この入れ子の交差です。

ルール2：見出しは階段。1段ずつ下りる

もう1つのルールが、見出しの番号です。h1の次はh2、その下がh3。数字を飛ばさないのが決まりです。「h2だと文字が大きすぎるからh4にしよう」と見た目で選びたくなりますが、それは大きさをCSSで直す場面です。

番号を守る理由は、タグを読んでいるのが人だけではないからです。目の不自由な方が使う読み上げソフトは、見出しの番号を頼りにページを拾い読みします。番号が飛んでいると、その人には「章がまるごと抜けている本」に見えてしまいます。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズがWordPressサイトを制作するとき、依頼主から原稿がWordファイルで届くことがよくあります。そこでは、見出しのつもりの行が「赤くて大きい太字」で書かれています。書いた方に見出しのつもりがあっても、ファイルの中では大きな文字にした本文のままです。

私たちの最初の仕事は、その原稿を読みながら「これはh2、これはh3、ここは箇条書き」と役割に翻訳し直すことです。地味な作業ですが、ここを飛ばすと、公開後に「検索しても自社のサービス名で出てこない」というご相談に変わって戻ってきます。タグを正しく置くことは、依頼主の売上と、探しに来た訪問者の時間を守る作業だと私たちは考えています。

覚え方は「暗記」ではなく「1回書く」

タグは、単語帳をめくって覚えるものではありません。1回自分の手で書いて、ブラウザで開いて、思ったとおりに表示された——その体験を1つ持つほうが、10回読むより残ります。私たちの現場でも、新しく入った人が最初に触るのは参考書ではなく、実際のページの1行です。

今日からできる、たった1つのこと

まとめ

タグは100種類以上あっても、毎日使うのは10個ほど。文章の形を決める5つと、部品を足す5つです。守るルールは「後から開けたものを先に閉じる」と「見出しの番号を飛ばさない」の2つだけ。この骨組みの正しさが、検索でたどり着く人と、依頼主のサイトを支えます。私たちCCコミュニケーションズは、1つのタグを書くところから実際の案件まで進める研修環境で、一緒に手を動かす仲間を探しています。