HTMLタグには、さまざまな属性を指定できます。また、独自の属性を定義することもできます。この記事では、属性の一覧とその使い方をご紹介します。
HTMLの要素には様々な属性があります。属性の指定方法を次に示します。
HTMLでは、属性名の大文字と小文字を区別しません。また、属性値の選択肢が DTD で定義されている場合は、その属性値も大文字と小文字を区別しません。たとえば次に示す2つのHTML文書の例は、どちらも同じ意味になります。
<P align="right">大文字と小文字を区別しません。</P><P ALIGN="RIGHT">大文字と小文字を区別しません。</P>属性値がスペース（空白文字）を含まない場合は、属性値をダブルクォーテーション（2重引用符）で囲まなくても構いません。たとえば次に示す2つのHTML文書の例は、どちらも同じ意味になります。
<P ALIGN="RIGHT">大文字と小文字を区別しません。</P><P ALIGN=RIGHT>大文字と小文字を区別しません。</P>属性の多くは省略可能ですが、中には省略できないものもあります。
イベント属性は、イベントが発生したときに実行するスクリプトを記述する属性です。イベントとは、マウス操作やキー操作が行われた通知です。
すべての要素（タグ）において、イベント属性は省略可能です。
HTML タグの align 属性は、セル文字列の水平方向の配置を指定する属性です。align 属性は省略可能です。
| 値 | 意味 |
|---|---|
| left | 左寄せ |
| center | 中央寄せ |
| right | 右寄せ |
次にalign属性の使用例を示します。
<p align="left">left</p>
<p align="center">center</p>
<p align="right">right</p>次にalign属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
left
center
right
HTML タグの valign 属性は、セル文字列の垂直方向の配置を指定する属性です。valign 属性は省略可能です。
| 値 | 意味 |
|---|---|
| top | 上端 |
| middle | 中央合わせ |
| bottom | 下端 |
| baseline | ベースライン |
次にvalign属性の使用例を示します。
<table border="1">
<tr>
<td>line1<br>line2<br>line3</td>
<td valign="top">top</td>
<td valign="middle">middle</td>
<td valign="bottom">bottom</td>
<td valign="baseline">baseline</td>
</tr>
</table>次にvalign属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
| line1 line2 line3 |
top | middle | bottom | baseline |
次の要素（タグ）に対してvalign属性を指定することができます。
フォーカス属性は、入力フォーカスの操作方法に関する属性です。
HTML タグの accesskey 属性は、アクセスキーを指定する属性です。accesskey="x" と指定すると、ALTキーとxキーを同時に押した場合にその部品にフォーカスが移動します。accesskey 属性は省略可能です。
次にaccesskey属性の使用例を示します。
<button accesskey="x">Alt + X</button>
<button accesskey="y">Alt + Y</button>次にaccesskey属性の表示サンプルを示します。表示結果はブラウザによって異なることがあります。
HTML タグの tabindex 属性は、タブインデックスの数値を指定する属性です。タブインデックスとは、TAB キーを押すと入力フォーカスが移動する順番のことです。tabindex 属性は省略可能です。
データ属性は、既存の属性に適切なものが無い場合、独自の属性を定義できるようにしたものである。属性の名前は「data-」で始まり、1文字以上のアルファベット、数字、ハイフン、アンダースコアで構成された文字列が続く。ただし、文字列の先頭は小文字のアルファベットに限られる。
<span data-foo="bar" data-baz="qux">quux</span>