HTML 属性リファレンス

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

属性一覧

属性名 要素 説明
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> 要素の水平方向の配置を指定します。
allow <iframe> iframe の機能ポリシーを指定します。
alt <applet>, <area>, <img>, <input> 画像が表示できない場合の代替テキストです。
async <script> スクリプトが非同期で実行されることを示します。
autocapitalize グローバル属性 ユーザーによって入力/編集されたとき、入力文字列が自動的に大文字化されるかどうか、どのように行われるかを制御します。
autocomplete <form>, <input><select>, <textarea> このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。
autofocus <button>, <input>, <keygen>, <select>, <textarea> ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。
autoplay <audio>, <video> オーディオやビデオが再生可能になった時点で自動再生を開始します。
background <body>, <table>, <td>, <th> 画像ファイルの URL を指定します。
メモ: ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の background-image を使用してください。
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 と共によく用いられます。
code <applet> 読み込んで実行するアプレットのクラスファイルの URL を指定します。
codebase <applet> code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。
color <basefont>, <font>, <hr>

この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。

注: これは古い属性です。代わりに CSS の color プロパティを使用して下さい。

cols <textarea> テキストエリアの桁数 (水平方向の文字数) を定義します。
colspan <td>, <th> colspan 属性はテーブルのセルを結合する列数を定義します。
content <meta> 状況に応じて、 http-equiv または name に関連した値です。
contenteditable グローバル属性 要素の内容が編集可能であるかどうかを示します。
contextmenu グローバル属性 要素のコンテキストメニューとして機能する <menu> 要素の ID を定義します。
controls <audio>, <video> 再生コントロールをユーザに表示すべきかどうかを示します。
coords <area> ホットスポット領域の座標を指定する為の値のセット
crossorigin <audio>, <img>, <link>, <script>, <video> 要素がオリジン間リクエストをどう扱うか
csp  <iframe> 埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。
data <object> リソースの URL を指定します。
data-* グローバル属性 HTML 要素にカスタム属性が添付できるようにします。
datetime <del>, <ins>, <time> 要素に関連付けられた日時を示します。
decoding <img> 画像をデコードする推奨の方法をIndicates the preferred method to decode the image.
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> 閲覧者によるによるコントロールの操作を無効にするかどうかを示します。
download <a>, <area> リソースをダウンロードするためのハイパーリンクであるかどうかを示します。
draggable グローバル属性 要素がドラッグ可能であるかどうかを示します。
dropzone グローバル属性 要素がコンテンツのドロップ操作を受け付けるかどうかを示します。
enctype <form> method 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。
enterkeyhint <textarea>, contenteditable enterkeyhint は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
for <label>, <output> この要素が属する要素を指定します。
form <button>, <fieldset>, <input>, <keygen>, <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>

ここに挙げた要素の高さを指定します。他の要素では、 height プロパティを使用してください。

注: <div> など一部の要素では、これは古い属性であり、代わりに CSS の height プロパティを使用してください。

hidden グローバル属性 この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。
high <meter> 最大値の下限を示します。
href <a>, <area>, <base>, <link> リンクされたリソースの URL です。
hreflang <a>, <area>, <link> リンクされたリソースの言語を指定します。
http-equiv <meta> プラグマディレクティブを定義します。
icon <command> コマンドを表す画像を指定します。
id グローバル属性 特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。
importance  <iframe>, <img>, <link>, <script> リソースの相対的なフェッチ優先順位を示します。
integrity <link>, <script>

ブラウザーが読み込むものを検証できるようにするためのサブリソース完全性の値を指定します。

intrinsicsize  <img> この属性は、ブラウザーに画像に交友の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。
inputmode <textarea>, contenteditable 要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
ismap <img> 画像がサーバーサイドイメージマップの一部であることを示します。
itemprop グローバル属性
keytype <keygen> 生成する鍵の種類を指定します。
kind <track> テキストトラックの種類を指定します。
label <optgroup><option><track> ユーザーが読める形の要素のタイトルを指定します。
lang グローバル属性 要素内で用いられている言語を定義する。
language <script> 要素で使用しているスクリプト言語を定義する。
loading  <img>, <iframe> 要素を遅延読み込みさせたいことを示します。
list <input> ユーザに提案するため、事前に定義した選択肢のリストを示す。
loop <audio>, <bgsound>, <marquee>, <video> メディアの再生が完了した後、始めから再生を開始するかを示します。
low <meter> 最小値の上限を示します。
manifest <html> ドキュメントのキャッシュマニフェストの URL を指定します。
メモ: この属性は廃止されており、代わりに <link rel="manifest"> を使用してください。
max <input>, <meter>, <progress> 許容される最大の値を示す。
maxlength <input>, <textarea> 要素が許容する最大文字数を定義します。
minlength <input>, <textarea> 要素が許容する最小文字数を定義する。
media <a>, <area>, <link>, <source>, <style> リンクされたリソースがどのメディアに対して設計されたかを指定する。ンn
method <form> フォームを送信する際に使用する HTTP メソッドを定義する。 GET (既定値) または POST を指定可能。
min <input>, <meter> 許容される最小の値を示す。
multiple <input>, <select> type が email または file の input では、複数の値を入力可能かを示す。
muted <audio>, <video> ページ読み込み時に音声を無音にするかどうかを示します。
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> ping 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。
placeholder <input>, <textarea> フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。
poster <video> ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。
preload <audio>, <video> リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。
radiogroup <command>
readonly <input>, <textarea> 要素が編集できるかどうかを示す。
referrerpolicy <a>, <area>, <iframe>, <img>, <link>, <script> リソースにアクセスする際にどのリファラーが送信されるかを指定する。
rel <a>, <area>, <link> リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。
required <input>, <select>, <textarea> 入力が必須の要素であるかを示す。
reversed <ol> リストを昇順ではなく降順に表示することを示す。
rows <textarea> 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 グローバル属性 外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。
summary <table>
tabindex グローバル属性 ブラウザーによる既定のタブオーダーを無効化して、指定した順序に従うようにします。
target <a>, <area>, <base>, <form>
title グローバル属性 要素の示す範囲のタイトル。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示される。
translate グローバル属性 ページが翻訳版である場合、要素の属性値と子の Text ノードが翻訳されているか、変更せずにそのままであるかを指定します。
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> 要素の型を定義する。
usemap <img>, <input>, <object>
value <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param> ページ読み込み時に要素で表示するデフォルト値を定義する。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

ここに挙げられた要素に対して、要素の幅を指定します。

注: <div> など他の要素については、これは古い属性であり、代わりに CSS の width プロパティを使用してください。

wrap <textarea> テキストを折り返すかどうかを示します。

content 属性と IDL 属性

HTML では、ほとんどの属性に content 属性IDL (Interface Definition Language) 属性 の 2 つの側面があります。

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) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

論理属性

一部のコンテンツ属性 (例えば required, readonly, disabled) は論理属性 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値は true となり、存在しなければ、その値は false となります。

HTML5 では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。

<div itemscope> This is valid HTML but invalid XML. </div>
<div itemscope=itemscope> This is also valid HTML but invalid XML. </div>
<div itemscope=""> This is valid HTML and also valid XML. </div>
<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>

明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が true であると解釈されます。

関連情報