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

HTML 属性

 このページで解説する HTML 属性とは、HTML タグエレメントが持つ属性(attribute)のことです。
 タグエレメントの機能を拡張したり、特徴づけたり、イベントハンドラーによって JavaScript との橋渡しをする役割をします。

<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 属性が HTML 属性です。
 id 属性はエレメントを特徴づけます。class 属性 はエレメントを特徴づけ、スタイル設定を反映するために用います。onclick 属性はイベントハンドラーです。style 属性 はスタイル設定を直接指定するために用います。

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

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

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

HTML属性の作成方法

 HTML 属性は、タグ名のあとに半角スペースに続いて属性名="属性値"のように作成します。

 例えば、以下のような <p> タグの後に class 属性を作成するには以下のようにします。

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

<p(タグ名) class="example"(HTML 属性)>HTML 属性はタグ名のあとに半角スペースで区切りながら属性名="属性値"で続いて作成します</p>

 上記例のclass="example"が HTML 属性です。

 複数の HTML 属性を作成するには半角スペースで区切って追加していきます。

<p id="id_example" class="example_p" onclick="func_Example()" style="border:1px solid silver;">

 HTML 属性には、<html> タグエレメントには lang 属性があった方がよかったり、<img><video><audio> エレメントには title 属性を付けた方がよいといった属性もあります。

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>デフォルト値を定義