タグ
初級読み方：タグ｜英語：Tag
HTMLの部品で、<タグ名>内容</タグ名> の形で書くよ。開始タグと終了タグがあるよ。
やさしい説明
タグとは、HTMLの「命令文」です。< > で囲まれた記号で、ブラウザに「ここは見出しだよ」「ここは段落だよ」と伝えます。
文房具に例えると、タグは「ラベルシール」のようなものです。ノートに「数学」「英語」とラベルを貼ると中身がわかりますよね。タグも同じで、文章に「見出し」「段落」「リンク」とラベルを貼っていきます。
ほとんどのタグは「開始タグ」と「終了タグ」のペアで使います。終了タグには /（スラッシュ）がつきます。例：<p>...</p>
ただし、<br>（改行）や <img>（画像）のように、終了タグがないタグもあります。これらは「空要素」と呼ばれます。
具体例・使い方
<!-- 開始タグと終了タグのペア -->
<h1>見出し</h1>
<p>段落の文章です。</p>
<a href="https://example.com">リンク</a>
<!-- 終了タグがないタグ（空要素） -->
<br>
<img src="photo.jpg" alt="写真">
<input type="text">よく使うタグ一覧
h1〜h6— 見出し（h1が最上位）p— 段落・文章a— リンク（href属性でリンク先を指定）img— 画像（src・alt属性が必須）div/span— 汎用コンテナ（ブロック / インライン）ul/ol+li— 箇条書き / 番号付きリストheader/main/footer— ページ構造を表すセマンティックタグbutton/input/form— フォーム・操作系
HTML5 からは div の代わりに意味を持つタグ（header・main・section・article・footer）を使うことが推奨されています。SEOやアクセシビリティの向上につながります。
いつ使う？
HTMLを書くときは常にタグを使います。自己紹介ページを作るなら、名前を <h1> で囲み、趣味の説明を <p> で囲み、好きなサイトへのリンクを <a> で作ります。
間違いやすいポイント
❌ 終了タグの / を忘れる
終了タグに / がないと、ブラウザが自動修正しますが意図しない表示になることがあります。必ず対応する終了タグを書きましょう。
<!-- ❌ 終了タグに / がない -->
<p>こんにちは<p>
<!-- ✅ 正しい書き方 -->
<p>こんにちは</p>❌ タグの入れ子を間違える
「後に開いたタグを先に閉じる」が入れ子の基本ルールです。順番を間違えるとブラウザが自動修正しますが、意図しないレイアウト崩れの原因になります。
<!-- ❌ 開いた順番と逆に閉じていない -->
<p><strong>太字</p></strong>
<!-- ✅ 後に開いたタグを先に閉じる -->
<p><strong>太字</strong></p>よくある疑問
Q: タグは全部覚える必要がある？
A: よく使うタグは20個程度です。全部覚える必要はなく、必要なときに調べれば大丈夫です。
Q: 閉じタグを忘れるとどうなる？
A: レイアウトが崩れたり、文字が全部太字になったりします。開発者ツール（F12）で構造を確認すると原因がわかります。
Q: 閉じタグがいらないタグはある？
A: はい。<img>、<br>、<hr>、<input>、<meta>、<link>などは閉じタグ不要の「空要素（void element）」です。
関連用語
📖 関連レッスン
レッスンを見る →