タイトル: 要素一覧

SEOタイトル: HTML 要素 (タグ) 一覧と用途完全リファレンス

この記事の要点

HTML5 の要素 (タグ) は用途別に セマンティック / 見出し / テキスト / リスト / 表 / フォーム / メディア / リンク / メタ に分類される
セマンティック要素

は意味を持つレイアウト。SEO とスクリーンリーダの両方で重要
見出しは
〜
の 6 段階。1 ページに
は原則 1 つ

フォームは

+ /

</code> / <code><select></code> / <code><button></code> + <code><label></code> で構成</li><li>非推奨タグ: <code><font></code> <code><center></code> <code><marquee></code> <code><blink></code> <code><frame></code> は HTML5 で廃止 → CSS で置き換える</li></ul></td></tr></table>
<h2>HTML 要素の全体像</h2>

<p>HTML5 の要素は、表現したいコンテンツの意味と構造によって 9 グループに分類できます。各要素は<strong>セマンティクス (意味)</strong> と <strong>表示</strong>を持ち、CSS で見た目を、HTML で意味を担当します。</p>

<h2>1. 文書構造とセマンティック要素</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th><th>典型例</th></tr></thead>
<tbody>
<tr><td><code><html></code></td><td>HTML 文書のルート</td><td>ページ全体を囲む</td></tr>
<tr><td><code><head></code></td><td>メタ情報</td><td>title / meta / link / script</td></tr>
<tr><td><code><body></code></td><td>表示される本文</td><td>ユーザに見える全要素を内包</td></tr>
<tr><td><code><header></code></td><td>ページ / セクションのヘッダ</td><td>ロゴ・サイトタイトル・グローバルナビ</td></tr>
<tr><td><code><nav></code></td><td>ナビゲーション</td><td>メニュー、パンくず</td></tr>
<tr><td><code><main></code></td><td>ページの主要コンテンツ</td><td>1 ページに 1 つ</td></tr>
<tr><td><code><article></code></td><td>独立した記事</td><td>ブログ記事、ニュース、コメント</td></tr>
<tr><td><code><section></code></td><td>テーマ単位の区切り</td><td>「料金」「特徴」など章</td></tr>
<tr><td><code><aside></code></td><td>補足コンテンツ</td><td>サイドバー、関連リンク</td></tr>
<tr><td><code><footer></code></td><td>フッタ</td><td>コピーライト、利用規約リンク</td></tr>
<tr><td><code><div></code></td><td>意味のないブロック</td><td>CSS グルーピング用</td></tr>
<tr><td><code><span></code></td><td>意味のないインライン</td><td>CSS のためのインライン区切り</td></tr>
</tbody>
</table>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!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></code></pre>
<h2>2. 見出し要素 h1-h6</h2>

<p>見出しは情報の階層構造を示します。スクリーンリーダや検索エンジンが目次として認識します。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>レベル</th><th>使い方</th></tr></thead>
<tbody>
<tr><td><code><h1></code></td><td>最上位</td><td>ページタイトル、原則 1 ページ 1 つ</td></tr>
<tr><td><code><h2></code></td><td>大見出し</td><td>章、主要セクション</td></tr>
<tr><td><code><h3></code></td><td>中見出し</td><td>節</td></tr>
<tr><td><code><h4></code>〜<code><h6></code></td><td>小見出し</td><td>項、より細かい区切り</td></tr>
</tbody>
</table>

<p><strong>注意</strong>: 見た目を整えたいだけの理由で <code><h1></code> をデザイン目的に使うのは厳禁。CSS の <code>font-size</code> で調整します。</p>

<h2>3. テキスト要素</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th><th>備考</th></tr></thead>
<tbody>
<tr><td><code><p></code></td><td>段落</td><td>ブロック要素</td></tr>
<tr><td><code><strong></code></td><td>強い強調 (重要)</td><td>セマンティクスあり (太字)</td></tr>
<tr><td><code><em></code></td><td>強調</td><td>イタリック</td></tr>
<tr><td><code><b></code></td><td>キーワード強調</td><td>意味弱、太字だけ</td></tr>
<tr><td><code><i></code></td><td>専門用語・外国語</td><td>意味弱、斜体だけ</td></tr>
<tr><td><code><mark></code></td><td>ハイライト</td><td>蛍光ペン風</td></tr>
<tr><td><code><small></code></td><td>注意書き</td><td>免責、著作権</td></tr>
<tr><td><code><sub></code> / <code><sup></code></td><td>下付き/上付き</td><td>H<sub>2</sub>O, x<sup>2</sup></td></tr>
<tr><td><code><br></code></td><td>改行</td><td>空要素</td></tr>
<tr><td><code><hr></code></td><td>区切り線</td><td>意味的区切り</td></tr>
<tr><td><code><pre></code></td><td>整形済みテキスト</td><td>等幅、改行保持</td></tr>
<tr><td><code><code></code></td><td>ソースコード</td><td>インライン</td></tr>
<tr><td><code><blockquote></code></td><td>引用ブロック</td><td>cite 属性で出典 URL</td></tr>
<tr><td><code><q></code></td><td>インライン引用</td><td>自動で引用符</td></tr>
</tbody>
</table>

<h2>4. リスト要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 順不同リスト -->
<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></code></pre>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code><ul></code></td><td>順不同リスト (Unordered List)</td></tr>
<tr><td><code><ol></code></td><td>順序付きリスト (Ordered List)</td></tr>
<tr><td><code><li></code></td><td>リスト項目</td></tr>
<tr><td><code><dl></code></td><td>定義リスト</td></tr>
<tr><td><code><dt></code></td><td>定義する語</td></tr>
<tr><td><code><dd></code></td><td>その定義</td></tr>
</tbody>
</table>

<h2>5. 表 (table) 要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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></code></pre>
<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead>
<tbody>
<tr><td><code><table></code></td><td>表のルート</td></tr>
<tr><td><code><caption></code></td><td>表のタイトル</td></tr>
<tr><td><code><thead></code></td><td>ヘッダ行のグループ</td></tr>
<tr><td><code><tbody></code></td><td>本体行のグループ</td></tr>
<tr><td><code><tfoot></code></td><td>フッタ行のグループ</td></tr>
<tr><td><code><tr></code></td><td>行</td></tr>
<tr><td><code><th></code></td><td>見出しセル</td></tr>
<tr><td><code><td></code></td><td>データセル</td></tr>
</tbody>
</table>

<h2>6. フォーム要素</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><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">

  年齢
  

   ニュース受信
   男
   女

要素 / type	用途
	フォーム全体 (action / method)
	1 行テキスト
	メール (バリデーション付)
	パスワード (伏字)
	数値
	日付
	チェックボックス
	ラジオボタン
	ファイル選択
	非表示 (CSRF トークン等)
</code></td><td>複数行テキスト</td></tr> <tr><td><code><select></code> + <code><option></code></td><td>セレクトボックス</td></tr> <tr><td><code><button></code></td><td>ボタン (submit / button / reset)</td></tr> <tr><td><code><label></code></td><td>入力欄のラベル (for で紐付け)</td></tr> <tr><td><code><fieldset></code> + <code><legend></code></td><td>入力欄のグループ化</td></tr> </tbody> </table> <h2>7. メディア要素</h2> <pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 画像 --> <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></code></pre> <h2>8. リンク / メタ要素</h2> <table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%"> <thead><tr style="background:#e3f2fd"><th>要素</th><th>用途</th></tr></thead> <tbody> <tr><td><code><a href="..."></code></td><td>ハイパーリンク (target / rel)</td></tr> <tr><td><code><meta charset="UTF-8"></code></td><td>文字コード指定</td></tr> <tr><td><code><meta name="viewport" ...></code></td><td>レスポンシブ設定</td></tr> <tr><td><code><meta name="description" ...></code></td><td>検索結果用の説明</td></tr> <tr><td><code><link rel="stylesheet"></code></td><td>CSS 読み込み</td></tr> <tr><td><code><link rel="canonical"></code></td><td>正規 URL</td></tr> <tr><td><code><title></code></td><td>ページタイトル (タブ表示)</td></tr> <tr><td><code><script></code></td><td>JavaScript</td></tr> <tr><td><code><style></code></td><td>インライン CSS</td></tr> </tbody> </table> <h2>HTML5 で廃止 / 非推奨の要素</h2> <table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%"> <thead><tr style="background:#fff3e0"><th>廃止要素</th><th>代替手段</th></tr></thead> <tbody> <tr><td><code><font></code></td><td>CSS <code>font-family</code> / <code>color</code></td></tr> <tr><td><code><center></code></td><td>CSS <code>text-align:center</code></td></tr> <tr><td><code><marquee></code></td><td>CSS animation / JS</td></tr> <tr><td><code><blink></code></td><td>CSS animation</td></tr> <tr><td><code><frame></code> / <code><frameset></code></td><td><code><iframe></code> または CSS レイアウト</td></tr> <tr><td><code><big></code></td><td>CSS <code>font-size</code></td></tr> <tr><td><code><u></code> (装飾用途)</td><td>CSS <code>text-decoration:underline</code></td></tr> </tbody> </table> <h2>FAQ</h2> <p><strong>Q: <code><div></code> ばかり使っても良い？</strong><br /> A: 動きますが SEO とアクセシビリティで損します。意味があるブロックは <code><article></code> <code><section></code> <code><nav></code> 等を優先。</p> <p><strong>Q: <code><b></code> と <code><strong></code> どちらを使う？</strong><br /> A: 重要な内容なら <code><strong></code>、見た目だけ太字なら CSS で <code>font-weight:bold</code>。<code><b></code> はキーワード強調等の限定用途。</p> <p><strong>Q: <code><h1></code> は本当に 1 ページ 1 つ？</strong><br /> A: HTML5 ではセクション内 <code><h1></code> も理屈上 OK ですが、<strong>SEO と互換性</strong>のため 1 つに統一する運用が安全。</p> </div> </div> </div> </div> </div> <div id="footer"><div class="move-top"></div> <div class="move-bottom"></div> <!-- フッタ開始 --> <footer id="footer"> <div class="footer-inner"> <div class="footer-grid"> <div class="footer-col"> <h4 class="footer-heading">CWiki</h4> <a href="https://jpn.itlibra.com">CWiki</a> <a href="https://jpn.itlibra.com/help">ヘルプ</a> <a href="https://jpn.itlibra.com/inquiry/post/form">問い合わせ</a> </div> <div class="footer-col"> <h4 class="footer-heading">Legal</h4> <a href="https://jpn.itlibra.com/termsOfService">利用規約</a> <a href="https://jpn.itlibra.com/privacyPolicy">プライバシーポリシー</a> </div> <div class="footer-col"> <h4 class="footer-heading">Feed</h4> <a href="https://jpn.itlibra.com/sitemap/sitemap-index.xml">サイトマップ</a> <a href="https://jpn.itlibra.com/feed/articles">ページのフィード</a> <a href="https://jpn.itlibra.com/feed/boards">掲示板のフィード</a> </div> <div class="footer-col"> <h4 class="footer-heading">Account</h4> <a href="https://jpn.itlibra.com/login">ログイン</a> </div> </div> <div class="footer-bottom"> <span>© 2017 Libra</span> </div> </div> </footer> <span id="page-bottom"></span> </div> </div> <!-- Scripts --> <!-- 表示速度とSEOの観点からbodyタグの一番下に記載する --> <!--<script src="https://jpn.itlibra.com/js/app.js" async></script>--> <script src="https://jpn.itlibra.com/js/common.js" async></script> <script src="https://jpn.itlibra.com/js/scroll.js" async></script> <script src="https://jpn.itlibra.com/js/jquery.sidebar.min.js"></script> <span></span> <!-- ローディング --> <div id="loading"> <div class="cv-spinner"> <span class="spinner"></span> </div> </div> </body> </html>

IT総合Wiki

過去バージョン

タイトル: 要素一覧

SEOタイトル: HTML 要素 (タグ) 一覧と用途完全リファレンス

〜
の 6 段階。1 ページに
は原則 1 つ

の 6 段階。1 ページに
は原則 1 つ

は原則 1 つ

IT総合Wiki

過去バージョン

タイトル: 要素一覧 SEOタイトル: HTML 要素 (タグ) 一覧と用途完全リファレンス

〜 の 6 段階。1 ページに は原則 1 つ

の 6 段階。1 ページに は原則 1 つ

は原則 1 つ

タイトル: 要素一覧

SEOタイトル: HTML 要素 (タグ) 一覧と用途完全リファレンス

〜
の 6 段階。1 ページに
は原則 1 つ

の 6 段階。1 ページに
は原則 1 つ