「タグの種類が多すぎて、どれを使えばいいか迷う」 「divタグばかり使ってしまうけれど、もっと適切なタグがあるはず…」
HTMLには数百種類のタグがありますが、実務で頻繁に使うのはそのうちの30個ほどです。この記事では、それらをカテゴリー別に整理し、正しい意味と使い分けを解説します。
ページの「大きな枠組み」を作るタグ（5選）
これらは、Googleのロボットにサイトの構造を伝えるために非常に重要です。
<header>：サイトや記事の「頭」。ロゴやメニューを入れます。<nav>：主要な「ナビゲーション（メニュー）」。<main>：そのページの「主役」。1ページに1回だけ使います。<article>：それだけで内容が完結する「記事（投稿）」。<footer>：サイトの「足跡」。コピーライトや連絡先を入れます。
文書に「意味」を与えるテキストタグ（10選）
ただの文字を「見出し」や「段落」に変える魔法です。
<h1>〜<h6>：見出し。数字が小さいほど重要です。<p>：段落。普通の文章はこれ。<br>：改行。多用しすぎず、CSSでの調整を優先しましょう。<hr>：区切り線。話題が変わる時に使います。<strong>：「超重要！」。太字になります。<em>：「強調」。斜体になることが多いです。<blockquote>：他のサイトなどからの「引用」。<pre>：書いた通りに表示。コード紹介などに便利です。<code>：プログラムのコードであることを示します。<span>：一部だけに色をつけたい時などの「目印」。
リンクとマルチメディア（5選）
Webサイトをリッチにする要素です。
<a>：リンク。href属性で飛び先を指定します。<img>：画像。alt属性で画像の説明を入れるのがマナー。<ul>：順番のない「箇条書き（点）」。<ol>：順番のある「番号付きリスト（1.2.3.）」。<li>：リストの中の「項目」。
表と入力フォーム（10選）
お問い合わせやデータ表示に使います。
<table>：表全体の枠組み。<tr>：表の「行（横一行）」。<th>：表の「見出しセル」。<td>：表の「データセル」。<form>：入力フォーム全体の囲い。<input>：入力欄。typeで文字、チェックボックスなどを選びます。<textarea>：長いメッセージ用の入力欄。<button>：クリックするボタン。<label>：入力欄の説明。「名前」などの文字。<select>：プルダウン形式の選択肢。
【コラム】divとsection、どう使い分ける？
初心者が一番迷うのがここです。
<section>：中身に「見出し（h2など）」がある、意味のまとまり。<div>：特に意味はないけれど、デザインのために囲いたい時。
迷ったら、**「タイトルがつけられるまとまりならsection、ただの箱ならdiv」**と覚えましょう！
まとめ：全部覚えなくてOK！
一気に30個覚える必要はありません。まずは**「こんなタグがあったな」と眺めるだけ**で十分です。実際にコードを書くときに、このページを辞書として開いて確認してみてください。
💡 次のステップ：【SEO対策】Googleに好かれる「正しいタグ選び」の優先順位
コメント