HTML 属性
このページで解説する HTML 属性とは、HTML タグエレメントが持つ属性(attribute)のことです。
タグエレメントの機能を拡張したり、特徴づけたり、イベントハンドラーによって JavaScript との橋渡しをする役割をします。
<p id="id_example" class="example_p" onclick="func_Example()" style="border:1px solid silver;">
例えば、上記のような <p> タグエレメントの場合。<p> タグは HTML タグエレメントで、id 属性、class 属性、onclick 属性、style 属性が HTML 属性です。
id 属性はエレメントを特徴づけます。class 属性 はエレメントを特徴づけ、スタイル設定を反映するために用います。onclick 属性はイベントハンドラーです。style 属性 はスタイル設定を直接指定するために用います。
属性名は任意に作成することもできます。
HTML 属性には全てのHTMLエレメントが持つグローバル属性もあります。
HTML 属性は、DOM における HTMLElement の派生である HTMLParagraphElement や HTMLFormElement といったインターフェスのもつプロパティが該当します。
HTMLElement プロパティは HTML のグローバル属性に該当します。
HTML属性の作成方法
HTML 属性は、タグ名のあとに半角スペースに続いて属性名="属性値"
のように作成します。
例えば、以下のような <p> タグの後に class 属性を作成するには以下のようにします。
属性名は任意に作成することもできます。
<p class="example">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> | デフォルト値を定義 |