「HTMLタグは数が多いので、まず一覧を覚えないと手が動かない」。そう身構えている方は多いのではないでしょうか。入門書も学習サイトも、たいていは「まずタグの種類を覚えましょう」という順番で始まるため、暗記が出発点だと受け取られやすいのです。
しかし、SEO記事を数多く制作し、各社のCMSに入稿してきた弊社の立場から言えるのは、記事1本の中で実際に手を触れるタグは十数個に収まるということです。残りは必要になった時点で調べれば足ります。覚える範囲を絞り、その文章が見出しなのか段落なのかを先に決めます。タグはその答えに合わせて選ぶだけのものでした。
本記事では、タグと要素の違いという基礎から、目的別のタグ一覧、記事制作の現場で実際に使う範囲、そしていまも一覧表に残っている廃止済みのタグまで、記事を書いて入稿する側の視点で順を追ってお伝えします。
- タグ・要素・属性の違いと、HTMLを書くときの3つの基本ルール
- 目的別に整理したHTMLタグ一覧（見出し・テキスト・リンク・画像・リスト・表・フォーム）
- 記事1本で実際に使うタグの範囲と、覚える順番
- 見た目でタグを選んだときに起きる不具合と、意味で選ぶ判断のしかた
- 表示が崩れたときの直し方と、廃止・非推奨タグの見分け方
HTMLタグとは、文章の役割をブラウザに伝える印
HTMLはHyperText Markup Languageの略で、文章のどこが何であるかをブラウザに伝えるための言語です。タグはその伝達に使う印にあたり、文字列を挟むように書くことで、ここからここまでは段落、ここは中見出し、というラベルを貼っていきます。
ブラウザはこのラベルを読み取り、見出しなら大きく太く、段落なら前後に余白を、といった標準の見た目を割り当てます。ただし、見た目を作ることがタグの目的ではありません。タグが指定しているのは見た目ではなく、その部分が何であるかという意味です。文字を大きくしたいからh2を使うのではなく、そこが中見出しだからh2を選ぶ、と考えましょう。見た目の調整は、CSSという別の言語が担当します。
タグは「この文章は何か」を示す印であり、「どう見せるか」はCSSが担当します。この分担を最初に押さえておくと、後のタグ選びで迷う場面がぐっと減ります。
タグ・要素・属性の3語の違い
3つの語は、日常の会話ではまとめて「タグ」と呼ばれますし、それで通じます。ただ、公式資料を読むときに指すものが変わるため、区別を知っておくと調べ物が速く終わります。
語 | 指しているもの | 例 |
|---|---|---|
タグ | 山かっこで囲んだ印そのもの | <p> と </p> |
要素 | 開始タグから終了タグまで、中身を含めた一かたまり | <p>本文です</p> の全体 |
属性 | 開始タグの中に書き足す補足情報 | <a href="URL"> の href="URL" |
MDNをはじめとする公式の資料は「要素」で統一されているのに対し、日本語の入門記事や制作現場の会話では「タグ」が使われます。同じものを別の呼び方で説明していると分かっていれば、両方を行き来しても混乱しません。
覚えておく基本ルールは3つ
書き方のルールは多くありません。次の3つを守れば、たいていのタグは意図どおりに働きます。
- 開始タグと終了タグで挟む。終了タグはタグ名の前にスラッシュを付ける
- 入れ子にするときは、内側のタグから先に閉じる
- タグ名も属性も半角英数で書く。全角が混ざると印として認識されない
例外として、終了タグを持たないタグもあります。画像のimg、改行のbr、横罫線のhr、入力欄のinput、ページ情報のmetaがそれで、中に挟むものがないため終了タグを書きません。こうしたタグを空要素と呼びます。
関連記事：【2025年最新版】初心者でもできるSEOのやり方完全ガイド | 上位表示するための具体的な方法を徹底解説
HTMLタグの全体像を4つの役割で整理
現在のHTML仕様には100を超える要素が定義されています。数だけ見ると気が遠くなりますが、役割で束ねると4つのかたまりに分かれます。
役割 | 主なタグ | 触る頻度 |
|---|---|---|
文書の骨組みをつくる | html、head、meta、title、body | ページ作成時に1回 |
文章の中身を組み立てる | h1〜h6、p、ul、ol、li、table | 記事を書くたびに毎回 |
文字に意味を持たせる | strong、em、code、small、ruby | 必要な箇所だけ |
外部のものを呼び込む | a、img、video、iframe、form | 仕様を調べながら |
この4分類は仕様書の並びそのままではなく、書く側の作業単位で分け直したものです。骨組みは1ページに1回書けば以降は触りません。一方、中身を組み立てるタグは記事を書くたびに使います。触る頻度が違えば、覚える優先順位も自然と変わってくるはずです。
とりわけ出番が多いのは、2つ目の「文章の中身を組み立てる」かたまりです。次の章では、この部分を厚めに扱います。
関連記事：dofollowとは？nofollowとの違いと設定不要な理由を解説
目的別のHTMLタグ一覧と使いどころ
ここからは、実際に書くときの目的から引ける形で整理します。すべてを覚える必要はありません。使う場面が来たときに、この章に戻って探せる並びにしてあります。
文書の骨組みをつくるタグ
HTMLファイルは、必ず決まった枠から始まります。CMSで記事を書く場合はこの部分に触れませんが、構造を知っておくとエラーが出たときにどこを見ればよいか見当が付きます。
タグ | 役割 |
|---|---|
<!DOCTYPE html> | HTML文書であることの宣言。ファイルの先頭に書く |
<html> | 文書全体を囲む。lang属性で言語を指定する |
<head> | ブラウザ向けの情報を入れる。画面には表示されない |
<meta> | 文字コードやページ説明などの設定 |
<title> | ブラウザのタブと検索結果に出るページ名 |
<body> | 画面に表示される中身をすべて入れる |
実際に並べると、次のような形になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>大見出し</h1>
<p>本文が入ります。</p>
</body>
</html>見出しと段落のタグ
文章を書くうえで最も出番が多いのが、この2種類です。
タグ | 役割 | 注意点 |
|---|---|---|
<h1>〜<h6> | 見出し。数字が小さいほど上位 | h1はページに1つ。階層を飛ばさない |
<p> | 段落 | 段落の間隔はCSSで調整する |
<br> | 強制改行 | 段落を分ける目的では使わない |
<hr> | 話題の区切りを示す横罫線 | 装飾目的で並べない |
迷いやすいのはh1とh2の関係でしょう。h1はページの主題を示すただ1つの見出し、h2以下はその内訳、という上下関係を保ちます。見出しタグとSEOの関係については、HTMLのhタグの使い分けをまとめた記事で詳しく扱っています。
文字に意味を持たせるタグ
太字や斜体に見えるタグには、画面上の見た目が同じでも意味が異なるものが混ざっています。
タグ | 見た目 | 意味 |
|---|---|---|
<strong> | 太字 | 内容として重要。読み上げソフトも強めて読む |
<b> | 太字 | 見た目だけの太字。重要性は示さない |
<em> | 斜体 | 文の中で強めて読ませたい箇所 |
<i> | 斜体 | 専門用語や外国語など、他と区別したい語 |
<mark> | 蛍光ペン風 | 参照のために目立たせたい箇所 |
<small> | 小さい文字 | 注釈や但し書き |
<code> | 等幅フォント | プログラムのコードであることを示す |
<ruby> | ふりがな | 漢字などの読み仮名を上に表示する |
strongとbは、ブラウザ上では同じ太字に見えます。違うのは、検索エンジンや読み上げソフトが受け取る情報のほうです。内容として重要な語ならstrong、商品名を目立たせたいだけならb、と分けて選びましょう。
リンクと画像のタグ
タグ | 主な属性 | 説明 |
|---|---|---|
<a> | href（リンク先）、target（開き方）、rel | クリックで移動するリンク |
<img> | src（画像の場所）、alt（代替テキスト）、width、height | 画像の表示 |
imgのaltは、画像が表示できなかったときに代わりに出る文字であり、読み上げソフトが読み上げる文字でもあります。altは飾りではなく、画像の内容を文字で説明する欄です。「画像1」「写真」といった中身のない語を入れるくらいなら、空のままにしておくほうが親切でしょう。
aタグでtarget="_blank"を指定して別タブで開かせる場合は、rel="noopener"を添えるのが現在の書き方です。主要ブラウザは既定で安全側に倒すようになりましたが、古い環境も想定するなら付けておいて損はありません。
箇条書きと表のタグ
タグ | 役割 |
|---|---|
<ul>と<li> | 順序のない箇条書き。点が付く |
<ol>と<li> | 順序のある箇条書き。番号が付く |
<dl>、<dt>、<dd> | 用語と、その説明の組み合わせ |
<table>、<tr>、<th>、<td> | 表。trが行、thが見出しセル、tdがデータのセル |
<blockquote> | 引用文の段落 |
liを単体で書くことはできません。必ずulかolの中に入れます。tableについては、かつてページ全体のレイアウトを組むために使われた時期がありましたが、現在はデータの表以外に使いません。スマートフォンで横にはみ出す原因になるためです。
領域を区切るタグ
タグ | 役割 |
|---|---|
<div> | 意味を持たないブロックのまとまり |
<span> | 意味を持たない行内のまとまり |
<header>、<footer> | ページや区画の上部・下部 |
<nav> | メニューなどのリンク集 |
<main> | ページの主要な内容。1ページに1つ |
<article> | それ単独で成立する記事のまとまり |
<section> | 見出しを伴う話題のまとまり |
<aside> | 補足情報やサイドバー |
divとspanは、意味を持たないという点で他と性質が違います。CSSを当てるための足場として使うもので、その区画に意味があるならheaderやnavなど該当するタグを選びます。とりあえずdivで囲む書き方が広まったのは、divなら何にでも使えて考えずに済むからでしょう。ただ、この手軽さは後から返ってきます。理由は次の章で扱います。
入力フォームのタグ
問い合わせフォームやアンケートで使う一群です。CMSやフォーム作成サービスを使うなら手で書く機会は少ないため、最後にまとめます。
タグ | 役割 |
|---|---|
<form> | 入力欄全体を囲み、送信先を指定する |
<input> | 1行のテキスト欄、チェックボックス、ラジオボタンなど |
<textarea> | 複数行のテキスト欄 |
<select>と<option> | 選択肢のプルダウン |
<button> | 送信や実行のボタン |
<label> | 入力欄と、その項目名を結び付ける |
labelは見落とされやすいものの、入力欄の使い勝手を左右します。labelとinputを結び付けておくと、項目名の文字をタップしただけで入力欄が選ばれるようになり、指での操作が楽になります。スマートフォンからの入力が中心のいまは、この差が入力途中での離脱に効いてくるでしょう。
タグの書き方は分かっても、何を書くかは別の問題として残ります
HTMLの書き方を押さえても、検索から人が来る記事になるかどうかは、構成と中身の設計で決まります。弊社は、キーワードの選定から構成づくり、執筆、入稿までを引き受けており、社内の担当者が本来の業務に戻れる状態をつくってきました。まずは、いまの運用のどの工程に時間がかかっているかからお聞かせください。
関連記事：302リダイレクトとは？301との使い分けと設定・エラー対処を解説
記事1本で実際に使うタグは十数個
ここまで一覧を並べてきましたが、ここで視点を反転させましょう。実務でこのすべてを使う日は、まず来ません。
SEO記事を制作してCMSに入稿する作業で、実際に手を触れるタグを数えてみましょう。見出しのh2とh3、段落のp、リンクのa、画像のimg、箇条書きのulとol、li、強調のstrong、引用のblockquote、そして表のtable一式です。多くても15前後で、記事本文の9割以上がこの範囲で組み上がります。
つまり、最初に手に馴染ませるべきは、見出し、段落、リンク、画像、リストの5系統です。この5つを手で書けるようになった時点で、CMSのエディタで表示が崩れても自力で直せます。残りは、必要が生じたときに調べれば十分でしょう。
Web担当者一覧表を全部覚えないと、記事の入稿はできないのでしょうか。
制作を引き継ぐ場面で、この質問はよく受けます。
Writers-hub編集部
全部は要りません。ただ、エディタの表示が崩れたときに直す相手は結局HTMLですから、見出し、段落、リンク、画像、リストの5つだけは手で書けるようにしておくと、他部署に頼まずに済みます。
覚え方にもこつがあります。タグ名を単独で暗記するのではなく、「この文章は何なのか」を先に言葉にしてから、対応するタグを引きます。中見出しだからh2、順番のある手順だからol、参照した他社の文章だからblockquote、という順番でした。この考え方が癖になると、一覧表を開く回数そのものが減っていきます。
タグを見た目で選ぶと起きる3つの不具合
見た目からタグを選ぶ書き方は、書いている最中こそいちばん速く進みますが、問題は公開した後に出てきます。記事を作って納めてきた立場から本音を言えば、後から手戻りが発生する原因の多くはこの選び方にあります。
- 文字を大きくしたいので、見出しではない箇所にh2を使う
- 段落の間隔を空けたいので、brを2つ並べる
- 太字にしたいので、重要ではない語にstrongを使う
- 横に並べたいので、データの表ではない箇所にtableを使う
- 何を囲んでいるか考えず、すべてdivで囲む
これらが引き起こす不具合は、3つに整理できます。
1つ目は、検索エンジンに文書の構造が伝わらないことです。見出しの体裁がpタグと文字サイズの指定で作られていると、検索エンジンから見ればそこは単なる段落にすぎません。記事の中でどこが話題の切れ目なのかを読み取れず、目次にも反映されない状態になります。
2つ目は、読み上げソフトやキーボード操作で内容をたどれなくなることです。画面を見ずに使う人は、見出しから見出しへ飛んで目的の箇所を探します。見出しがタグとして存在しなければこの移動ができず、上から順に全部聞くしかありません。altのない画像も同じで、そこに何があるのか伝わらないまま読み飛ばされます。
3つ目は、デザインを変えるときの作業量です。文字色やサイズをタグの中に直接書き込んでいると、サイトのデザインを変えるたびに全記事を開いて書き換えることになります。記事が100本あれば、100回分の書き換えでした。見た目をCSSにまとめておけば、1か所の修正で全記事に反映されるため、その差は後になるほど広がっていくでしょう。
どちらの書き方でも、公開した直後の見た目は変わりません。差が表に出るのは、記事が増えたときと、サイトを作り直すときです。
記事が増えてから直す作業は、書く作業より時間がかかります
書き方の型を決めないまま本数だけ増やすと、後から全記事を開いて直す作業が発生します。弊社は、社内で記事を書き続けられるように、構成の型づくり、執筆ルールの整備、書き上がった原稿の確認までを伴走してきました。いまの人数のまま運用を回したい場合の進め方をご覧ください。
HTMLタグでよくある入力ミスと直し方
手で書いていると、必ずどこかで表示が崩れます。原因はほぼ決まっているため、上から順に確認すれば見つかります。
崩れた箇所より前にさかのぼり、閉じていないタグを探しましょう。閉じ忘れがあると、それ以降の文章が全部そのタグの中に入り、見た目が一気に変わります。原因は崩れ始めた地点ではなく、その手前にあります。
山かっこ、スラッシュ、引用符が全角になっていると、タグとして認識されず、そのまま文字として画面に出ます。日本語入力に切り替えたまま打った箇所で起きやすいミスです。
値は引用符で挟みます。片方が抜けていると、そこから後ろの記述までリンク先の一部として読まれてしまいます。
外側のタグを先に閉じてしまうと、ブラウザが解釈を補正して意図しない構造になります。開いた順の逆順で閉じているかを見ます。
画面を右クリックして「検証」を選ぶか、F12キーで開きます。ブラウザが解釈した後のHTMLが表示されるため、自分が書いたつもりの構造と食い違っていれば、そこが崩れの原因です。
それでも見つからないときは、W3Cが公開しているMarkup Validation ServiceにURLかコードを貼り付けると、仕様に反している箇所を行番号付きで指摘してくれます。無料で使えるうえ、日本語のページでも問題なく動きました。検証ツールの開き方と結果の読み方は、MDNのデバッグ解説にまとまっています。
なお、山かっこそのものを文字として画面に出したいときは、専用の書き方に置き換えます。小なり記号は < 、大なり記号は > と書くと、タグとして解釈されず記号のまま表示されます。コード例を記事に載せるときに使う書き方で、覚えておくと役立つでしょう。
一覧表に残っている廃止・非推奨のタグ
タグの一覧を検索して探すときは、気を付けたい点がひとつあります。Web上に置かれた一覧表の中には、HTML 4.01の時代に作られたまま更新されていないものが混ざっていました。当時は現役だったものの、いまの仕様では廃止されたタグがそこには載っています。
廃止された理由は共通していて、見た目の指定をHTMLから切り離し、CSSに任せる方針へ変わったためです。代表的なものを挙げます。
廃止・非推奨のタグ | かつての用途 | 現在の書き方 |
|---|---|---|
<font> | 文字色・サイズ・書体の指定 | CSSのcolor、font-size、font-family |
<center> | 中央寄せ | CSSのtext-alignやmargin |
<big> | 文字を大きく表示 | CSSのfont-size |
<strike>、<tt> | 打ち消し線、等幅表示 | delタグ、codeタグ、CSSでの指定 |
<marquee>、<blink> | 文字を流す、点滅させる | 使わない。動きはCSSやJavaScriptで |
<frame>、<frameset> | 画面を分割して別ページを表示 | CSSのレイアウト機能で組む |
これらは、ブラウザによってはいまも表示されます。動くから使ってよい、とはなりません。仕様から外れた記述は将来のブラウザで表示されなくなる可能性があるうえ、検索エンジンや読み上げソフトにとっては意味を持たない記述として扱われます。コピー元の一覧が古くないかを確かめる手間は、公開した後に全記事を直す手間より小さいはずです。
現在の要素一覧を確認するなら、仕様の改訂に追随して更新されている資料にあたるのが確実でしょう。
※ 廃止と非推奨の区分は仕様の改訂で変わります。実装の前に上記の一覧で現在の扱いを確認してください。
HTMLタグに関するよくある質問
記事制作の引き継ぎでよく受ける質問をまとめました。
必要ありません。記事を書いて入稿する範囲であれば、見出し、段落、リンク、画像、リストの5系統に、強調と表を足した十数個で足ります。残りは使う場面が来たときに調べれば間に合います。
厳密には別のものを指します。山かっこで囲んだ印がタグ、開始タグから終了タグまでの一かたまりが要素です。会話ではどちらも「タグ」で通じますが、公式資料では要素という語で書かれていると知っておくと、読むときに迷いません。
あります。img、br、hr、input、metaなどは中に文章を挟まないため、開始タグだけで完結します。空要素と呼ばれる一群です。
その区画が見出しを伴う話題のまとまりならsection、CSSを当てるためだけの囲いならdivを選びます。迷ったときは、囲んだ範囲に見出しを付けられるかどうかで判断すると分かれます。
一つの誤りで順位が動くことは、まずありません。ただ、見出しがタグとして存在しない、altが空のまま画像が並ぶといった状態が積み重なると、検索エンジンがページの内容を読み取りにくくなります。順位への影響というより、内容が正しく伝わる下地の問題として扱うほうが実態に近いと見ています。
タグの整備まで手が回らないまま、記事だけが増えていませんか
見出しの階層やaltの記述は、書き手が変わると揺れやすくなりがちです。弊社では、構成づくりから執筆、入稿を前提とした形式の統一までを一括で引き受けてきました。いまの記事本数と更新頻度をお聞かせいただければ、どこから手を付けるかの見立てをお返しします。
まとめ｜HTMLタグは覚えるより意味で選ぶ
HTMLタグは、文章のどこが何であるかをブラウザに伝えるための印です。仕様には100を超える要素がありますが、記事を書いて入稿する範囲なら、実際に手を触れるのは十数個に収まります。
大事なのは数ではなく順番でした。文字を大きくしたいからh2を選ぶのではなく、そこが中見出しだからh2を選びます。この順番を守るだけで、検索エンジンにも読み上げソフトにも構造が伝わり、デザインを変えるときの作業量も変わってきます。見た目の指定はCSSに寄せておきましょう。この分担が、後の手戻りを減らしてくれるはずです。
まず手を動かすなら、見出し（h2、h3）、段落（p）、リンク（a）、画像（img）、リスト（ul、ol、li）の5系統から始めてみてください。この範囲を手で書けるようになると、CMSの表示が崩れても自力で直せます。
私たち合同会社Writers-hubは、SEO記事の制作と各社CMSへの入稿を数多く手がけてきました。その経験から言えるのは、記事の出来を左右するのはタグの知識量ではなく、書き始める前に何を書くか決まっているかどうかだということです。タグの使い方が整理できたら、次は記事の中身の設計に時間を回してみてください。
