HTML 属性リファレンス
HTML 要素には属性が存在します。これは、ユーザーが求める基準を満たすために、要素を構成したり、さまざまな方法で動作を調整したりするための追加の値です。
属性一覧
| 属性名 | 要素 | 説明 |
|---|---|---|
accept
|
<form>, <input>
|
サーバーの受容する型のリストです。ふつうはファイル形式です。 |
accept-charset
|
<form> |
文字集合であり、指定した場合は "UTF-8" でなければなりません。 |
accesskey
|
グローバル属性 | 要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。 |
action
|
<form> |
フォーム経由で送信される情報を処理するプログラムの URI です。 |
align
非推奨;
|
<caption>, <col>,
<colgroup>,
<hr>, <iframe>,
<img>, <table>,
<tbody>, <td>,
<tfoot>, <th>,
<thead>, <tr>
|
要素の水平方向の配置を指定します。 |
allow
|
<iframe> |
iframe の機能ポリシーを指定します。 |
alt
|
<area>,
<img>, <input>
|
画像が表示できない場合の代替テキストです。 |
as
|
<link>
|
リンクで読み込むコンテンツの種類を指定します。 |
async
|
<script> |
スクリプトを非同期で実行します。 |
autocapitalize
|
グローバル属性 | ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。 |
autocomplete
|
<form>, <input>,
<select>,
<textarea>
|
このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。 |
autoplay
|
<audio>,
<video>
|
オーディオやビデオが再生可能になった時点で自動再生を開始します。 |
background |
<body>, <table>,
<td>, <th>
|
画像ファイルの URL を指定します。
メモ: ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の |
bgcolor |
<body>, <col>,
<colgroup>,
<marquee>,
<table>,
<tbody>,
<tfoot>, <td>,
<th>, <tr>
|
要素の背景色です。
メモ: これは古い属性です。代わりに CSS の |
border |
<img>, <object>,
<table>
|
境界線の幅です。
メモ: これは古い属性です。代わりに CSS の |
capture
|
<input> |
Media Capture 仕様書から、キャプチャできる新しいファイルを指定します。 |
charset
|
<meta>
|
ページまたはスクリプトの文字エンコーディングを宣言します。 |
checked
|
<input>
|
ページ読み込み時に要素にチェックを入れておくかどうかを指定します。 |
cite
|
<blockquote>,
<del>, <ins>,
<q>
|
引用元または変更点の情報源を指す URI を格納します。 |
class
|
グローバル属性 | よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。 |
color |
<font>, <hr>
|
この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。
メモ: これは古い属性です。代わりに CSS の |
cols
|
<textarea> |
テキストエリアの桁数 (水平方向の文字数) を定義します。 |
colspan
|
<td>, <th>
|
colspan 属性はテーブルのセルを結合する列数を定義します。 |
content
|
<meta> |
状況に応じて、 http-equiv または name に関連した値です。
|
contenteditable
|
グローバル属性 | 要素の内容が編集可能であるかどうかを示します。 |
controls
|
<audio>,
<video>
|
再生コントロールをユーザーに表示すべきかどうかを示します。 |
coords
|
<area> |
ホットスポット領域の座標を指定するための値のセットです。 |
crossorigin
|
<audio>, <img>,
<link>, <script>,
<video>
|
要素がオリジン間リクエストをどう扱うか |
csp
Experimental
|
<iframe> |
埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。 |
data
|
<object> |
リソースの URL を指定します。 |
data-*
|
グローバル属性 | HTML 要素にカスタム属性が添付できるようにします。 |
datetime
|
<del>, <ins>,
<time>
|
要素に関連付けられた日時を示します。 |
decoding
|
<img> |
画像をデコードする推奨の方法を示します。 |
default
|
<track> |
ユーザー設定によって異なることが示されていない限り、トラックが有効であることを示します。 |
defer
|
<script> |
ページの解釈が完了した後に実行するスクリプトであることを示します。 |
dir
|
グローバル属性 | テキストの書字方向を定義します。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left) です。 |
dirname
|
<input>,
<textarea>
|
|
disabled
|
<button>,
<fieldset>,
<input>,
<optgroup>,
<option>,
<select>,
<textarea>
|
閲覧者によるによるコントロールの操作を無効にするかどうかを示します。 |
download
|
<a>, <area> |
リソースをダウンロードするためのハイパーリンクであるかどうかを示します。 |
draggable
|
グローバル属性 | 要素がドラッグ可能であるかどうかを示します。 |
enctype
|
<form> |
method 属性が POST である場合に、フォームデータのコンテンツ型を定義します。
|
enterkeyhint
|
<textarea>,
contenteditable
|
enterkeyhint は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
|
for
|
<label>,
<output>
|
この要素が属する要素を指定します。 |
form
|
<button>,
<fieldset>,
<input>,
<label>,
<meter>,
<object>,
<output>,
<progress>,
<select>,
<textarea>
|
その要素が所属するフォームを示します。 |
formaction
|
<input>,
<button>
|
その要素のアクションを示します。 <form> で定義されたアクションを上書きします。
|
formenctype
|
<button>,
<input>
|
button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有するフォームの enctype 属性より優先されます。
|
formmethod
|
<button>,
<input>
|
button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用する送信メソッド (GET, POST, など) を設定します。この属性が指定された場合、ボタンを所有するフォームの method 属性より優先されます。
|
formnovalidate
|
<button>,
<input>
|
button や input が送信ボタンである場合 (type="submit")、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有するフォームの novalidate 属性より優先されます。
|
formtarget
|
<button>,
<input>
|
button や input が送信ボタンである場合 (type="submit")、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有するフォームの target 属性より優先されます。
|
headers
|
<td>, <th>
|
この要素に適用する <th> 要素の ID。
|
height |
<canvas>,
<embed>,
<iframe>, <img>,
<input>,
<object>,
<video>
|
ここに挙げた要素の高さを指定します。他の要素では、 |
hidden
|
グローバル属性 | この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。 |
high
|
<meter> |
最大値の下限を示します。 |
href
|
<a>, <area>,
<base>, <link>
|
リンクされたリソースの URL です。 |
hreflang
|
<a>, <link>
|
リンクされたリソースの言語を指定します。 |
http-equiv
|
<meta> |
プラグマディレクティブを定義します。 |
id
|
グローバル属性 | 特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一意でなければなりません。 |
integrity
|
<link>, <script>
|
ブラウザーが読み込むものを検証できるようにするためのサブリソース完全性の値を指定します。 |
intrinsicsize
非推奨;
|
<img> |
この属性はブラウザーに、画像に固有の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。 |
inputmode
|
<textarea>,
contenteditable
|
要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
|
ismap
|
<img> |
画像がサーバーサイドイメージマップの一部であることを示します。 |
itemprop
|
グローバル属性 | |
kind
|
<track> |
テキストトラックの種類を指定します。 |
label
|
<optgroup>,
<option>,
<track>
|
ユーザーが読める形の要素のタイトルを指定します。 |
lang
|
グローバル属性 | 要素内で用いられている言語を定義します。 |
language
非推奨;
|
<script> |
要素で使用しているスクリプト言語を定義します。 |
loading |
<img>, <iframe>
|
要素を遅延読み込みさせたいか (loading="lazy") または直ちに読み込ませたいか (loading="eager") を示します。
|
list
|
<input> |
ユーザーに提案するため、事前に定義した選択肢のリストを示す。 |
loop
|
<audio>,
<marquee>,
<video>
|
メディアの再生が完了した後、始めから再生を開始するかを示します。 |
low
|
<meter> |
最小値の上限を示します。 |
max
|
<input>,
<meter>,
<progress>
|
許容される最大の値を示します。 |
maxlength
|
<input>,
<textarea>
|
要素が許容する最大文字数を定義します。 |
minlength
|
<input>,
<textarea>
|
要素が許容する最小文字数を定義します。 |
media
|
<a>, <area>,
<link>, <source>,
<style>
|
リンクされたリソースがどのメディアに対して設計されたかを指定します。 |
method
|
<form> |
フォームを送信する際に使用する HTTP メソッドを定義します。 GET (既定値) または POST が指定可能です。
|
min
|
<input>,
<meter>
|
許容される最小の値を示します。 |
multiple
|
<input>,
<select>
|
input で type が email または file の input ものでは、複数の値を入力可能かどうかを示します。
|
muted
|
<audio>,
<video>
|
ページ読み込み時に音声を無音にするかどうかを示します。 |
name
|
<button>, <form>,
<fieldset>,
<iframe>,
<input>,
<object>,
<output>,
<select>,
<textarea>,
<map>, <meta>,
<param>
|
要素の名前です。例えば、送信されたフォームでサーバーがフィールドを識別するために使用します。 |
novalidate
|
<form> |
送信時にフォームが検証しないことを示す属性です。 |
open
|
<details>,
<dialog>
|
コンテンツが現在表示されているか（<details> 要素の場合）、ダイアログがアクティブで対話可能か（<dialog> 要素の場合）を示します。
|
optimum
|
<meter> |
最適な値を示します。 |
pattern
|
<input> |
要素の値を検証するための正規表現を定義します。 |
ping
|
<a>, <area> |
ping 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。
|
placeholder
|
<input>,
<textarea>
|
フィールドが何を入力するものであるかのヒントを閲覧者に対し提供します。 |
playsinline
|
<video>
|
論理属性で、動画が「インライン」で再生されること、つまり、要素の再生領域内で再生されることを示します。この属性がないからといって、動画が常に全画面で再生されるわけではないことに注意してください。 |
poster
|
<video> |
ユーザーが再生やシークを行うまでの間に表示するポスターフレームの URL です。 |
preload
|
<audio>,
<video>
|
リソースの全体または一部の事前読み込みを行う、あるいは事前読み込みを行わないことを示す。 |
readonly
|
<input>,
<textarea>
|
要素が編集できるかどうかを示す。 |
referrerpolicy
|
<a>, <area>,
<iframe>, <img>,
<link>, <script>
|
リソースにアクセスする際にどのリファラーが送信されるかを指定します。 |
rel
|
<a>, <area>,
<link>
|
リンク先オブジェクトとリンク元オブジェクトとの関係を指定します。 |
required
|
<input>,
<select>,
<textarea>
|
入力が必須の要素であるかを示します。 |
reversed
|
<ol> |
リストを昇順ではなく降順に表示することを示します。 |
role
|
グローバル属性 | 支援技術が使用するための要素の明示的な役割を定義します。 |
rows
|
<textarea> |
テキストエリアの行数を定義します。 |
rowspan
|
<td>, <th>
|
テーブルセルがまたがる行数を定義します。 |
sandbox
|
<iframe> |
iframe に読み込まれた文書で特定の機能 (フォームの投稿や新しいウィンドウを開くなど) を使用するのを阻止します。 |
scope
|
<th> |
(th 要素で定義される) ヘッダーが関連するセルを定義します。
|
scoped
非標準
非推奨;
|
<style> |
|
selected
|
<option> |
ページ読込時に、対象要素を選択状態にします。 |
shape
|
<a>, <area> |
|
size
|
<input>,
<select>
|
要素の幅を（ピクセル数で）定義します。要素の type 属性が text または password である場合は文字数になります。
|
sizes
|
<link>, <img>,
<source>
|
|
slot
|
グローバル属性 | 要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。 |
span
|
<col>,
<colgroup>
|
|
spellcheck
|
グローバル属性 | 要素のスペルチェックを有効にするかどうかを示します。 |
src
|
<audio>,
<embed>,
<iframe>, <img>,
<input>,
<script>,
<source>,
<track>,
<video>
|
埋め込みコンテンツの URL です。 |
srcdoc
|
<iframe> |
|
srclang
|
<track> |
|
srcset
|
<img>, <source>
|
一つ以上のレスポンシブ画像の候補です。 |
start
|
<ol> |
1 以外から始まる場合の最初の値を定義します。 |
step
|
<input> |
|
style
|
グローバル属性 | これまで設定されたスタイルを上書きする CSS スタイルを定義します。 |
summary
非推奨;
|
<table> |
|
tabindex
|
グローバル属性 | ブラウザーによる既定のタブ順を無効化して、指定した順序に従うようにします。 |
target
|
<a>, <area>,
<base>, <form>
|
リンク先の文書を開く場所（<a> 要素の場合）、または受信したレスポンスを表示する場所（<form>要素の場合）を指定します。
|
title
|
グローバル属性 | この要素にポインターを当てたときに表示されるツールチップのテキストです。 |
translate
|
グローバル属性 |
ページが翻訳版である場合、要素の属性値と子の Text ノードが翻訳されているか、変更せずにそのままであるかを指定します。
|
type
|
<button>,
<input>,
<embed>,
<object>,
<ol>,
<script>,
<source>,
<style>, <menu>,
<link>
|
要素の型を定義します。 |
usemap
|
<img>, <input>,
<object>
|
|
value
|
<button>, <data>,
<input>, <li>,
<meter>,
<option>,
<progress>,
<param>
|
ページ読み込み時に要素で表示する既定値を定義します。 |
width
|
<canvas>,
<embed>,
<iframe>, <img>,
<input>,
<object>,
<video>
|
ここに挙げられた要素に対して、要素の幅を指定します。 |
wrap
|
<textarea> |
テキストを折り返すかどうかを示します。 |
コンテンツ属性と IDL 属性
HTML では、ほとんどの属性にコンテンツ属性と IDL (Interface Definition Language) 属性の 2 つの側面があります。
コンテンツ属性はコンテンツ（HTML コード）から設定する属性であり、 element.setAttribute() や element.getAttribute() を使用して設定または取得できます。 コンテンツ属性は値として数値を想定するものであっても、常に文字列です。例えば コンテンツ属性を使用して <input> 要素の maxlength 属性に 42 を設定するには、その要素で setAttribute("maxlength", "42") を呼び出さなければなりません。
IDL 属性は JavaScript プロパティとしても知られています。これらは、 JavaScript のプロパティを使って、 element.foo のように読み込んだり設定したりすることができます。 IDL 属性は常に、取得する際に値を返すために基盤となっているコンテンツ属性を使用し（変換することもあります）、設定するにはコンテンツ属性に何かを保存します。言い換えれば、 IDL 属性は要するにコンテンツ属性を反映します。
ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば <input> 要素の type 属性の既定値は "text" であるので、input.type="foobar" を設定すると <input> 要素は (外見と動作が) text 型になりますが、 "type" コンテンツ属性の値は "foobar" になります。しかし、 type の IDL 属性は文字列 "text" を返します。
IDL 属性は常に文字列とは限りません。例えば input.maxlength は数値（符号付き long）です。 IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength は常に数値を返し、また input.maxlength を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。
IDL 属性は、他の型を反映することができます。符号なし long、URL、論理値などです。残念ながら、明確な規則はなく、 IDL 属性が対応するコンテンツ属性と結びついてどのように振る舞うかは、属性によって異なります。ほとんどの場合は仕様書にあるレイアウトルールに従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性（例えば select.size）があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。
論理属性
一部のコンテンツ属性（例えば required, readonly, disabled）は「論理属性」 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値が真となり、存在しなければ、その値が偽となります。
HTML では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列（属性の値が割り当てられないことがあります）または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。
<div itemscope>これは HTML では有効ですが XML では無効です。</div>
<div itemscope=itemscope>これも HTML では有効ですが XML では無効です。</div>
<div itemscope="">これは HTML でも XML でも有効です。</div>
<div itemscope="itemscope">
これは HTML でも XML でも有効ですが、おそらく少し冗長です。
</div>
明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が真であると解釈されます。
イベントハンドラー属性
警告: イベントハンドラーコンテンツ属性を使用することは推奨されません。HTML と JavaScript が混在すると保守性の低いコードになることが多く、またイベントハンドラー属性の実行はコンテンツセキュリティポリシーによってブロックされることがあります。
上の表に掲載されている属性の他に、グローバルイベントハンドラー（onclick など）も、すべての要素のコンテンツ属性として指定することができます。
すべてのイベントハンドラー属性は文字列を受け入れます。この文字列は、 JavaScript 関数、たとえば function name(/*args*/) {body} などを生成するために使用され、name は属性の名前、body は属性の値となります。ハンドラーは、対応する JavaScript イベントハンドラーと同じ引数を受け取ります。ほとんどのハンドラーは event 引数 1 つだけを受け取りますが、onerror は5つの引数 (event, source, lineno, colno, error) を受け取ります。これは、一般的に、属性内で変数 event を使用することができることを意味しています。
<div onclick="console.log(event)">ここをクリック</div>
<!-- 生成されたハンドラーには名前があります。自分自身で参照できます。 -->
<div onclick="console.log(onclick)">ここをクリック</div>