WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

HTMLの種類とは？初心者が覚えたいタグを目的別に一覧で解説

HTMLの種類を文書構造や文章など目的別に学ぶ記事

HTMLを学び始めると、タグの種類が多くて「どれから覚えればよいの？」と迷いますよね。すべてを一度に暗記する必要はありません。

HTMLの要素は、文書構造、文章、リンク・画像、リスト・表、フォームのように目的別に分けると整理しやすくなります。まずはページ制作でよく使う20個ほどを、作りたい内容に合わせて調べながら使えば十分です。

この記事では、初心者が最初に覚えたいHTML要素を役割別に紹介し、実際のコードとブラウザ表示を見ながら使い方を解説します。「HTML5などのバージョンの種類を知りたい」という疑問にも後半で答えます。

HTMLの種類は目的別に覚える

HTMLは、Webページ内の情報へ「これは見出し」「これは画像」「これは入力欄」という意味を付けるマークアップ言語です。見た目を飾るためだけでなく、文章の構造をブラウザや検索エンジン、スクリーンリーダーへ伝えます。

目的最初に覚えたい要素主な役割
HTML文書の基本html、head、body文書全体を組み立てる
文書構造header、nav、main、article、section、aside、footerページ内の領域へ意味を付ける
文章h1〜h6、p、strong、br見出しや段落を表す
リンク・画像a、img、figure、figcaption別ページへの移動や画像を表す
リスト・表ul、ol、li、table、tr、th、td項目や表形式のデータを整理する
フォームform、label、input、textarea、button利用者から情報を受け取る

HTML Standardにはさらに多くの要素がありますが、頻繁に使うものは限られます。目的に合う要素を選ぶことが大切で、タグ名を機械的に覚える必要はありません。

タグと要素の違い

「HTMLタグ」と「HTML要素」は会話で同じ意味のように使われますが、厳密には範囲が異なります。<p>と</p>がタグで、開始タグ・内容・終了タグを合わせた全体が要素です。

<p class="lead">HTMLを学習しています。</p>
│                │                      │
│                │                      └ 終了タグ
│                └ 内容
└ 開始タグ（classは属性）

└──────── p要素全体 ────────┘

class="lead"のように開始タグへ追加する情報は「属性」です。属性を使うと、要素を識別したり、リンク先や画像の説明などを追加したりできます。

HTML文書の基本を作る要素

新しいHTMLファイルは、まず次のひな形から始めます。index.htmlを作成し、そのまま貼り付けて保存してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>はじめてのHTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>はじめてのHTML</h1>
  <p>ここにページの内容を書きます。</p>
</body>
</html>
  • <!doctype html>：現在のHTML文書であることをブラウザへ伝えます。
  • html：HTML文書全体のルート（最上位）です。日本語ページではlang="ja"を付けます。
  • head：タイトルや文字コードなど、主にブラウザが利用する情報を入れます。
  • body：見出しや文章など、ページに表示する内容を入れます。

meta charset="UTF-8"は文字コードを指定します。日本語の文字化けを防ぐため、head要素の先頭付近に置きましょう。

文書構造を表すHTML要素

サイトのヘッダー、メニュー、本文、関連記事、フッターには、それぞれの役割を表す要素があります。次の画像では、主な要素がページのどこに対応するかを確認できます。

header nav main article aside footerの関係を示したブラウザ表示

index.htmlのbody要素内へ、次のHTMLを記述します。タグ名だけで各領域の役割が分かるため、divだけで組み立てるより文書構造を伝えやすくなります。

<header class="site-header">サイト上部</header>

<nav class="site-nav">ナビゲーション</nav>

<div class="layout">
  <main class="site-main">
    <article>
      <h1>記事タイトル</h1>
      <p>独立した記事の内容です。</p>
    </article>
  </main>

  <aside class="site-aside">関連記事</aside>
</div>

<footer class="site-footer">サイト下部</footer>

表示画像と同じ配置を試す場合は、style.cssへ次のCSSを追加します。CSSは見た目を確認しやすくするためのもので、HTML要素の意味はCSSの有無で変わりません。

* {
  box-sizing: border-box;
}

body {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
  color: #152037;
  font-family: sans-serif;
}

.site-header,
.site-footer {
  padding: 20px 24px;
  color: #ffffff;
  background-color: #2563eb;
  border-radius: 14px;
}

.site-nav {
  margin-top: 12px;
  padding: 13px 20px;
  background-color: #dbeafe;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px;
  margin: 14px 0;
}

.site-main,
.site-aside {
  min-height: 240px;
  padding: 22px;
  border: 2px dashed #93c5fd;
}

mainはページの中心的な内容に使い、通常は1ページに1つです。articleは単独で配信・再利用できる記事、sectionは見出しを伴う内容のまとまり、asideは補足や関連記事に使います。

文章とリンクを表すHTML要素

記事本文では、見出し、段落、強調、リンクを表す要素をよく使います。次のカードでは、h1、p、strong、aを組み合わせています。

h1 p strong a要素を使った記事カードのブラウザ表示
<article class="content-card">
  <h1>はじめてのHTML</h1>
  <p>
    HTMLは、文章に<strong>意味と構造</strong>を付ける言語です。
  </p>
  <p class="note">
    詳しい手順は<a href="#guide">学習ガイド</a>で確認できます。
  </p>
</article>
.content-card {
  padding: 30px;
  border: 1px solid #d8e5f5;
  border-radius: 16px;
}

.content-card p {
  line-height: 1.8;
}

.content-card a {
  color: #1d4ed8;
  font-weight: 700;
}

.note {
  margin-top: 18px;
  padding: 14px 18px;
  background-color: #fff7d6;
  border-left: 5px solid #fbbf24;
}
  • h1〜h6：見出しを階層で表します。数字が小さいほど上位の見出しです。
  • p：文章の段落を表します。
  • strong：内容の重要性や緊急性を表します。
  • a：href属性でリンク先を指定します。
  • br：住所や詩など、同じ段落内で意味のある改行に使います。

リンクと画像を表すHTML要素

リンクにはa、画像にはimgを使います。画像と説明文をひとまとまりにする場合は、figureとfigcaptionを組み合わせます。

<p>
  <a href="about.html">私たちについて</a>
</p>

<figure>
  <img
    src="images/cafe.jpg"
    alt="木製テーブルが並ぶ明るいカフェの店内"
    width="800"
    height="533"
  >
  <figcaption>窓から自然光が入る店内です。</figcaption>
</figure>

imgは終了タグを持たない「空要素」です。alt属性には、画像を見られない場合にも内容や目的が伝わる代替テキストを入れます。装飾だけの画像ならalt=""とします。

リストと表を表すHTML要素

並列の項目はul、手順のように順番が重要な項目はolを使います。行と列の関係があるデータはtableで表します。

ul li table要素を使ったリストと表のブラウザ表示
<h1>学習する内容</h1>

<ul class="features">
  <li>HTMLで文章の構造を作る</li>
  <li>CSSで見た目を整える</li>
  <li>ブラウザで表示を確認する</li>
</ul>

<table>
  <thead>
    <tr>
      <th>言語</th>
      <th>主な役割</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>意味と構造</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>色や配置</td>
    </tr>
  </tbody>
</table>
.features {
  margin-block: 22px 30px;
  line-height: 1.9;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 14px 16px;
  border: 1px solid #cbd8e8;
  text-align: left;
}

th {
  color: #ffffff;
  background-color: #2563eb;
}

tbody tr:nth-child(even) {
  background-color: #f1f6ff;
}

表はレイアウト目的で使わず、比較表や料金表など、見出しとデータの関係がある内容に使いましょう。thは見出しセル、tdはデータセルです。

フォームを表すHTML要素

お問い合わせや検索欄など、利用者から情報を受け取る部分にはフォーム要素を使います。次の例では、名前、問い合わせ内容、送信ボタンを用意しています。

form label input textarea button要素を使ったお問い合わせフォーム
<h1>お問い合わせ</h1>

<form action="/contact" method="post">
  <label>
    お名前
    <input type="text" name="name" autocomplete="name">
  </label>

  <label>
    お問い合わせ内容
    <textarea name="message"></textarea>
  </label>

  <button type="submit">送信する</button>
</form>
form {
  display: grid;
  gap: 18px;
  padding: 28px;
  background-color: #f8fbff;
  border: 1px solid #d8e5f5;
  border-radius: 16px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #aebfd4;
  border-radius: 9px;
  font: inherit;
}

button {
  justify-self: start;
  padding: 13px 28px;
  color: #ffffff;
  background-color: #2563eb;
  border: 0;
  border-radius: 10px;
}

labelで説明と入力欄を関連付けると、文字部分をクリックしても入力欄へフォーカスできます。buttonには動作が分かるようtype="submit"を明示しています。

HTMLだけでは入力内容をメール送信できません。実際の送信には、サーバー側のプログラムやフォームサービスが必要です。

見た目ではなく意味でタグを選ぶ

「太字にしたいからstrong」「余白がほしいからbrを連続」のように、見た目だけで要素を選ぶのは避けましょう。太字や余白などの装飾はCSSで設定します。

作りたい内容適したHTML見た目の調整
重要な文章strongfont-weightなど
意味のある段落pmarginなど
ページ内のまとまりsectionなど背景色、枠線など
クリックできる移動先a色、下線など
実行する操作button色、サイズなど

意味に合うHTMLを使うと、CSSを外しても内容の順序や関係が伝わります。キーボードやスクリーンリーダーでも利用しやすくなり、検索エンジンにも構造を理解してもらいやすくなります。

HTMLのバージョンは現在どれを使う？

既存記事ではHTML 2.0、3.2、4.01、HTML5などを「HTMLの種類」として紹介していました。これらはHTMLが発展してきた歴代仕様です。

現在、新しくWebページを作るときにHTML 4.01やHTML 5.2を選ぶ必要はありません。WHATWGが更新を続けるHTML Living Standardが現行の標準で、文書の先頭には簡潔な<!doctype html>を記述します。

<!doctype html>

HTMLの誕生からHTML5、Living Standardまでの流れを詳しく知りたい方は、次の記事で時系列に確認できます。

HTMLの歴史を初心者向けに解説｜誕生からHTML5・現在の標準まで

仕様を確認する場合は、WHATWGのHTML Living Standard（英語）が一次情報です。普段の制作では、必要な要素をリファレンスで調べながら使えば問題ありません。

HTMLの種類についてよくある質問

HTMLタグは全部で何種類ありますか？

仕様は更新され、新しい要素の追加や古い要素の廃止もあるため、固定の数を暗記する意味はあまりありません。目的別のリファレンスから必要な要素を探す方法を身に付けましょう。

divとsectionはどう使い分けますか？

sectionは、通常は見出しを伴う内容のまとまりに使います。適した意味を持つ要素がなく、CSSやJavaScriptのためにまとめたいだけならdivを使います。

大文字と小文字はどちらで書きますか？

HTML構文ではタグ名の大文字・小文字を区別しませんが、現在は小文字で統一する書き方が一般的です。記事内のコードも小文字に統一しています。

HTMLの種類まとめ

HTML要素は、文書構造、文章、リンク・画像、リスト・表、フォームのように目的別に分けると覚えやすくなります。まずはhtml、head、bodyと、今回紹介した主要な要素から使ってみてください。

タグの数を暗記するより、「この内容にはどんな意味があるか」を考えて要素を選ぶことが大切です。迷ったときは目的別の一覧へ戻り、小さなHTMLファイルで表示を確かめながら進めましょう。