備忘録的プログラミングリファレンス

HTML 属性

 このページで解説する HTML 属性とは、HTML タグエレメントが持つ属性で、タグエレメントの機能を拡張したり、特徴づけたり、イベントハンドラーというスクリプトとの橋渡しをする役割をします。

<p(Element) id="id_example"(Attr) class="example_p"(Attr) onclick="func_Example()"(Event) style="border:1px solid silver;"(CSS,Style)>

 例えば、上記のような <p> タグエレメントの場合。<p> タグは HTML タグエレメントで、id 属性、class 属性、onclick 属性、style 属性がエレメントの属性です。
 id 属性はエレメントを特徴づけます。class 属性 はエレメントを特徴づけ、スタイル設定を反映するために用います。onclick 属性はイベントハンドラーです。style 属性 はスタイル設定を直接反映するために用います。

 属性は任意に作成することもできます。

 HTML 属性には全てのHTMLエレメントが持つグローバル属性もあります。

 HTML 属性は、DOM における HTMLElement の派生である HTMLParagraphElementHTMLFormElement といったインターフェスのもつプロパティが該当します。
 HTMLElement プロパティは HTML のグローバル属性に該当します。

- ad -

HTML属性の一覧

 ここでは主な HTML 属性のみを取り上げています。

 A B C D E  F G H I J  K L M N O  P Q R S T  U V W X Y  Z

属性名HTMLエレメント摘要
A
accept<input>サーバーに送るデータ形式の制限に利用
accept-charset<form>サーバーに送る文字エンコーディングの制限に利用
action<form>データの送信先URL
alt<area>,<img>,<input>非対応時の代替テキスト
async<script>scriptファイルの読み込みのタイミングを調整
autocomplete<form>,<input>,<select>,<textarea>期待する入力値?自動補完?を設定
autofocus<button>,<input>,<select>,<textarea><form部品の中で最初にフォーカスする部品の設定
autoplay<audio>,<video>自動再生(お薦めではない設定)
B
buffered<audio>,<video>バッファリングされた量の判断
C
charset<meta>文字エンコーディングを宣言でファイル形式と一致している必要がある
checked<input>複数選択肢のデフォルト値に設定
cite<blockquote>,<del>,<ins>,<q>引用元の情報、URL、メッセージなど(表示されない)
classグローバル属性
cols<textarea>文字数の指定(多くはCSSを使う)
colspan<td>,<th>セルを横方向に結合
content<meta>http-equiv属性やname属性の関連値
controls<audio>, <video>再生・一時停止、音量、シークを制御するコントローラーを表示
coords<area>shape属性とホットスポット領域の座標を指定
crossorigin<audio>, <img>, <link>, <script>, <video>CORS(Cross-Origin Resource Sharing)についての属性
D
data<object>値はリソースURLで、data属性かtype属性どちらかが必要
data-*グローバル属性カスタム、任意に属性名とその値を定義できる
datetime<del>,<ins>,<time>日時を記録
decoding<img>画像のデコードのタイミングを設定
default<track><track>は<audio>,<video>の子要素で、この属性をもつ<track>がdefault
defer<script>scriptファイルの読み込みのタイミングを調整
dirグローバル属性テキストの書字方向
dirname<input>,<textarea>送信データの文字方向?
disabled<button>,<fieldset>,<input>,<optgroup>,<option>,<select>,<textarea>表示されるが入力や選択肢を不可に
download<a>,<area>リンクをダウンロードファイルに設定
draggableグローバル属性ドラッグ・ドロップ可に
E
enctype<form>エンコード形式(送信するデータのmimeタイプ)
F
for<label>,<output><label>や<output>におけるid
form<button>,<fieldset>,<input>,<label>,<meter>,<object>,<output>,<progress>,<select>,<textarea>属するformを明示
formaction<input>,<button>,(only submit or image type)任意のサーバーまたはファイルにデータを送信
formenctype<button>,<input>エンコード形式を任意に設定
formmethod<button>,<input>HTTP methodの任意に設定
formnovalidate<button>,<input>formデータを検証しない設定
formtarget<button>,<input>データを受信後の動作設定
H
headers<td>,<th><th>のidに呼応
hiddenグローバル属性非表示に設定
high<meter><meter>の設定値(高)
href<a,<area>,<base,<link>移動先のURL
hreflang<a,<area>,<link>移動先の言語設定でhref属性と合わせて使用
http-equiv<meta>プラグマディレクティブの定義
I
idグローバル属性
ismap<img>画像がserver-side image-mapであること
K
kind<track>(<audio>,<video>)トラックの使用用途
L
label<optgroup>,<option>,<track>ラベルや概要を設定
langグローバル属性言語設定
list<input>datalistとidで関連付ける
loop<audio>,<bgsound>,<marquee>,<video>繰り返し再生
low<meter><meter>の設定値(低)
M
max<input>,<meter>,<progress>最大値
maxlength<input>,<textarea>最大文字数
minlength<input>,<textarea>最小文字数
media<a>,<area>,<link>,<source,<style>リンク先のデバイスを指定
method<form>HTTP methodの設定
min<input>,<meter>最小値
multiple<input>,<select>複数選択の許可/不許可
muted<audio>,<video>読込み時には無音(ミュート)設定
N
name<button>,<form>,<fieldset>,<iframe,<input>,<object>,<output>,<select>,<textarea>,<map,<meta>,<param>HTML文書のメタデータの名称を定義
novalidate<form>送信データを検証しない設定
O
open<details>最初から<detail>の詳細を開く設定
optimum<meter>最適な数値の範囲
P
pattern<input>入力データを検証する正規表現を設定
ping<a>,<area>リンクを追跡できモニタリングやトラッキングを設定
poster<video>動画のダウンロード中に画像を表示
preload<audio>,<video>プリリロードの設定
R
readonly<input>,<textarea>コントロールできる入力を表示のみ
referrerpolicy<a>,<area>,<iframe,<img>,<link>,<script>リファラーの送信設定
rel<a>,<area>,<link>現在ページとリンク先ページの関係性を示す
required<inputtext>,<search>,<url>,<tel>,<email>,<password>,<date pickers>,<number>,<checkbox>,<radio>,<file>空白を拒否する設定
reversed<ol>昇順から降順に表示
rows<textarea>行数を定義(多くはCSSを使う)
rowspan<td>,<th>テーブルセルを縦に結合する
S
sandbox<iframe>iframe内のコンテンツに制約を設定
scope<th>ヘッダーセルを明示的に設定
selected<select>,<option>デフォルト値として設定
size<input>,<select>,<text>,<search>,<tel>,<url>,<email>,<password>文字数を定義
span<col,<colgroup>結合させる列の数を設定
src<audio>,<embed>,<iframe>,<img>,<input>,<script>,<source,<track>,<video>読み込み元URL
srcdoc<iframe>iframe内にsrcdocのテキストを表示
srclang<track>srcの言語を明示
srcset<source>(<picture>)<picture>での画像URLを設定
start<ol><ol>の番号付けを設定
step<input>設定された値の倍数のみを許可
styleグローバル属性
T
target<a>,<area>,<base,<form>リンク先を表示する場所を設定
type<button>,<input>,<embed>,<object>,<script>,<source>,<style>表示するタイプを設定
U
usemap<img>,<object>関連する<map>を設定
V
value<button>,<data,<input>,<li,<meter>,<option>,<progress>,<param>デフォルト値を定義

- ad -