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>© 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"> |