HTML タグリファレンス
最もよく使う HTML 要素を用途別にまとめました。可能なら一般的な <div> よりセマンティックタグ（<nav> や <article> など）を使いましょう — アクセシビリティと SEO に役立ちます。マークアップを整えるには HTML フォーマッター を使ってください。
更新 2026-07-06
文書構造
| タグ | 用途 |
|---|---|
| <html> | 文書のルート |
| <head> | メタデータ: title、link、script（ページには表示されない） |
| <body> | ページの見えるコンテンツ |
| <title> | ページタイトル（ブラウザタブ、検索結果） |
| <meta> | charset、viewport、description などのメタデータ |
| <link> | 外部リソースへのリンク、通常はスタイルシート |
| <script> | JavaScript を埋め込むか参照 |
| <style> | ページに CSS を埋め込む |
テキスト
| タグ | 用途 |
|---|---|
| <h1>–<h6> | 見出し、重要度の高い順 |
| <p> | テキストの段落 |
| <a> | ハイパーリンク（href を使う） |
| <span> | 意味を持たないインラインコンテナ |
| <strong> | 重要なテキスト（既定で太字） |
| <em> | 強調テキスト（既定で斜体） |
| <br> | 改行 |
| <hr> | テーマの区切り（水平線） |
| <blockquote> | ブロック引用 |
| <code> | インラインコード |
| <pre> | 整形済みテキスト（空白を保持） |
リスト
| タグ | 用途 |
|---|---|
| <ul> | 順序なし（箇条書き）リスト |
| <ol> | 順序あり（番号）リスト |
| <li> | リスト項目 |
| <dl> | 説明リスト（用語/定義のペア） |
リンク & メディア
| タグ | 用途 |
|---|---|
| <img> | 画像（src と alt を使う） |
| <video> | 埋め込み動画 |
| <audio> | 埋め込み音声 |
| <svg> | インラインベクターグラフィック |
| <picture> | 複数ソースのレスポンシブ画像 |
| <iframe> | このページ内に別のページを埋め込む |
フォーム
| タグ | 用途 |
|---|---|
| <form> | 入力を収集・送信するフォーム |
| <input> | 1 行入力（テキスト、チェックボックス、ラジオなど） |
| <textarea> | 複数行テキスト入力 |
| <button> | クリック可能なボタン |
| <select> | ドロップダウンリスト |
| <option> | <select> 内の項目 |
| <label> | フォームコントロールのラベル（アクセシビリティ向上） |
表
| タグ | 用途 |
|---|---|
| <table> | データの表 |
| <tr> | 表の行 |
| <td> | 表のセル |
| <th> | ヘッダーセル |
| <thead> | ヘッダー行をまとめる |
| <tbody> | 本体行をまとめる |
セマンティックな区分け
| タグ | 用途 |
|---|---|
| <header> | ページやセクションの導入コンテンツ |
| <nav> | ナビゲーションリンクのブロック |
| <main> | ページの主要コンテンツ（ページに 1 つ） |
| <section> | テーマごとのコンテンツのまとまり |
| <article> | 独立したコンテンツ（投稿、カード） |
| <aside> | 付随的なコンテンツ（サイドバー） |
| <footer> | ページやセクションのフッター |
| <figure> | 任意のキャプション付き独立メディア |
関連ツール