【HTML5】HTMLでよく使われる全てのタグ一覧・早見表[サンプル/解説付き]
このページではHTML５で使われているタグを可能な限りすべてピックアップし、一覧・早見表にしました。
随時更新。古くなったもの、非推奨とされているものは掲載されません。またお使いのWebブラウザの種類やCSSファイルによっては、見え方が異なる場合があります。
目次
HTMLで使われるタグ一覧・早見表
基本構造(レイアウト)
| タグ | 説明 | 備考 |
|---|
| <html> </html> | HTML文書の定義 | |
| <head> </head> | 表示されない情報の定義 | |
| <body> </body> | 表示されるコンテンツの定義 | |
ヘッダー内部(<head></head>)
| タグ | 説明 | 備考 |
|---|
| <meta> </meta> | ウェブページのメタデータの定義 | |
| <title> </title> | ウェブページのタイトルを定義 | |
| <base> </base> | 相対URLを絶対URLに変換 | |
| <link> </link> | 外部リソースを関連付ける | |
コンテンツ内部(<body></body>)
| タグ | 説明 | 備考 |
|---|
| <header> </header> | ヘッダー要素(頭部)を定義 | |
| <footer> </footer> | フッター要素(底部)を定義 | |
| <nav> </nav> | ナビゲーション要素を定義 | |
| <main> </main> | 主要要素(見出しと本文)の定義 | |
| <section> </section> | コンテンツのグループ化 | |
| <aside> </aside> | 主題から外れたコンテンツの定義 | |
| <div> </div> | 任意のセクションの定義 | |
テキストレイアウト
| タグ | 説明 | 備考・サンプル |
|---|
| <h> </h> | 見出しを定義(h1-h6) | |
| <p> </p> | 段落を定義 | |
| <hr> </hr> | 水平線を挿入、視覚的な分割 | |
| <br> </br> | 改行を強制的に行う | |
| <wbr> </wbr> | 自動的な改行を制御する | |
| <nobr> </nobr> | 単語の途中の改行を禁止する | |
| <span> </span> | テキスト内要素のグループ化 | |
| <blockquote> </blockquote> | 引用コンテンツを示す | |
| <cite> </cite> | 引用元を示す | |
| <time> </time> | 日付や時刻を示す | |
| <address> </address> | 連絡先情報を示す | |
| <code> </code> | コードを示す | |
| <samp> </samp> | コードの出力を示す | |
| <data> </data> | 機械可読情報を示す | |
| <var> </var> | 変数を示す | |
| <dfn> </dfn> | 特定の用語の定義 | |
| <kbd> </kbd> | キーボード入力を示す | |
| <bdi> </bdi> | テキスト方向の分別 | |
| <abbr> </abbr> | 短縮形や略語を示す | |
| <!– –> | コメントを挿入(非表示) | |
| <ins> </ins> | 挿入されたコンテンツを示す | |
| <del> </del> | 削除されたコンテンツを示す | |
テキスト装飾
| タグ | 説明 | 備考・サンプル |
|---|
| <a> </a> | ハイパーリンクを付与 | ハイパーリンクを付与 |
| <b> </b> | 太字にする | 太字にする |
| <i> </i> | 斜体(イタリック)にする | 斜体(イタリック)にする |
| <u> </u> | 下線を付ける | 下線を付ける |
| <s> </s> | 打消し線を付ける | 打消し線を付ける |
| <em> </em> | 機械可読な強調表示(斜体) | 機械可読な強調表示(斜体) |
| <strong> </strong> | 機械可読な強調表示(太字) | 機械可読な強調表示(太字) |
| <small> </small> | 縮小して表示 | 縮小して表示 |
| <sub> </sup> | 下付き文字を表示 | 下付き文字を表示 |
| <sup> </sup> | 上付き文字を表示 | 上付き文字を表示 |
| <bdo> </bdo> | 表示方向を制御する | るす御制を向方示表 |
| <mark> </mark> | ハイライトで表示する | ハイライトで表示する |
埋め込み
| タグ | 説明 | 備考 |
|---|
| <img> </img> | 画像を表示させる | |
| <figure> </figure> | コンテンツ/テキストのグループ | |
| <figcaption> </figcaption> | figureタグ内のキャプション | |
| <picture> </picture> | レスポンシブな画像表示 | |
| <video> </video> | 動画を埋め込む | |
| <audio> </audio> | 音声コンテンツを埋め込む | |
| <track> </track> | 外部テキストトラックを定義 | |
| <source> </source> | メディアファイルのソースを指定 | |
| <map> </map> | 画像マップを定義 | |
| <area> </area> | マップ内クリック可能領域の定義 | |
| <iframe> </iframe> | 外部コンテンツを表示させる | |
| <embed> </embed> | 外部オブジェクトの埋め込み | |
| <object> </object> | 埋め込み可能オブジェクトの定義 | |
| <param> </param> | オブジェクトパラメーターを定義 | |
ルビ
| タグ | 説明 | 備考 |
|---|
| <ruby> </ruby> | テキスト内にルビを表示する | |
| <rb> </rb> | ルビの対象を指定 | |
| <rt> </rt> | ルビのテキストを指定 | |
リスト
| タグ | 説明 | 備考 |
|---|
| <ul> </ul> | 無順序リストを作成 | |
| <ol> </ol> | 順序付きリストを作成 | |
| <li> </li> | リスト内の項目の定義 | |
| <dl> </dl> | 説明リストを作成 | |
| <dt></dt> | 説明リスト内の各タイトル | |
| <dd></dd> | 説明リスト内の各説明文 | |
テーブル
| タグ | 説明 | 備考 |
|---|
| <table> </table> | テーブルを作成する | |
| <tr> </tr> | テーブルの行を定義 | |
| <th> </th> | テーブルのヘッダーセルを定義 | |
| <td> </td> | テーブルのデータセルを定義 | |
| <caption> </caption> | テーブルのタイトルを定義 | |
| <col> </col> | テーブル内のスタイル/属性変更 | |
| <colgroup> </colgroup> | テーブルの列のグループ化 | |
| <thead> </thead> | 表のヘッダーセクションの定義 | |
| <tbody> </tbody> | 表の本文セクションの定義 | |
| <tfoot> </tfoot> | 表のフッターセクションの定義 | |
フォーム
| タグ | 説明 | 備考 |
|---|
| <form> </form> | フォームを作成する | |
| <input> </input> | フォーム内の入力要素を作成 | |
| <select> </select> | フォーム内で選択リストを作成 | |
| <option> </option> | <select>内のアイテムを定義 | |
| <textarea> </textarea> | 複数行テキスト入力エリアの作成 | |
| <datalist> </datalist> | テキスト入力欄の選択肢を作成 | |
| <button> </button> | 実行を行うボタンの作成 | |
| <label> </label> | 各フォーム要素にラベルを定義する | |
| <fieldset> </fieldset> | フォーム要素をグループ化する | |
| <legend> </legend> | <fieldset>内の説明 | |
メニュー
| タグ | 説明 | 備考 |
|---|
| <details> </details> | 折りたたみ式のセクションを作成 | |
| <sumarry> </summary> | <details>内のコンテンツ | |
スクリプト
| タグ | 説明 | 備考 |
|---|
| <script> </script> | JavaScriptのコードを埋め込む | |
| <noscript> </noscript> | JavaScript無効環境の代替表示 | |
| <canvas> </canvas> | 描画可能領域の作成 | |
| <template> </template> | テンプレートの定義と再利用 | |
| <style> </style> | HTML文書内にCSSを埋め込む | |
