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> 要素の水平方向の配置を指定します。
alt <applet>, <area>, <img>, <input> 画像が表示できない場合の代替テキストです。
async <script> スクリプトが非同期で実行されることを示します。
autocapitalize グローバル属性 ユーザーによって入力/編集されたとき、入力文字列が自動的に大文字化されるかどうか、どのように行われるかを制御します。
autocomplete <form>, <input>, <textarea> このフォーム内のコントロールが、ブラウザーによる値のオートコンプリートを既定で許容するかを示します。
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 と共によく用いられます。
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> 要素がオリジン間リクエストをどう扱うか
data <object> リソースの URL を指定します。
data-* グローバル属性 HTML 要素にカスタム属性が添付できるようにします。
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> 閲覧者によるによるコントロールの操作を無効にするかどうかを示します。
download <a>, <area> リソースをダウンロードするためのハイパーリンクであるかどうかを示します。
draggable グローバル属性 要素がドラッグ可能であるかどうかを示します。
dropzone グローバル属性 要素がコンテンツのドロップ操作を受け付けるかどうかを示します。
enctype <form> method 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。
for <label>, <output> この要素が属する要素を指定します。
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> その要素が所属するフォームを示します。
formaction <input>, <button> その要素のアクションを示します。 <form> で定義されたアクションを上書きします。
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 と共によく使われます。この属性の値は一位でなければなりません。
integrity <link>, <script>

ブラウザーが何をフェッチするか確認できるようにするためのセキュリティ機能です。

MDN Link

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> 要素が許容する最大文字数を定義します。
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>  
placeholder <input>, <textarea> フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。
poster <video> ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。
preload <audio>, <video> リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。
radiogroup <command>  
readonly <input>, <textarea> 要素に対し、閲覧者による編集を不可とするよう指示。
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>
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>, <option>, <input>, <li>, <meter>, <progress>, <param> ページ読み込み時に要素で表示するデフォルト値を定義する。
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

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

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

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

content 属性と IDL 属性

HTML では、ほとんどの属性に content 属性IDL 属性 の 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) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, FredB, shirayuki
最終更新者: mfuji09,