タイトル: 要素一覧
SEOタイトル: HTML 要素 (タグ) 一覧と用途完全リファレンス
| この記事の要点 |
- HTML5 の要素 (タグ) は用途別に セマンティック / 見出し / テキスト / リスト / 表 / フォーム / メディア / リンク / メタ に分類される
- セマンティック要素
<header> <nav> <main> <article> <section> <aside> <footer> は意味を持つレイアウト。SEO とスクリーンリーダの両方で重要 - 見出しは
<h1>〜<h6> の 6 段階。1 ページに <h1> は原則 1 つ - フォームは
<form> + <input> / <textarea> / <select> / <button> + <label> で構成 - 非推奨タグ:
<font> <center> <marquee> <blink> <frame> は HTML5 で廃止 → CSS で置き換える
|
HTML 要素の全体像
HTML5 の要素は、表現したいコンテンツの意味と構造によって 9 グループに分類できます。各要素はセマンティクス (意味) と 表示を持ち、CSS で見た目を、HTML で意味を担当します。
1. 文書構造とセマンティック要素
| 要素 | 用途 | 典型例 |
|---|
<html> | HTML 文書のルート | ページ全体を囲む |
<head> | メタ情報 | title / meta / link / script |
<body> | 表示される本文 | ユーザに見える全要素を内包 |
<header> | ページ / セクションのヘッダ | ロゴ・サイトタイトル・グローバルナビ |
<nav> | ナビゲーション | メニュー、パンくず |
<main> | ページの主要コンテンツ | 1 ページに 1 つ |
<article> | 独立した記事 | ブログ記事、ニュース、コメント |
<section> | テーマ単位の区切り | 「料金」「特徴」など章 |
<aside> | 補足コンテンツ | サイドバー、関連リンク |
<footer> | フッタ | コピーライト、利用規約リンク |
<div> | 意味のないブロック | CSS グルーピング用 |
<span> | 意味のないインライン | CSS のためのインライン区切り |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<header>
<h1>サイト名</h1>
<nav><a href="/">ホーム</a> | <a href="/about">概要</a></nav>
</header>
<main>
<article>
<h2>記事タイトル</h2>
<section>
<h3>第 1 章</h3>
<p>本文...</p>
</section>
<aside>関連リンク</aside>
</article>
</main>
<footer>© 2026 Example</footer>
</body>
</html>
2. 見出し要素 h1-h6
見出しは情報の階層構造を示します。スクリーンリーダや検索エンジンが目次として認識します。
| 要素 | レベル | 使い方 |
|---|
<h1> | 最上位 | ページタイトル、原則 1 ページ 1 つ |
<h2> | 大見出し | 章、主要セクション |
<h3> | 中見出し | 節 |
<h4>〜<h6> | 小見出し | 項、より細かい区切り |
注意: 見た目を整えたいだけの理由で <h1> をデザイン目的に使うのは厳禁。CSS の font-size で調整します。
3. テキスト要素
| 要素 | 用途 | 備考 |
|---|
<p> | 段落 | ブロック要素 |
<strong> | 強い強調 (重要) | セマンティクスあり (太字) |
<em> | 強調 | イタリック |
<b> | キーワード強調 | 意味弱、太字だけ |
<i> | 専門用語・外国語 | 意味弱、斜体だけ |
<mark> | ハイライト | 蛍光ペン風 |
<small> | 注意書き | 免責、著作権 |
<sub> / <sup> | 下付き/上付き | H2O, x2 |
<br> | 改行 | 空要素 |
<hr> | 区切り線 | 意味的区切り |
<pre> | 整形済みテキスト | 等幅、改行保持 |
<code> | ソースコード | インライン |
<blockquote> | 引用ブロック | cite 属性で出典 URL |
<q> | インライン引用 | 自動で引用符 |
4. リスト要素
<!-- 順不同リスト -->
<ul>
<li>項目 1</li>
<li>項目 2</li>
</ul>
<!-- 順序付きリスト -->
<ol>
<li>手順 1</li>
<li>手順 2</li>
</ol>
<!-- 定義リスト -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
| 要素 | 用途 |
|---|
<ul> | 順不同リスト (Unordered List) |
<ol> | 順序付きリスト (Ordered List) |
<li> | リスト項目 |
<dl> | 定義リスト |
<dt> | 定義する語 |
<dd> | その定義 |
5. 表 (table) 要素
<table>
<caption>2026 年売上</caption>
<thead>
<tr><th>月</th><th>売上</th></tr>
</thead>
<tbody>
<tr><td>1 月</td><td>100 万円</td></tr>
<tr><td>2 月</td><td>120 万円</td></tr>
</tbody>
<tfoot>
<tr><th>合計</th><td>220 万円</td></tr>
</tfoot>
</table>
| 要素 | 用途 |
|---|
<table> | 表のルート |
<caption> | 表のタイトル |
<thead> | ヘッダ行のグループ |
<tbody> | 本体行のグループ |
<tfoot> | フッタ行のグループ |
<tr> | 行 |
<th> | 見出しセル |
<td> | データセル |
6. フォーム要素
<form action="/submit" method="post">
<label for="name">名前</label>
<input type="text" id="name" name="name" required>
<label for="email">メール</label>
<input type="email" id="email" name="email">
<label for="comment">コメント</label>
<textarea id="comment" name="comment" rows="5"></textarea>
<label for="age">年齢</label>
<select id="age" name="age">
<option value="">選択</option>
<option value="20">20 代</option>
<option value="30">30 代</option>
</select>
<label><input type="checkbox" name="news"> ニュース受信</label>
<label><input type="radio" name="gender" value="m"> 男</label>
<label><input type="radio" name="gender" value="f"> 女</label>
<button type="submit">送信</button>
</form>
| 要素 / type | 用途 |
|---|
<form> | フォーム全体 (action / method) |
<input type="text"> | 1 行テキスト |
<input type="email"> | メール (バリデーション付) |
<input type="password"> | パスワード (伏字) |
<input type="number"> | 数値 |
<input type="date"> | 日付 |
<input type="checkbox"> | チェックボックス |
<input type="radio"> | ラジオボタン |
<input type="file"> | ファイル選択 |
<input type="hidden"> | 非表示 (CSRF トークン等) |
<textarea> | 複数行テキスト |
<select> + <option> | セレクトボックス |
<button> | ボタン (submit / button / reset) |
<label> | 入力欄のラベル (for で紐付け) |
<fieldset> + <legend> | 入力欄のグループ化 |
7. メディア要素
<!-- 画像 -->
<img src="/img/hero.jpg" alt="ヒーロー画像" width="800" height="400">
<!-- 動画 -->
<video controls width="640">
<source src="/video/demo.mp4" type="video/mp4">
<source src="/video/demo.webm" type="video/webm">
お使いのブラウザは動画をサポートしていません
</video>
<!-- 音声 -->
<audio controls>
<source src="/audio/bgm.mp3" type="audio/mpeg">
</audio>
<!-- 図と説明 -->
<figure>
<img src="/img/graph.png" alt="売上推移">
<figcaption>図 1: 2026 年売上推移</figcaption>
</figure>
<!-- iframe -->
<iframe src="https://example.com" width="600" height="400" title="埋め込み"></iframe>
8. リンク / メタ要素
| 要素 | 用途 |
|---|
<a href="..."> | ハイパーリンク (target / rel) |
<meta charset="UTF-8"> | 文字コード指定 |
<meta name="viewport" ...> | レスポンシブ設定 |
<meta name="description" ...> | 検索結果用の説明 |
<link rel="stylesheet"> | CSS 読み込み |
<link rel="canonical"> | 正規 URL |
<title> | ページタイトル (タブ表示) |
<script> | JavaScript |
<style> | インライン CSS |
HTML5 で廃止 / 非推奨の要素
| 廃止要素 | 代替手段 |
|---|
<font> | CSS font-family / color |
<center> | CSS text-align:center |
<marquee> | CSS animation / JS |
<blink> | CSS animation |
<frame> / <frameset> | <iframe> または CSS レイアウト |
<big> | CSS font-size |
<u> (装飾用途) | CSS text-decoration:underline |
FAQ
Q: <div> ばかり使っても良い？
A: 動きますが SEO とアクセシビリティで損します。意味があるブロックは <article> <section> <nav> 等を優先。
Q: <b> と <strong> どちらを使う？
A: 重要な内容なら <strong>、見た目だけ太字なら CSS で font-weight:bold。<b> はキーワード強調等の限定用途。
Q: <h1> は本当に 1 ページ 1 つ？
A: HTML5 ではセクション内 <h1> も理屈上 OK ですが、SEO と互換性のため 1 つに統一する運用が安全。
