MENU
Webディレクター10年・300案件超の観察者が、Webサイト制作費の相場・コーポレートサイトのリニューアル・WordPress/SWELL選びを現場目線で解説。
  1. ホーム
  2. Web制作基礎
  3. HTML
  4. HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】

HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】

HTML
HTMLタグ一覧【全タグ解説・コピペで使えるリファレンス完全版】

この記事でわかること

  • Web制作で本当によく使うHTMLタグを、基本構造／テキスト／リンク／画像／リスト／表／フォーム／メディアの用途別に整理
  • 各タグのコードサンプル付き。コピーしてそのまま使える早見表
  • <strong>と<b>、classとidなど混同しやすいタグ・属性の使い分け
  • 終了タグが不要な空要素（void element）の一覧と、SEOで効くタグの押さえどころ

公的情報源: 総務省「情報通信白書」（参照）／W3C「HTML Standard」（参照）

HTMLそのものを基礎から知りたい方は、先に概念をつかんでおくと理解が速くなります。

HTMLとは？初心者向け解説もあわせてどうぞ。

結論を先に書きます

HTMLタグとは、Webページの構造や見た目を定義する「命令文」です。タグでテキスト・画像・リンクなどを配置し、ブラウザがそれを解釈して画面に表示します。

HTML5で定義されているタグは約110種類。ただし実務で日常的に使うのは30〜40種類程度です。この記事で扱うタグを押さえれば、大半のWebページは組み立てられます。

この記事の要点
  • 覚えるべきは全タグではなく「用途別の主要タグ30〜40個」
  • タグは意味（セマンティクス）で選ぶのが現在の標準。見た目はCSSで整える
  • 見出し<h1>はページに1つ、alt属性は必ず設定——この2点はSEOにも直結
  • タグ名は小文字が標準。<br>などは終了タグ不要の空要素

この記事では、Web制作の現場でよく使うHTMLタグを用途別に解説します。コードサンプルはコピペで動く形にしてあるので、リファレンスとして手元に置いて使ってください。

目次

HTMLの基本構造タグ

まず押さえたいのが、すべてのHTMLファイルに共通する骨組みのタグです。<!DOCTYPE html>から<body>までの並びは、どのページでもほぼ固定です。

  • <!DOCTYPE html>：HTML5の宣言（ファイル先頭）
  • <html>：ドキュメント全体を囲むルート要素
  • <head>：メタ情報（画面非表示）
  • <body>：実際に表示されるコンテンツ

各タグの役割

<!DOCTYPE html>はHTMLのバージョンを宣言するタグです。現在はHTML5の宣言として、この1行を先頭に置きます。

<html>はドキュメント全体を囲むルートタグです。lang属性で言語を指定します。<head>はタイトル・文字コード・CSS読み込みなどのメタ情報を入れる場所で、画面には表示されません。一方<body>には、実際にブラウザへ表示するコンテンツを書きます。

基本構造のテンプレート（コピペ用）

新規ページを作るときは、まず以下をコピーして書き始めると確実です。

<!DOCTYPE html> <html lang="ja"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>ページタイトル</title> </head> <body>   <h1>見出し</h1>   <p>本文テキスト</p> </body> </html>

構造をもっと詳しく知りたい方はHTMLの基本構造を徹底解説でDOCTYPE・html・head・bodyの役割を整理しています。

メタデータタグ（headタグ内）

<head>の中に書く、ページの情報をブラウザや検索エンジンに伝えるタグです。表示はされませんが、文字化け防止・スマホ対応・SEOに直結します。

<meta>

文字コード・レスポンシブ対応・ページ説明文などを指定します。最低限、文字コードとviewportは必須です。

<!-- 文字コードの指定 --> <meta charset="UTF-8">





<!-- レスポンシブ対応（スマホ表示） --> <meta name="viewport" content="width=device-width, initial-scale=1.0">





<!-- SEO：ページの説明文 --> <meta name="description" content="ページの説明文をここに記述します（120文字以内が目安）">

<title>

ブラウザのタブと検索結果に表示されるページタイトルです。SEOで重要な要素なので、ページ内容を端的に表す語を入れます。

<title>HTMLタグ一覧 | Webサイト制作ノート</title>

<link>

CSSファイルやファビコンなど、外部ファイルを読み込むタグです。終了タグは不要です。

<!-- CSSファイルの読み込み --> <link rel="stylesheet" href="https://example.com/style.css">





<!-- ファビコンの設定 --> <link rel="icon" href="https://example.com/favicon.ico">

セクション・レイアウトタグ

ページの大枠を意味のあるブロックに区切るタグです。<div>で何でも囲むのではなく、役割に合ったタグを選ぶと、検索エンジンや支援技術がページ構造を理解しやすくなります。

タグ役割
ページのヘッダー（ロゴ・ナビ）
ナビゲーションメニュー
メインコンテンツ（1ページに1回）
テーマごとのまとまり
独立した記事・投稿
サイドバー・補足情報
フッター（著作権・リンク）
<div>意味を持たないグループ化

意味を持つタグ（<header>など）をセマンティックタグと呼びます。たとえばメインコンテンツは次のように囲みます。

<main>   <article>     <h2>記事タイトル</h2>     <p>記事の内容</p>   </article> </main>

<div>は特定の意味を持たないブロック要素のグループ化に使います。CSSでスタイルを当てる単位としてよく登場します。意味づけが必要な場面では、まずセマンティックタグを検討しましょう。

見出しタグ

<h1>〜<h6>の6段階があります。数字が小さいほど重要な見出しで、文章を階層構造に整理する役割を持ちます。

<h1>最上位の見出し（ページに1つ）</h1> <h2>大見出し</h2> <h3>中見出し</h3> <h4>小見出し</h4>

SEOで効く見出しの使い方
  • <h1>はページに1つだけ。メインテーマのキーワードを含める
  • <h2>〜<h3>で内容を階層構造に整理する
  • 見た目の大きさで選ばず、文章の構造で選ぶ（サイズはCSSで調整）

見出しを正しく階層化すると、検索エンジンがページの論理構造を理解しやすくなります。装飾のために順番を飛ばす（<h1>の次にいきなり<h4>など）使い方は避けましょう。

テキストタグ

文章を組み立てる基本のタグです。<p>が中心で、強調や改行を補助的に組み合わせます。

タグ役割

段落
一部だけスタイルを当てるインライン要素
重要なテキスト（意味的な強調・太字）
強調（斜体）

強制改行（終了タグ不要）
水平線・区切り（終了タグ不要）

<strong>と<b>は見た目が似ていますが、役割が違います。<strong>は「意味的に重要」を示すタグで、検索エンジンや読み上げ環境にも重要度が伝わります。単に太字にしたいだけなら<b>でも構いませんが、重要度を伝えたい場合は<strong>を選びます。

<p><strong>重要な情報</strong>はこのように強調します。</p> <p>テキストの<span class="accent">ここだけ</span>にスタイルを当てます。</p>

改行は<br>を使いますが、段落の区切りには<p>を使い、<br>の多用は避けるのが基本です。詳しい使い分けはHTMLの改行方法｜brタグとpタグの違いで整理しています。

リンクタグ

ページ同士をつなぐ<a>（アンカー）タグです。href属性にリンク先URLを指定します。Webの最も基本的な機能を担うタグです。

<!-- 通常のリンク --> <a href="https://example.com/">リンクテキスト</a>





<!-- 別タブで開くリンク --> <a href="https://example.com/" target="_blank" rel="noopener noreferrer">別タブで開く</a>





<!-- ページ内リンク（アンカーリンク） --> <a href="#section1">セクション1へ移動</a>

別タブで開くときの注意点

target="_blank"で別タブを開くときは、rel="noopener noreferrer"を一緒に付けます。リンク先から元ページを操作されるセキュリティリスクを防ぐためです。

属性の細かい使い分け（target・rel・メールリンクなど）はaタグの使い方｜リンクの書き方・target属性・rel属性で詳しく解説しています。

画像タグ

画像を表示する<img>タグです。srcに画像のパス、altに代替テキストを指定します。終了タグは不要です。

<!-- 基本的な書き方 --> <img src="https://example.com/image.jpg" alt="画像の説明文">





<!-- 幅・高さを指定 --> <img src="https://example.com/photo.jpg" alt="写真の説明" width="800" height="600">





<!-- 遅延読み込み（パフォーマンス改善） --> <img src="https://example.com/image.jpg" alt="説明" loading="lazy">

alt属性は必ず設定する

alt属性（代替テキスト）は、画像が表示できないときの代替になるだけでなく、検索エンジンが画像内容を理解する手がかりになります。SEO・アクセシビリティの両面で重要なので、原則として省略しません。

書き方・レスポンシブ対応・altの書き方はimgタグの使い方｜HTML画像表示の書き方・alt属性でさらに掘り下げています。

リストタグ

項目を並べるリストのタグです。順序の有無で<ul>と<ol>を使い分け、項目はすべて<li>で囲みます。

タグ役割
    +
順序なしリスト（・マーク）
    +
番号付きリスト（1, 2, 3…）
+
+
定義リスト（用語と説明）

手順や順番のあるものは番号付きリスト、並列の項目は順序なしリストを使います。

<!-- 順序なしリスト --> <ul>   <li>HTML</li>   <li>CSS</li>   <li>JavaScript</li> </ul>





<!-- 番号付きリスト --> <ol>   <li>まずHTMLを学ぶ</li>   <li>次にCSSを学ぶ</li>   <li>最後にJavaScriptを学ぶ</li> </ol>

用語とその説明をセットで並べたいときは、定義リスト（<dl>）を使います。<dt>が用語、<dd>が説明です。

テーブルタグ

表を作成するタグ群です。<table>で全体を囲み、行・ヘッダーセル・データセルを組み合わせます。比較表や仕様一覧で活躍します。

<table>   <thead>     <tr>       <th>タグ名</th>       <th>説明</th>     </tr>   </thead>   <tbody>     <tr>       <td>p</td>       <td>段落テキスト</td>     </tr>   </tbody> </table>

各タグの役割は次のとおりです。

タグ役割
テーブル全体を囲む
ヘッダー行グループ
本文行グループ
テーブルの1行
ヘッダーセル（太字・中央揃え）
データセル

表の構造や見出しセルの作り方はtableタグの書き方｜HTMLテーブル（表）の作り方で基礎から解説しています。

フォームタグ

ユーザーが入力するフォームを作るタグ群です。<form>で全体を囲み、入力欄・ボタン・ラベルを組み合わせます。

タグ役割
フォーム全体を囲む
入力欄（typeで種類を指定）