HTMLの要素一覧。どこから覚える？
HTMLにはたくさんのタグがありますが、最初からすべてを覚える必要はありません。
まずは、見出しや段落などの「文章を作るタグ」から始め、次にリンク・画像・リストを覚えていきましょう。これらが使えるようになると、簡単なWebページを作れるようになります。
その後、ページの構造を作るタグや、表・お問い合わせフォームで使用するタグへ進むと、無理なく学習できます。
この記事では、初心者が最初に覚えたいHTMLタグを、次の3段階に分けて紹介します。
- 最初に覚えたい基本タグ
- ページの構造を作るタグ
- 表やフォームを作るときに覚えるタグ
すべてを暗記するのではなく、実際にコードを書きながら、必要なタグを少しずつ使えるようになりましょう。
HTMLの「タグ」と「要素」の違い
HTMLを学習していると、「タグ」と「要素」という言葉が出てきます。
次のHTMLを例に確認してみましょう。
<p>これは文章の段落です。</p>
このコードは、次のように分けられます。
<p>：開始タグ</p>：終了タグこれは文章の段落です。：内容- 開始タグから終了タグまでの全体：p要素
一般的には、<p>を「pタグ」と呼ぶことが多いのですが、文章の内容を含めた全体を指す場合は「p要素」と呼びます。
初心者のうちは、厳密に言い分けられなくても問題ありません。まずは「タグを使って、文章や画像に意味を付けていく」と考えておきましょう。
HTMLファイルの基本的な形
個別のタグを覚える前に、HTMLファイル全体の形を確認しておきましょう。
<!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>
<header>
<h1>サイト名</h1>
</header>
<main>
<section>
<h2>見出し</h2>
<p>ここに文章を入れます。</p>
</section>
</main>
<footer>
<p><small>© 2026 Sample Site</small></p>
</footer>
</body>
</html>
HTMLファイルは、大きくheadとbodyに分かれています。
headには、ページタイトルや文字コード、CSSの読み込みなど、主にブラウザや検索エンジンへ伝える情報を記述します。
bodyには、見出し・文章・画像など、ブラウザの画面に表示する内容を記述します。
HTMLファイルの基本要素
| 要素 | 意味・使い方 | 備考 |
|---|---|---|
<!DOCTYPE html> | HTML5で作成された文書であることを宣言する | HTMLファイルの先頭に記述 |
<html> | HTML文書全体を囲む | 日本語ページではlang="ja"を指定 |
<head> | ページの設定情報をまとめる | 基本的に画面には表示されない |
<body> | 画面に表示する内容をまとめる | 見出し・文章・画像などを記述 |
<title> | ページのタイトルを設定する | ブラウザのタブや検索結果などに使用 |
HTMLタグはどこから覚える？
HTMLタグは、次の順番で覚えるのがおすすめです。
STEP1：文章・リンク・画像を表示する
最初は、次のタグから覚えましょう。
<h1>～<h6> <p> <a> <img> <ul> <ol> <li>
これらを使えるようになると、見出し・文章・リンク・画像・リストを配置した簡単なWebページを作れます。
STEP2：ページの構造を作る
基本的な内容を表示できるようになったら、次のタグを覚えます。
<header> <nav> <main> <section> <article> <footer> <div> <span>
これらは、ページの内容を役割ごとに分けたり、CSSでレイアウトや装飾を行ったりするときに使用します。
STEP3：表やフォームを作る
必要に応じて、表やお問い合わせフォームで使用するタグを学習します。
<table> <tr> <th> <td> <form> <label> <input> <textarea> <select> <button>
最初からすべてを覚えるのではなく、Webページを作りながら、必要になったタグを調べて使うことが大切です。
覚えたいHTMLタグ一覧
ここからは、HTMLタグを役割ごとに紹介します。
文字・文章の基本要素（見出し含む）
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<h1>〜<h6> | 見出し（数字が小さいほど大きな見出し） | <h2>サービス紹介</h2> | ページに<h1>は原則1つ。階層構造を意識 |
<p> | 段落（パラグラフ） | <p>本文の段落です。</p> | 上下に余白がつく |
<br> | 改行 | こんにちは<br>世界！ | 閉じタグ不要 |
<strong> | 意味のある強調（重要な語） | <strong>重要</strong> | 音声読み上げでも強調される |
<em> | 感情的な強調（斜体表示） | <em>とても大切</em> | ブラウザでは斜体 |
<b> | 見た目だけの太字（意味なし） | <b>太字</b> | 装飾目的のみ |
<i> | 見た目だけの斜体（意味なし） | <i>斜体</i> | 装飾目的 |
<span> | インライン装飾やグループ化 | <span class="blue">青文字</span> | CSSで見た目を変えるときに使用 |
リンク関連
| 要素・属性 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<a> | ハイパーリンクを作る | <a href="https://example.com">公式サイト</a> | hrefでリンク先指定 |
target="_blank" | 新しいタブで開く | <a href="..." target="_blank">別タブ</a> | 外部リンクでよく使う |
mailto: | メール送信リンク | <a href="mailto:info@example.com">お問い合わせ</a> | メールアプリが起動 |
tel: | 電話番号リンク | <a href="tel:0123456789">電話をかける</a> | スマホで有効 |
id | ページ内リンクのジャンプ先 | <a href="#about">紹介へ</a>／<div id="about">…</div> | ページ内スクロールに使用 |
画像・図解
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<img> | 画像を表示 | <img src="photo.jpg" alt="風景"> | alt属性は必須（代替テキスト） |
<figure> | 画像＋説明文のまとまり | <figure><img src="img.jpg"><figcaption>説明</figcaption></figure> | 独立した図表に使用 |
<figcaption> | 図や画像の説明文 | <figcaption>この写真は〜</figcaption> | figure内に記述 |
リスト・表
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<ul> | 順不同リスト（●） | <ul><li>りんご</li><li>バナナ</li></ul> | liを囲む |
<ol> | 順序付きリスト（1. 2.） | <ol><li>手順1</li><li>手順2</li></ol> | 自動で番号付与 |
<dl> | 定義リスト（用語＋説明） | <dl><dt>HTML</dt><dd>マークアップ言語</dd></dl> | 用語と説明をペアで使用 |
<table> | 表全体 | <table>…</table> | 行列データを整理 |
<th> | 表の見出しセル | <th>項目</th> | 自動で太字＋中央寄せ |
<td> | 表のデータセル | <td>値</td> | 通常のセル |
構造・セクション要素
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<header> | セクションの先頭やサイト全体のヘッダー | <header><h1>サイト名</h1></header> | 各セクション内にも使える |
<footer> | 締めくくり部分（著作権・補足など） | <footer><p>© 2025</p></footer> | 複数あってOK |
<main> | ページの主要コンテンツ | <main>本文</main> | 1ページに1つだけ |
<section> | 意味のある章（見出し付き） | <section><h2>紹介</h2><p>内容</p></section> | 必ず見出しを持つ |
<article> | 独立した記事やコンテンツ | <article><h2>記事</h2></article> | 再利用可能な単位 |
<nav> | ナビゲーションリンクのまとまり | <nav><ul>…</ul></nav> | リンクが必須 |
<aside> | 補足情報やサイド内容 | <aside><h2>お知らせ</h2></aside> | 関連情報や広告に使用 |
<div> | 意味を持たない汎用ブロック | <div class="box">中身</div> | 装飾やレイアウト目的 |
フォーム関連（入力欄・ボタン）
| 要素 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<form> | フォーム全体を囲む | <form action="#" method="post">…</form> | actionで送信先指定 |
<label> | 入力欄の説明ラベル | <label for="name">名前</label> | forはinputのidと一致 |
<input> | 単一行の入力欄 | <input type="text" id="name"> | typeで種類指定 |
<textarea> | 複数行の入力欄 | <textarea rows="4"></textarea> | コメントや本文に使用 |
<select> | プルダウンリスト | <select><option>選択肢</option></select> | optionタグで項目指定 |
<button> | ボタン全般 | <button type="submit">送信</button> | submit/reset/buttonを区別 |
meta要素・head内タグ
| 要素・属性 | 意味・使い方 | 例 | 備考 |
|---|---|---|---|
<meta charset> | 文字コード指定（必須） | <meta charset="UTF-8"> | 日本語ページはUTF-8推奨 |
<meta name="viewport"> | レスポンシブ表示設定 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | スマホ対応で必須 |
<meta name="description"> | ページ説明文（SEO） | <meta name="description" content="このページは〜"> | 検索結果に表示される |
<title> | ページタイトル | <title>HTML講座</title> | 検索結果のタイトルにも反映 |
<link rel="stylesheet"> | CSSの読み込み | <link rel="stylesheet" href="style.css"> | head内に記述 |
<script> | JavaScriptの読み込み | <script src="main.js"></script> | body閉じタグ直前に書くのが基本 |
