HTML5 使用頻度の高いもの一覧

この記事は約8分で読めます。

HTML5の頻度の高いタグを用途別に分類して表にまとめます。以下は主要な用途(構造、テキスト、埋め込み、リスト、フォーム、スタイル・スクリプトなど)に分けたリストと用例です。


1. 構造系タグ

タグ名 用途 用例
<html> HTML文書のルート要素 <html lang="ja"> HTML文書の始まりと終わりを定義します。
<head> メタデータの追加 <head><title>ページタイトル</title></head>
<body> 本文内容のコンテナ <body><h1>こんにちは</h1></body>
<header> ページのヘッダー部分 <header><h1>サイトタイトル</h1></header>
<footer> ページのフッター部分 <footer>&copy; 2025 サイト名</footer>
<section> コンテンツの区分ごとのセクション <section><h2>セクションタイトル</h2><p>ここに内容を書く</p></section>
<article> 独立したコンテンツ <article><h2>記事タイトル</h2><p>記事本文</p></article>
<nav> ナビゲーションメニュー <nav><ul><li><a href="/">ホーム</a></li><li><a href="/about">About</a></li></ul></nav>
<aside> 補足コンテンツ <aside><p>関連リンクや補足情報</p></aside>
<main> 主なコンテンツエリア <main><h1>メインコンテンツ</h1></main>
<div> 汎用的なコンテナ <div class="container">内容</div>

2. テキスト関連タグ

タグ名 用途 用例
<h1><h6> 見出しを表すタグ <h1>大見出し</h1><h2>中見出し</h2>
<p> 段落 <p>これは段落です。</p>
<span> インライン要素の区分 <span class="highlight">重要な部分</span>
<b> 太字 <b>強調された太字</b>
<i> 斜体 <i>強調された斜体</i>
<strong> 強い強調 <strong>強調された内容</strong>
<em> 弱い強調(傾斜になる) <em>ここは少し強調</em>
<a> ハイパーリンク <a href="https://example.com">リンク</a>
<br> 改行 行を分けるとき<br>ここが改行される
<blockquote> 長い引用 <blockquote>これは引用文です。</blockquote>
<code> プログラムコード <code>console.log('Hello');</code>
<mark> ハイライト表示 <mark>ここが注目部分</mark>

3. 埋め込み関連タグ

タグ名 用途 用例
<img> 画像を埋め込む <img src="image.jpg" alt="説明" />
<video> 動画を埋め込む <video src="movie.mp4" controls></video>
<audio> 音声を埋め込む <audio src="sound.mp3" controls></audio>
<iframe> 外部コンテンツの埋め込み <iframe src="https://example.com"></iframe>
<canvas> 描画エリア <canvas id="myCanvas"></canvas>(JSで描画)
<svg> ベクターグラフィック <svg width="100" height="100"><rect width="100" height="100" style="fill:blue;" /></svg>

4. リスト関連タグ

タグ名 用途 用例
<ul> 順序なしリスト <ul><li>アイテム1</li><li>アイテム2</li></ul>
<ol> 順序付きリスト <ol><li>ステップ1</li><li>ステップ2</li></ol>
<li> リストの各アイテム <li>リスト要素</li>
<dl> 定義リスト(説明をつけるリスト) <dl><dt>用語</dt><dd>用語の説明</dd></dl>
<dt> 定義リストの用語部分 <dt>例: HTML</dt>
<dd> 定義リストの説明部分 <dd>HTMLはマークアップ言語です。</dd>

5. フォーム関連タグ

タグ名 用途 用例
<form> フォームのコンテナ <form action="/submit" method="POST"></form>
<input> データ入力フィールド <input type="text" name="username" />
<textarea> 複数行のテキストボックス <textarea name="message"></textarea>
<button> ボタン <button type="submit">送信</button>
<select> ドロップダウンリスト <select name="options"><option value="1">選択1</option></select>
<option> ドロップダウンの項目 <option value="値">表示</option>
<label> 入力欄のラベル <label for="username">ユーザー名</label>
<fieldset> フォームの区分け <fieldset><legend>詳細情報</legend></fieldset>
<legend> フィールドセットのタイトル <fieldset><legend>お問い合わせ内容</legend></fieldset>

6. スタイル・スクリプト関連タグ

タグ名 用途 用例
<style> CSSの埋め込み <style>body { background-color: #f0f0f0; }</style>
<script> JavaScriptコードの埋め込み <script>console.log("Hello, World!");</script>
<link> 外部CSSの読み込み <link rel="stylesheet" href="styles.css">
<meta> メタ情報を定義 <meta charset="UTF-8">

その他 HTML5 タグ・リファレンス

Verified by MonsterInsights