属性名 | 要素 | 説明 |
---|---|---|
accept | <form> , <input> |
サーバーの受容する型のリスト。ファイルタイプなど。 |
accept-charset | <form> |
対応している文字集合の一覧 |
accesskey | グローバル属性 | 要素をアクティブ化またはフォーカス追加用に、キーボードショートカットを定義する |
action | <form> |
フォーム経由で送信される情報を処理するプログラムの URI |
align | <applet> , <caption> , <col> , <colgroup> , <hr> , <iframe> , <img> , <table> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr> |
要素の水平方向の配置を指定する |
alt | 画像が表示できない場合の代替テキスト | |
async | <script> |
スクリプトを非同期的に実行する事を示す |
autocomplete | <form> , <input> |
フォーム内のコントロールが、ブラウザによる値のオートコンプリートをデフォルトで許容するかを示す |
autofocus | <button> , <input> , <keygen> , <select> , <textarea> |
ページ読込後に、対象要素に自動的にフォーカスを当てるようにする |
autoplay | <audio> , <video> |
オーディオやビデオが再生可能になった時点で自動再生を開始する |
bgcolor | <body> , <col> , <colgroup> , <marquee> , <table> , <tbody> , <tfoot> , <td> , <th> , <tr> |
要素の背景色。 注意: これは古い属性です。CSS の background-color プロパティを使用して下さい。 |
border | <img> , <object> , <table> |
境界線の幅。 注意: これは古い属性です。CSS の border プロパティを使用してください。 |
buffered | <audio> , <video> |
既にバッファとして持っているメディアのタイムレンジ |
challenge | <keygen> |
公開鍵とともに送信するチャレンジ文字列 |
charset | <meta> , <script> |
ページまたはスクリプトの文字エンコーディングを宣言 |
checked | <command> , <input> |
ページロード時に要素にチェックを入れておくかどうかを指定 |
cite | <blockquote> , <del> , <ins> , <q> |
引用元、または変更点についての説明が記述された文書の URI を格納 |
class | グローバル属性 | CSS や JavaScript からの参照に用いられる |
code | <applet> |
ロード / 実行するアプレットのクラスファイルの URL を指定 |
codebase | <applet> |
code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または 相対 URL を指定 |
color | <basefont> , <font> , <hr> |
定義済みの色名または hex 形式 (#RRGGBB) で要素の文字色を設定 |
cols | <textarea> |
テキストエリアの列数(水平方向の文字数)を設定 |
colspan | <td> , <th> |
テーブルのセルがまたぐ列数を設定 |
content | <meta> |
http-equiv または name の状況に応じて、関連付けられた値を指定 |
contenteditable | グローバル属性 | 閲覧者による要素の内容の編集を可能にする論理属性。 |
contextmenu | グローバル属性 | 要素のコンテクストメニューとして機能する <menu> 要素の id を指定 |
controls | <audio> , <video> |
再生コントロールをユーザに表示すべきかどうかを設定 |
coords | <area> |
ホットスポット領域の座標を指定する為の値のセット |
data | <object> |
リソースの URL を指定 |
datetime | <del> , <ins> , <time> |
要素に関連付けられた日時を示す |
default | <track> |
ユーザ設定で別の項目を指定していない場合に、有効にするトラックを指定する |
defer | <script> |
ページのパースが完了した後に実行するスクリプトであることを示す |
dir | グローバル属性 | テキストの書字方向を定義する。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left) |
dirname | <input> , <textarea> |
|
disabled | <button> , <command> , <fieldset> , <input> , <keygen> , <optgroup> , <option> , <select> , <textarea> |
閲覧者によるによるコントロールの操作を不能にする論理属性。 |
draggable | グローバル属性 | 要素をドラッグ可能にする論理属性。 |
dropzone | グローバル属性 | 閲覧者によるその要素へのドロップ操作を可能とする論理属性。 |
enctype | <form> |
method 属性が POST である場合に、フォームデータのコンテンツタイプを定義する。 |
for | <label> , <output> |
この要素が属する要素を指定。 |
form | <button> , <fieldset> , <input> , <keygen> , <label> , <meter> , <object> , <output> , <progress> , <select> , <textarea> |
要素のフォームオーナー(※そのフォームコントロールが属するフォーム)を指定。 |
headers | <td> , <th> |
この要素に適用する <th> 要素の ID。 |
height | <canvas> , <embed> , <iframe> , <img> , <input> , <object> , <video> |
注記: <div> など一部の要素ではこの属性が古い属性であり、代わりに CSS の height プロパティを使用してください。<canvas> など他の要素では、height 属性を指定しなければなりません。 |
hidden | グローバル属性 | 要素の関連性を示す。 |
high | <meter> |
「高」とされる範囲の下限を示す。 |
href | <a> , <area> , <base> , <link> |
リンクされたリソースの URL。 |
hreflang | <a> , <area> , <link> |
リンクされたリソースの言語。 |
http-equiv | <meta> |
|
icon | <command> |
コマンドを表す画像を指定する。 |
id | グローバル属性 | 特定の要素へスタイルを設定するため、CSS と共に使用することが多い。この属性の値は一意でなければならない。 |
ismap | <img> |
画像がサーバサイドイメージマップの一部であることを示す。 |
itemprop | グローバル属性 | その要素に与えられたマイクロデータのプロパティ名を指定する。 |
keytype | <keygen> |
生成する鍵の種類を指定する。 |
kind | <track> |
テキストトラックの種類を指定する。 |
label | <track> |
テキストトラックのタイトルを指定する。 |
lang | グローバル属性 | 要素内で用いられている言語を定義する。 |
language | <script> |
要素で使用しているスクリプト言語を定義する。 |
list | <input> |
ユーザに提案するため、事前に定義した選択肢のリストを示す。 |
loop | <audio> , <bgsound> , <marquee> , <video> |
メディアの再生が完了した後、始めから再生を開始するかを示す。 |
low | <meter> |
「低」とされる範囲の上限を示す。 |
manifest | <html> |
ドキュメントのキャッシュマニフェストの URL を指定する。 |
max | <input> , <meter> , <progress> |
許容される最大の値を示す。 |
maxlength | <input> , <textarea> |
要素が許容する最大の文字数を定義する。 |
media | <a> , <area> , <link> , <source> , <style> |
リンクされたリソースがどのメディアに対して設計されたかを指定する。 |
method | <form> |
フォームを送信する際に使用する HTTP メソッドを定義する。GET (既定値) または POST を指定可能。 |
min | <input> , <meter> |
許容される最小の値を示す。 |
multiple | <input> , <select> |
type が email または file の input では、複数の値を入力可能かを示す。 |
name | <button> , <form> , <fieldset> , <iframe> , <input> , <keygen> , <object> , <output> , <select> , <textarea> , <map> , <meta> , <param> |
要素の名前。例えば、送信されたフォームでサーバがフィールドを識別するために使用する。 |
novalidate | <form> |
送信時にフォームが検証されないようにする。 |
open | <details> |
ページ読み込み時に詳細情報を表示するかを示す。 |
optimum | <meter> |
最適な値を示す。 |
pattern | <input> |
要素の値を検証する正規表現を定義する。 |
ping | <a> , <area> |
|
placeholder | <input> , <textarea> |
フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。未入力状態の入力欄に表示される。 |
poster | <video> |
ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。 |
preload | <audio> , <video> |
リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。 |
pubdate | <time> |
この日時が、もっとも近い祖先 <article> 要素の日時であることを示す。 |
radiogroup | <command> |
|
readonly | <input> , <textarea> |
要素に対し、閲覧者による編集を不可とするよう指示。 |
rel | <a> , <area> , <link> |
リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。 |
required | <input> , <select> , <textarea> |
入力が必須の要素であるかを示す。 |
reversed | <ol> |
リストを昇順ではなく降順に表示することを示す。 |
rows | <textarea> |
textarea の行数を定義する。 |
rowspan | <td> , <th> |
テーブルセルがまたがる行数を定義する。 |
sandbox | <iframe> |
|
spellcheck | グローバル属性 | 要素に対し、スペルチェックの可否を指定する。 |
scope | <th> |
|
scoped | <style> |
指定した style 要素の親要素とその子孫要素に対してのみスタイルを適用するよう指示する。 |
seamless | <iframe> |
|
selected | <option> |
ページ読込時に、対象要素を選択状態にする。 |
shape | <a> , <area> |
|
size | <input> , <select> |
要素の幅を定義する (ピクセル値)。要素の type 属性が text または password である場合は文字数になる。 |
sizes | <link> |
|
span | <col> , <colgroup> |
|
src | <audio> , <embed> , <iframe> , <img> , <input> , <script> , <source> , <track> , <video> |
埋め込みコンテンツの URL。 |
srcdoc | <iframe> |
|
srclang | <track> |
|
start | <ol> |
最初のアイテムの序数値を定義する。これにより、1 以外からカウントするリストを記述する事が出来ます。 |
step | <input> |
|
style | グローバル属性 | 外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。 |
summary | <table> |
表の概要を示す。 |
tabindex | グローバル属性 | ブラウザによる既定のタブオーダーを無効化して、指定した順序に従うようにします。 |
target | <a> , <area> , <base> , <form> |
|
title | グローバル属性 | 要素の示す範囲のタイトル。PC ブラウザでは、マウスオーバー時にツールチップとしてその属性値が表示される。 |
type | <button> , <input> , <command> , <embed> , <object> , <script> , <source> , <style> , <menu> |
要素の型を定義する。 |
usemap | <img> , <input> , <object> |
map 要素の name 属性値を指定し、map 要素と関連付ける。 |
value | <button> , <option> , <input> , <li> , <meter> , <progress> , <param> |
ページ読み込み時に要素で表示するデフォルト値を定義する。 |
width | <canvas> , <embed> , <iframe> , <img> , <input> , <object> , <video> |
幅指定が必要な要素に対し、ピクセル幅を指定する。単位は記述しない。 注意: <div> などに関しては、これは古い属性であり、代わりに CSS の width プロパティを用いるべきです。 対して <canvas> 等はその特性上、この属性が必須となっています。 |
wrap | <textarea> |
テキストを折り返すかを示す。 |
content 属性と IDL 属性
HTML では、ほとんどの属性に 2 つの側面があり、それは content 属性 と IDL 属性 です。
content 属性は content (HTML コード) から設定する属性であり、element.setAttribute()
や element.getAttribute()
を使用して設定あるいは取得できます。content 属性は値として数値を想定するものであっても、常に文字列です。例えば content 属性を使用して <input>
要素の maxlength
属性に 42 を設定するには、その要素で setAttribute("maxlength", "42")
を呼び出さなければなりません。
IDL 属性は JavaScript プロパティとしても知られています。これらは element.foo
といった JavaScript プロパティを使用して読み書きします。IDL 属性は読み取り時に値を返すため基になる content 属性を使用 (ただし、変換するでしょう) したり、書き込み時に content 属性へ何らかの値を保存したりします。言い換えると、IDL 属性は content 属性を映し出します。
ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば <input>
要素の type
属性のデフォルト値は "text" であるので、input.type="foobar"
を設定すると <input>
要素は (外見と動作が) text タイプになりますが、"type" content 属性の値は "foobar" になります。しかし、type
IDL 属性は文字列 "text" を返します。
IDL 属性は常に文字列ではありません。例えば input.maxlength
は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength
は常に数値を返し、また input.maxlength
を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。
IDL 属性は符号なし long、URL、論理値など他の型を反映することが可能です。残念ながら、属性に応じて IDL 属性が対応する content 属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は仕様にある規則に従いますが、そうでない場合もあります。HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば select.size
) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。