◀ 3.

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 つに統一する運用が安全。

編集
Post Share
子ページ
  1. 構造
  2. セクション
  3. テキスト・フォント
  4. リスト
  5. リンク・ボタン
  6. ルビ
  7. 画像
  8. オブジェクト
  9. 動画・音声
  10. フォーム要素
  11. その他の要素
同階層のページ
  1. 環境構築
  2. 文法
  3. 要素一覧
  4. API
  5. テンプレートエンジン
  6. <head>タグに書いた内容が<body>タグに移動する場合の解決方法
  7. 空白(スペース)の入力方法
  8. テキスト/セレクトボックス/ラジオボタン変更時のJS関数呼び出し
  9. buttonでformをsubmitさせない方法
2026-06-11 07:12:00 atom 776

人気ページ

最近更新/作成されたページ