HTML 要素一覧

更新日:2021/11/26

要素と属性の一覧表
要素・属性名[上段] 概要[下段]
ルート要素
<html>
  • HTML文書のルートを表す
  • <html></html>
文書のメタデータ
<head>
  • 文書に関するメタデータの集まりを表す
  • <head></head>
<title>
  • 文書のタイトルを表す
  • <title></title>
<base>
  • 相対URLの基準URLまたはリンクの表示先を指定する
  • <base href="">
  • href="URL"
    target="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
<link>
  • 文書を別のリソースと関連付ける
  • <link rel="" href="">
  • rel="リンクタイプ"
    href="URL"
    hreflang="言語コード"
    type="MIMEタイプ"
    media="メディアクエリ"
    sizes="any | 横幅x高さ"
    crossorigin="anonymous | use-credentials | "
    integrity="文字列"
    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
    imagesrcset="URL | URL 横幅w | URL 比率x"
    imagesizes="メディアクエリ 横幅"
    as="fetch | audio | audioworklet | document | embed | font | frame | iframe | image | manifest | object | paintworklet | report | script | serviceworker | sharedworker | style | track | video | worker | xslt | "
    color="表示色"
    disabled
    title="スタイルの設定名"
<meta>
  • 文書に関する様々なメタデータを表す
  • <meta charset="UTF-8">
    <meta http-equiv="" content="">
    <meta name="" content="">
  • charset="UTF-8"
    http-equiv="content-type | default-style | refresh | x-ua-compatible | content-security-policy"
    name="application-name | author | description | generator | keywords | referrer | theme-color | color-scheme"
    content="対応する値"
    media="メディアクエリ"
<style>
  • 文書にCSSスタイルを埋め込む
  • <style></style>
  • media="メディアクエリ"
    title="スタイルの設定名"
セクション
<body>
  • 文書のコンテンツを表す
  • <body></body>
<article>
  • 自己完結したセクションを表す
  • <article></article>
<section>
  • 一般的なセクションを表す
  • <section></section>
<nav>
  • ナビゲーションのセクションを表す
  • <nav></nav>
<aside>
  • メインコンテンツから分離された補足的なセクションを表す
  • <aside></aside>
<h1>-<h6>
  • 見出しを表す
  • <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<hgroup>
  • 見出しのグループを表す
  • <hgroup></hgroup>
<header>
  • 文書またはセクションのヘッダを表す
  • <header></header>
<footer>
  • 文書またはセクションのフッタを表す
  • <footer></footer>
<address>
  • 連絡先情報を表す
  • <address></address>
コンテンツのグループ化
<p>
  • 段落を表す
  • <p></p>
<hr>
  • 段落レベルのテーマの区切りを表す
  • <hr>
<pre>
  • 整形済みのテキストを表す
  • <pre></pre>
<blockquote>
  • 別の情報源から引用されているセクションを表す
  • <blockquote></blockquote>
  • cite="URL"
<ol>
  • 順序付きのリストを表す
  • <ol></ol>
  • type="1 | a | A | i | I"
    start="番号"
    reversed
<ul>
  • 順不同のリストを表す
  • <ul></ul>
<menu>
  • リスト項目で構成されるツールバーを表す
  • <menu></menu>
<li>
  • リストの項目を表す
  • <li></li>
  • value="番号"
<dl>
  • 記述リストを表す
  • <dl></dl>
<dt>
  • 記述リスト内の用語または名前を表す
  • <dt></dt>
<dd>
  • 記述リスト内の説明、定義、または値を表す
  • <dd></dd>
<figure>
  • 本文から参照される図版を表す
  • <figure></figure>
<figcaption>
  • <figure>要素のキャプションまたは凡例を表す
  • <figcaption></figcaption>
<main>
  • 文書のメインコンテンツを表す
  • <main></main>
<div>
  • 特定の範囲をグループ化する(グローバル属性とともに使用されることが多い)
  • <div></div>
テキストの意味
<a>
  • ハイパーリンクを表す
  • <a></a>
  • href="URL"
    hreflang="言語コード"
    type="MIMEタイプ"
    rel="リンクタイプ"
    target="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
    download | download="ファイル名"
    ping="URL"
    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
<em>
  • 強調されたテキストを表す
  • <em></em>
<strong>
  • テキストの強い重要性、深刻性、または緊急性を表す
  • <strong></strong>
<small>
  • 小さめの文字で表現される注記を表す
  • <small></small>
<s>
  • すでに正確ではないテキストを表す
  • <s></s>
<cite>
  • 作品のタイトルを表す
  • <cite></cite>
<q>
  • 別の情報源から引用されたフレーズを表す
  • <q></q>
  • cite="URL"
<dfn>
  • 定義される用語を表す
  • <dfn></dfn>
  • title="定義用語"
<abbr>
  • 略語や頭字語を表す
  • <abbr></abbr>
  • title="正式名称"
<ruby>
  • ルビ(ふりがな)を振るテキストの範囲を表す
  • <ruby></ruby>
<rt>
  • ルビテキストを表す
  • <rt></rt>
<rp>
  • ルビテキストを囲む括弧を表す
  • <rp></rp>
<data>
  • 要素内容の機械可読データを指定する
  • <data value=""></data>
  • value="文字列"
<time>
  • 日付や時刻を表す
  • <time></time>
  • datetime="YYYY-MM-DDThh:mm:ssZ | etc..."
<code>
  • コンピュータコードを表す
  • <code></code>
<var>
  • 変数を表す
  • <var></var>
<samp>
  • プログラムからの出力サンプルを表す
  • <samp></samp>
<kbd>
  • ユーザーが入力する内容を表す
  • <kbd></kbd>
<sub>
  • 下付き文字を表す
  • <sub></sub>
<sup>
  • 上付き文字を表す
  • <sup></sup>
<i>
  • 他と区別されるテキストを表す(思考・専門用語 等)
  • <i></i>
<b>
  • 注目すべきテキストを表す(キーワード・製品名 等)
  • <b></b>
<u>
  • ラベル付けされたテキストを表す
  • <u></u>
<mark>
  • ハイライトされたテキストを表す
  • <mark></mark>
<bdi>
  • 周囲から隔離されたテキストを表す
  • <bdi></bdi>
  • dir="auto | ltr | rtl"
<bdo>
  • 書字方向を上書き指定する
  • <bdo dir=""></bdo>
  • dir="ltr | rtl"
<span>
  • テキストの範囲を指定する(グローバル属性とともに使用されることが多い)
  • <span></span>
<br>
  • 改行を表す
  • <br>
<wbr>
  • 改行位置の候補を表す
  • <wbr>
訂正
<ins>
  • 文書に追加された内容であることを表す
  • <ins></ins>
  • cite="URL"
    datetime="YYYY-MM-DDThh:mm:ssZ | etc..."
<del>
  • 文書から削除された内容であることを表す
  • <del></del>
  • cite="URL"
    datetime="YYYY-MM-DDThh:mm:ssZ | etc..."
コンテンツの埋め込み
<picture>
  • 文書にレスポンシブイメージを埋め込む(画像内容の最適化)
  • <picture></picture>
<source>
  • 代替画像または代替メディアリソースを指定する(<picture><video><audio>要素内で使用)
  • <source src="">
    <source srcset="">
  • type="MIMEタイプ" (<picture> | <video> | <audio>)
    src="URL" (<video> | <audio>)
    srcset="URL | URL 横幅w | URL 比率x" (<picture>)
    media="メディアクエリ" (<picture>)
    sizes="メディアクエリ 横幅" (<picture>)
    width="横幅" (<picture>)
    height="高さ" (<picture>)
<img>
  • 文書に画像を埋め込む
  • <img src="">
  • src="URL"
    alt="代替テキスト"
    width="横幅"
    height="高さ"
    usemap="#マップ名"
    ismap
    crossorigin="anonymous | use-credentials | "
    srcset="URL | URL 横幅w | URL 比率x"
    sizes="メディアクエリ 横幅"
    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
    decoding="sync | async | auto"
    loading="lazy | eager"
<iframe>
  • 入れ子にされたブラウジングコンテキスト(インラインフレーム)を表す
  • <iframe></iframe>
  • src="URL"
    srcdoc="HTMLコード"
    width="横幅"
    height="高さ"
    name="ブラウジングコンテキスト名"
    sandbox | sandbox="allow-forms | allow-modals | allow-orientation-lock | allow-pointer-lock | allow-popups | allow-popups-to-escape-sandbox | allow-presentation | allow-same-origin | allow-scripts | allow-top-navigation | allow-top-navigation-by-user-activation | allow-downloads"
    allow="許可内容"
    allowfullscreen

    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
    loading="lazy | eager"
<embed>
  • 文書に外部アプリケーションを埋め込む
  • <embed>
  • src="URL"
    type="MIMEタイプ"
    width="横幅"
    height="高さ"
<object>
  • 文書に外部リソースを埋め込む
  • <object></object>
  • data="URL"
    type="MIMEタイプ"
    width="横幅"
    height="高さ"
    name="ブラウジングコンテキスト名"
    form="ID名"
<param>
  • <object>要素のパラメータを指定する
  • <param name="" value="">
  • name="パラメータ名"
    value="パラメータ値"
<video>
  • 文書に動画コンテンツを埋め込む
  • <video></video>
  • src="URL"
    poster="URL"
    preload="none | metadata | auto"
    width="横幅"
    height="高さ"
    autoplay
    loop
    muted
    controls
    playsinline
    crossorigin="anonymous | use-credentials | "
<audio>
  • 文書にオーディオコンテンツを埋め込む
  • <audio></audio>
  • src="URL"
    preload="none | metadata | auto"
    autoplay
    loop
    muted
    controls
    crossorigin="anonymous | use-credentials | "
<track>
  • <video>または<audio>要素のテキストトラックを指定する
  • <track src="">
  • src="URL"
    kind="subtitles | captions | descriptions | chapters | metadata"
    srclang="言語コード"
    label="タイトル"
    default
<map>
  • イメージマップを定義する
  • <map name=""></map>
  • name="マップ名"
<area>
  • イメージマップ内の領域を設定する
  • <area>
  • shape="rect | circle | poly | default"
    coords="座標(x,y...)"
    href="URL"
    alt="代替テキスト"
    rel="リンクタイプ"
    target="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
    download | download="ファイル名"
    ping="URL"
    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
テーブル
<table>
  • 表を表す
  • <table></table>
<caption>
  • 表のキャプションを表す
  • <caption></caption>
<colgroup>
  • 表内の列グループを表す
  • <colgroup></colgroup>
  • span="列数"
<col>
  • <colgroup>要素内の列を表す
  • <col>
  • span="列数"
<tbody>
  • 表内の本体部分で構成される行グループを表す
  • <tbody></tbody>
<thead>
  • 表内のヘッダ部分で構成される行グループを表す
  • <thead></thead>
<tfoot>
  • 表内のフッタ部分で構成される行グループを表す
  • <tfoot></tfoot>
<tr>
  • 表内の行を表す
  • <tr></tr>
<td>
  • 表内のデータセルを表す
  • <td></td>
  • colspan="列数"
    rowspan="行数"
    headers="ID名"
<th>
  • 表内の見出しセルを表す
  • <th></th>
  • colspan="列数"
    rowspan="行数"
    abbr="略語"
    headers="ID名"
    scope="auto | row | col | rowgroup | colgroup"
フォーム
<form>
  • 入力フォームを表す
  • <form></form>
  • action="URL"
    method="get | post"
    enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
    accept-charset="UTF-8"
    name="フォーム名"
    rel="リンクタイプ"
    target="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
    autocomplete="on | off"
    novalidate
<label>
  • フォーム部品のラベルを表す
  • <label></label>
  • for="ID名"
<input>
  • フォーム部品を表す(入力欄・選択肢・ボタン)
  • <input>
  • --- 共通 ---
    type="text | password | tel | url | email | search | date | month | week | time | datetime-local | number | range | color | radio | checkbox | file | hidden | submit | image | reset | button"
    name="部品名"
    value=""
    disabled
    form="ID名"
  • --- 部品タイプに依存 ---
    size="幅文字数"
    minlength="最少文字数"
    maxlength="最大文字数"
    min="最小値"
    max="最大値"
    step="粒度 | any"
    autocomplete="on | off | etc..."
    list="ID名"
    pattern="正規表現"
    placeholder="入力ヒント"
    dirname="書字方向送信名"
    accept="MIMEタイプ | .拡張子 | audio/* | video/* | image/*"
    multiple
    checked
    readonly
    required
    src="URL"
    alt="代替テキスト"
    width="横幅"
    height="高さ"
    formaction="URL"
    formmethod="get | post"
    formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
    formtarget="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
    formnovalidate
<button>
  • 内容を含むボタンを表す
  • <button></button>
  • type="submit | reset | button"
    name="部品名"
    value=""
    disabled
    form="ID名"
    formaction="URL"
    formmethod="get | post"
    formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
    formtarget="_blank | _self | _parent | _top | ブラウジングコンテキスト名"
    formnovalidate
<select>
  • プルダウンメニューを表す
  • <select></select>
  • name="部品名"
    size="行数"
    autocomplete="on | off | etc..."
    multiple
    disabled
    form="ID名"
    required
<datalist>
  • 入力欄用の入力候補のリストを表す
  • <datalist></datalist>
<optgroup>
  • プルダウンメニュー内の<option>要素のグループを表す
  • <optgroup label=""></optgroup>
  • label="グループ名"
    disabled
<option>
  • <select>または<datalist>要素内の選択肢を表す
  • <option></option>
  • value=""
    label="表示テキスト"
    selected
    disabled
<textarea>
  • 複数行のテキスト入力欄を表す
  • <textarea></textarea>
  • name="部品名"
    cols="幅文字数"
    rows="表示行数"
    minlength="最少文字数"
    maxlength="最大文字数"
    wrap="soft | hard"
    form="ID名"
    autocomplete="on | off | etc..."
    placeholder="入力ヒント"
    dirname="書字方向送信名"
    readonly
    disabled
    required
<output>
  • 計算結果などの出力欄を表す
  • <output></output>
  • name="識別名"
    for="ID名"
    form="ID名"
<progress>
  • 作業の進捗状況を表す
  • <progress></progress>
  • value="現在値"
    max="最大値"
<meter>
  • 特定範囲内の数量または割合を表す
  • <meter value=""></meter>
  • value="現在値"
    min="最小値"
    max="最大値"
    low="低域最大値"
    high="高域最小値"
    optimum="最適値"
<fieldset>
  • フォーム部品のグループを表す
  • <fieldset></fieldset>
  • form="ID名"
    name="識別名"
    disabled
<legend>
  • <fieldset>要素のキャプションを表す
  • <legend></legend>
インタラクティブ
<details>
  • 詳細情報を提供する開閉式ウィジェットを表す
  • <details></details>
  • open
<summary>
  • <details>要素のキャプションまたは要約を表す
  • <summary></summary>
<dialog>
  • ダイアログボックスまたはサブウィンドウを表す
  • <dialog></dialog>
  • open
スクリプティング
<script>
  • 文書にJavaScriptを埋め込む
  • <script></script>
  • src="URL"
    type="MIMEタイプ | module"
    crossorigin="anonymous | use-credentials | "
    integrity="文字列"
    referrerpolicy="no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url | "
    async
    defer
    nomodule
<noscript>
  • スクリプトが利用できない場合の代替コンテンツを表す
  • <noscript></noscript>
<template>
  • スクリプトで利用するHTMLコードのテンプレートを表す
  • <template></template>
<slot>
  • Shadow DOM内におけるデータの挿入口を表す
  • <slot></slot>
  • name="スロット名"
<canvas>
  • スクリプトによるグラフィクス描画のための領域を表す
  • <canvas></canvas>
  • width="横幅"
    height="高さ"
グローバル属性
accesskey
  • 要素にアクセスキーを割り当てる
  • accesskey="任意のキー"
autocapitalize
  • 入力文字の自動的な大文字化を指定する(ソフトウェアキーボード向け)
  • autocapitalize="off | none | on | sentences | words | characters"
autofocus
  • 要素に自動的なフォーカスを設定する
  • autofocus
class
  • 要素にクラス名を付ける
  • class="クラス名"
contenteditable
  • 要素内容が編集可能かどうかを指定する
  • contenteditable="true | false | "
dir
  • 要素内容の書字方向を指定する
  • dir="ltr | rtl | auto"
draggable
  • 要素がドラッグ可能かどうかを指定する
  • draggable="true | false"
enterkeyhint
  • Enterキーに表示されるアクションラベルの種類を指定する(ソフトウェアキーボード向け)
  • enterkeyhint="enter | done | go | next | previous | search | send"
hidden
  • 現時点ではその要素が関連していないことを指定する
  • hidden
id
  • 要素にIDを付ける
  • id="ID名"
inputmode
  • 入力モードの種類を指定する(ソフトウェアキーボード向け)
  • inputmode="none | text | tel | url | email | numeric | decimal | search"
is
  • カスタマイズされた組み込み要素と関連付ける
  • is="カスタム要素名"
itemid
  • アイテムのグローバル識別子を指定する(マイクロデータ向け)
  • itemid="URL"(URI?)
itemprop
  • アイテムのプロパティ名を指定する(マイクロデータ向け)
  • itemprop="プロパティ名"
itemref
  • アイテムグループの外にあるアイテムと関連付ける(マイクロデータ向け)
  • itemref="ID名"
itemscope
  • 要素内容がアイテムのグループであることを表す(マイクロデータ向け)
  • itemscope
itemtype
  • アイテムのグループ内で使用するプロパティ名の定義を指定する(マイクロデータ向け)
  • itemtype="URL"
lang
  • 要素内容の言語を指定する
  • lang="言語コード"
nonce
  • コンテンツセキュリティーポリシーで使用する暗号ノンスを表す
  • nonce="暗号ノンス"
slot
  • 特定の<slot>要素と関連付ける
  • slot="スロット名"
spellcheck
  • 入力時にスペルチェックと文法チェックを行うかどうかを指定する
  • spellcheck="true | false | "
style
  • 要素に直接CSSスタイルを指定する
  • style="CSSコード"
tabindex
  • Tabキーによるフォーカスの移動順序を制御する
  • tabindex="数値"
title
  • 要素の補足情報を表す
  • title="テキスト"
translate
  • 要素内容を翻訳対象にするかどうかを指定する
  • translate="yes | no | "