「HTMLの勉強を始めたけれど、タグの種類が多すぎて覚えられない……」
「結局、どのタグを優先的に覚えればWebサイトが作れるようになるの？」
Web制作の学習を始めると、最初に直面するのが「タグの多さ」です。HTMLには100種類以上のタグが存在しますが、実際によく使う基本タグは限られています。
この記事では、完全初心者の方が「これだけは絶対に外せない」という最重要タグ10選を厳選して解説します。
この記事を読み終える頃には、Webページの構造がどのように作られているのかが明確にイメージできるようになり、自分でもコードを書き始められるようになるはずです。
HTMLタグとは？仕組みと書き方の基本
具体的なタグを紹介する前に、まずは「HTMLタグとは一体何なのか？」という基本を整理しておきましょう。
タグは「ブラウザへの指示書」
HTMLタグの役割は、テキスト（文字）に対して「ここは見出しです」「ここは画像です」という役割を与えることです。タグで囲むことによって、ブラウザは初めてその文字をどう表示するべきかを理解します。
基本の書き方：サンドイッチ構造
HTMLの基本は、以下の図のように内容をタグで「サンドイッチ」にすることです。
<開始タグ>内容</終了タグ>- 開始タグ：ここからスタート
- 内容：表示したい文字やデータ
- 終了タグ：ここで終わり（スラッシュ「/」を忘れないように！」）
この基本ルールを念頭に置いて、いよいよ重要な10個のタグを見ていきましょう。
これだけは外せない！最重要タグ10選
Webサイト制作の現場で「使わない日はない」と言い切れる、エース級のタグを紹介します。
①<h1>〜<h2>：見出しタグ
役割：文章のタイトルや見出しを作る
本の章や節と同じように、Webページにも見出しが必要です。<h1>（大見出し）から<h6>（小見出し）まであり、数字が小さいほど重要度が上がります。
・ポイント：<h1>は１ページに１回だけ使うのがSEO（検索エンジン最適化）上の基本ルールです。
<h1>初心者のためのHTML入門</h1>
<h2>1.タグの基本</h2>
<h3>1-1.開始タグと終了タグ</h3>実行結果
②<p>：段落タグ
役割：一般的な文章（テキスト）をまとめる
「Paragraph（パラグラフ）」の略です。文章のひとかたまりをこのタグで囲みます。ブラウザでは、<p>タグで囲まれたブロックの前後には自動的に少しの余白が作られます。
<p>これは1つ目の段落です。</p>
<p>これは2つ目のタグです。</p>③<a>：リンクタグ
役割：他のページやサイトへ繋げる
「Anchor（アンカー）」の略です。これぞWebの醍醐味である「ハイパーリンク」をつくります。href（エイチレフ）という属性を使って、飛び先のURLを指定します。
<a href="https://example.com">ここをクリックして詳細を見る</a>④<img>：画像タグ
役割：写真やイラストを表示する
ページに画像を埋め込みます。このタグには終了タグがなく、単体で使います。srcで画像ファイルの場所を、alt属性で画像の代わりとなる説明テキストを記述します。
<img src="cat.jpg" alt="昼寝している猫の写真">⑤<ul>と<li>：リスト（箇条書き）タグ
役割：情報を整理してリスト形式にする
<ul>（Unodered list）は「順序のない箇条書きリスト」を、その中身である<li>（list item）は「項目」を表します。
<ul>
<li>HTMLの学習</li>
<li>CSSの学習</li>
<li>JavaScriptの学習</li>
</ul>実行結果
⑥<div>：グループ化タグ
役割：複数の要素をひとまとめにする
「division（分割）」の略です。このタグ自体には特定の意味はありませんが、複数のタグを箱に入れるように「グループ化」するために使います。CSSでまとめてデザインを当てる際に、最も頻繁に使われる非常に重要なタグです。
<div class="header">
<h1>ロゴ</h1>
<p>キャッチコピー</p>
</div>⑦<span>：部分装飾タグ
役割：文章の一部だけを囲む
<div>と同様に要素をグループ化しますが、こちらは「インライン要素」としてテキストの一部を囲むのに使われます。文章の中の特定の単語だけ色を変えたい時などに使います。
<p>今日は<span style="color: red;">とても</span>良い天気です。</p>⑧<br>：改行タグ
役割：文章の途中で強制的に改行する
「Break（ブレイク）」の略です。HTMLではコード上で改行しても、ブラウザでは無視されて1行につながって表示されてしまいます。そこで、強制的に次の行へ送りたい場所にこのタグを置きます。
- ポイント：このタグには「内容」がないため、終了タグ（</br>）が存在しません。これを「空要素」と呼びます。
- 注意点：<br>を連打して上下の余白を作るのはNGです。余白を作るのは本来CSSの役割なので、あくまで「文末の改行」として使いましょう。
<p>
東京都千代田区1-1-1<br>
〇〇ビル 3階
</p>⑨<input>：入力欄タグ
役割：ユーザーが文字を入力する場所を作る
お問い合わせフォームや検索窓などで使われます。 type属性を変えることで、テキスト入力、パスワード入力、チェックボックスなど、様々な形に変化します。
<input type="text" placeholder="名前を入力してください">実行結果
⑩<button>：ボタンタグ
役割：クリックできるボタンを作る
「送信する」「詳しく見る」などのボタンを作成します。CSSで装飾することで、見た目を自由自在に変えることができます。
<button type="button">今すぐ登録する</button>【一歩先へ】タグの「使い分け」で迷わないコツ
10選を紹介しましたが、初心者が特に迷うのが「divとpの使い分け」や「見出しの順番」です。初心者だからこそ意識したい、きれいなコードを書くための2つのポイントをお伝えします。
ポイント1：意味を考えよう（セマンティックHTML）
HTMLは「見た目」ではなく「意味」を決めるものです。「文字を大きくしたいからh1を使う」のではなく、「ここがページで一番重要な見出しだからh1を使う」という考え方を持ちましょう。正しい意味でタグを使うと、Googleの検索エンジンに正しく評価されやすくなります。
ポイント2：入れ子（親子関係）のルール
「箱の中に箱を入れる」ことはできますが、「段落（pタグ）の中に、大きな箱（divタグ）を入れる」のはルール違反です。
OK：
<div>
<p>テキスト</p>
</div>
NG：
<p>
<div>テキスト</div>
</p>このように外側を大きな意味のタグで囲む意識を持ちましょう。
まとめ：まずは「書いて表示」してみましょう！
今回紹介した10個のタグをマスターすれば、世の中にあるWebページの8割近くの構造を理解できるようになります。
- 見出し（h1〜h6）で構造を作り
- 段落（p）で内容を書き
- 画像（img）やリンク（a）で豊かにし
- グループ化で（div）で整理する
これがWeb制作の基本の流れです。
一度にすべてを暗記する必要はありません。実際にVSCodeなどのエディタにコードを書いてみて、ブラウザでどう表示されるかを自分の目で確認することが、上達への一番の近道です。
