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