HTML 属性
属性は、HTML要素によって提供される追加情報です。
属性は通常、HTMLタグの開始タグ内に記述され、要素の動作、スタイル、コンテンツ、その他の特性を定義します。
属性は常にname="value"の形式でタグ内に記述され、nameは属性の名前で、valueは属性の値です。
HTML 属性
- HTML要素は属性を設定できます
- 属性は要素に追加情報を加えることができます
- 属性は通常開始タグに記述されます
- 属性は常に名前と値のペアの形式で記述され、例：name="value"。
属性の例
HTMLリンクは<a>タグで定義されます。リンクのアドレスはhref属性で指定します：
HTML属性：属性値は引用符で囲む
属性値は常に引用符で囲む必要があります。
二重引用符が最も一般的ですが、単一引用符を使用しても問題ありません。
二重引用符を使用：
<a href="../index.html">Link</a>
単一引用符を使用：
<a href='/index.html'>Link</a>属性値に引用符が含まれる場合：Link
ヒント：特定の状況、たとえば属性値自体に二重引用符が含まれる場合は、単一引用符を使用する必要があります。例：
name='John "ShotGun" Nelson'または：
<a href="../index.html'search'">Link</a>
HTMLのヒント：小文字の属性を使用する
属性名と属性値は大文字と小文字を区別しません。
ただし、W3Cは、HTML 4勧告において小文字の属性/属性値を推奨しています。
一方、新しいバージョンの(X)HTMLでは、小文字の属性を使用する必要があります。
HTML属性リファレンス
完全なHTML属性リストを参照してください：HTMLタグリファレンス。
以下に、ほとんどのHTML要素に適用される属性を示します：
| 属性名 | 適用要素 | 説明 |
|---|---|---|
id | すべての要素 | 要素に一意の識別子を指定します。 |
class | すべての要素 | 要素に1つ以上のクラス名を指定し、CSSまたはJavaScriptでの選択に使用します。 |
style | すべての要素 | 要素に直接CSSスタイルを適用します。 |
title | すべての要素 | 要素に追加のヒント情報を提供します。通常、マウスを要素の上に置いたときに表示されます。 |
data-* | すべての要素 | カスタムデータの保存に使用します。通常はJavaScriptを介してアクセスします。 |
href | <a>, <link> | リンクのターゲットURLを指定します。 |
src | <img>, <script>, <iframe> | 外部リソース（画像、スクリプト、フレームなど）のURLを指定します。 |
alt | <img> | 画像に代替テキストを提供します。画像が表示できない場合に表示されます。 |
type | <input>, <button> | 入力コントロールの種類を指定します（例：text, password, checkboxなど）。 |
value | <input>, <button>, <option> | 要素の初期値を指定します。 |
disabled | フォーム要素 | 要素を無効にして、操作できないようにします。 |
checked | <input type="checkbox">, <input type="radio"> | チェックボックスまたはラジオボタンが選択されているかどうかを指定します。 |
placeholder | <input>, <textarea> | 入力ボックスにヒントテキストを表示します。 |
target | <a>, <form> | リンクまたはフォーム送信のターゲットウィンドウまたはフレームを指定します（例：_blankは新しいタブを開くことを示します）。 |
readonly | フォーム要素 | 入力ボックスを読み取り専用にします。 |
required | フォーム要素 | 入力フィールドを必須項目として指定します。 |
autoplay | <audio>, <video> | メディアを自動再生します。 |
onclick | すべての要素 | ユーザーが要素をクリックしたときにJavaScriptイベントをトリガーします。 |
onmouseover | すべての要素 | ユーザーが要素にマウスをホバーしたときにJavaScriptイベントをトリガーします。 |
onchange | フォーム要素 | 要素の値が変更されたときにJavaScriptイベントをトリガーします。 |
グローバル属性
グローバル属性は、すべてのHTML要素で使用できる属性です。
id：要素に一意の識別子を指定します。
<div id="header">This is the header</div>
class：要素に1つ以上のクラス名を指定し、CSSまたはJavaScriptでの選択に使用します。
<p class="text highlight">This is a highlighted text.</p>
style：要素に直接CSSスタイルを適用します。
<p style="color: blue; font-size: 14px;">This is a styled paragraph.</p>
title：要素に追加のヒント情報を提供します。通常、マウスを要素の上に置いたときに表示されます。
<abbr title="HyperText Markup Language">HTML</abbr>
data-*：カスタムデータの保存に使用します。通常はJavaScriptを介してアクセスします。
<div data-user-id="12345">User Info</div>
特定要素の属性
一部の属性は、特定のHTML要素にのみ適用されます。
href（<a>と<link>要素に使用）：リンクのターゲットURLを指定します。
<a href="https://www.example.com">Visit Example</a>
src（<img>, <script>, <iframe>などの要素に使用）：外部リソースのURLを指定します。
<img src="image.jpg.html" alt="An example image">
alt（<img>要素に使用）：画像に代替テキストを提供し、画像が表示できないときに表示されます。
<img src="image.jpg.html" alt="An example image">
type（<input>と<button>要素に使用）：入力コントロールの種類を指定します。
<input type="text" placeholder="Enter your name">
value（<input>, <button>, <option>などの要素に使用）：要素の初期値を指定します。
<input type="text" value="Default Value">
disabled（フォーム要素に使用）：要素を無効にして、操作できないようにします。
<input type="text" disabled>
checked（<input type="checkbox">と<input type="radio">）：チェックボックスまたはラジオボタンが選択されているかどうかを指定します。
<input type="checkbox" checked>
placeholder（<input>と<textarea>要素に使用）：入力ボックスにヒントテキストを表示します。
<input type="text" placeholder="Enter your email">
target（<a>と<form>要素に使用）：リンクまたはフォーム送信のターゲットウィンドウまたはフレームを指定します。
<a href="https://www.example.com" target="_blank">Open in new tab</a>
ブール属性
ブール属性とは、値を必要としない属性であり、存在すればtrueを表し、存在しなければfalseを表します。
disabled：要素を無効にします。
<input type="text" disabled>
readonly：入力ボックスを読み取り専用にします。
<input type="text" readonly>
required：入力フィールドを必須項目として指定します。
<input type="text" required>
autoplay（<audio>と<video>要素に使用）：メディアを自動再生します。
<video src="video.mp4.html" autoplay></video>
カスタム属性
HTML5ではdata-*属性が導入され、開発者は追加データを保存するためのカスタム属性を定義できるようになりました。
data-*：カスタムデータの保存に使用します。通常はJavaScriptを介してアクセスします。
<div data-user-id="12345" data-role="admin">User Info</div>
イベント処理属性
HTML要素は、イベント処理属性を使用して、クリックやマウスホバーなどの特定のイベントに応答できます。
onclick：ユーザーが要素をクリックしたときにトリガーされます。
<button onclick="alert('Button clicked!')">Click Me</button>
onmouseover：ユーザーが要素にマウスをホバーしたときにトリガーされます。
<div onmouseover="this.style.backgroundColor='yellow'">Hover over me</div>
onchange：要素の値が変更されたときにトリガーされます。
<input type="text" onchange="alert('Value changed!')">
その他の標準属性の説明：HTML標準属性リファレンス.
その他の拡張