HTMLの要素一覧。どこから覚える？
HTMLにはたくさんの要素がありますが、最初から全部を覚える必要はありません。
まずは「文章の構造を作るタグ」と「リンク・画像・リスト」の基本から始めましょう。
下の表は、初心者が最初に覚えるべきタグをグループごとに整理しています。
実際のコーディング例も一緒に確認してみてください。
Contents
文字・文章の基本要素（見出し含む）
| 要素 | 意味・使い方 | 例 | 備考 |
|---|
<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閉じタグ直前に書くのが基本 |
