HTMLの属性はHTML要素の追加情報を提供し、その振る舞いや表示を制御するために使われます。ここではよく使われるいくつかのHTML属性を一覧で紹介します。
HTMLの属性とは？
HTMLの属性は、HTML要素の振る舞いや表示を制御するために使用される追加情報です。属性は、要素の開始タグ内に配置され、要素の性質をカスタマイズするために使われます。一般的に属性は名前と値のペアで構成され、「名前=値」の形式で記述されます。属性の値は通常、引用符で囲まれます。
HTML属性は、多くの用途に使われます。たとえば、外部リソースを読み込む、フォーム要素のデフォルト値を設定する、スタイルやクラスを適用するなどがあります。属性によって、Webページの見た目や機能が大きく変わるため、HTMLを書く際には非常に重要な要素です。
HTML要素とその属性の例
以下は、一般的なHTML要素とその属性の例です。
<a href="url">: リンク先のURLを指定します。<img src="image.png" alt="画像説明">: 画像のソースと代替テキストを指定します。<input type="text" value="テキスト">: テキスト入力フィールドを作成し、初期値を設定します。
これらの属性を使うことで、HTMLドキュメントの要素ごとに詳細な設定が可能になります。
基本的な属性一覧
- class – 要素にスタイルクラスを指定します。
- id – 要素に一意の識別子を指定します。
- style – 直接スタイルを適用します。
- title – 要素に関する追加情報を提供するツールチップを指定します。
- href – リンク先のURLを指定します（a要素で使用）。
- src – 画像やスクリプトファイルの場所を指定します（imgやscript要素で使用）。
- alt – 画像が表示されない場合に代わりに表示されるテキストを指定します（img要素で使用）。
- disabled – 入力要素を無効にします（input、button、select、textarea要素で使用）。
- selected – オプション要素が初期選択状態になることを指定します（option要素で使用）。
- checked – チェックボックスやラジオボタンが初期チェック状態になることを指定します（input要素で使用）。
- placeholder – 入力フィールドに表示されるヒントテキストを指定します（input、textarea要素で使用）。
- type – 入力要素の型を指定します（input要素で使用）。
- value – 入力要素の初期値を設定します（input、option、button要素で使用）。
class
スタイルシートで使用するクラスを指定します。同じクラス名を持つ複数の要素にスタイルを一括して適用できます。
例:
<div class="header">ここはヘッダーです</div>id
要素に一意の識別子を付与します。スタイルシートやJavaScriptで特定の要素を操作する際に使用します。
例:
<div id="main-content">メインコンテンツはここです</div>style
要素に直接CSSスタイルを適用します。通常はスタイルシートを使う方が管理がしやすいですが、一時的なスタイリングに便利です。
例:
<div style="color: red;">このテキストは赤色です</div>title
要素にマウスカーソルを合わせたときに表示されるツールチップを設定します。
例:
<abbr title="Hyper Text Markup Language">HTML</abbr>href
ハイパーリンクの目的地を指定します。a要素で使用されます。
例:
<a href="https://www.example.com">訪れてください</a>src
画像やスクリプトなどの外部リソースの場所を指定します。
例:
<img src="image.jpg" alt="サンプル画像">alt
画像が表示できない場合に代替テキストとして表示されます。アクセシビリティの向上に役立ちます。
例:
<img src="logo.png" alt="会社のロゴ">disabled
フォーム要素を無効にします。ユーザーが操作できなくなります。
例:
<input type="text" disabled value="入力不可">selected
オプション要素が初期選択状態であることを指定します。
例:
<option selected>選択されたオプション</option>checked
チェックボックスやラジオボタンが初期チェック状態であることを指定します。
例:
<input type="checkbox" checked>同意するplaceholder
入力フィールドに表示されるヒントテキストを設定します。
例:
<input type="text" placeholder="名前を入力してください">type
入力要素の型を指定します。例えばtext、password、submitなどがあります。
例:
<input type="password" placeholder="パスワードを入力">value
フォーム要素の初期値を設定します。
例:
<input type="text" value="初期値">まとめ
これらは基本的な属性ですが、HTML5ではさらに多くの属性が導入されており、要素によってさまざまな属性が使用できます。これらの属性を適切に使用することで、HTML要素の機能を拡張し、ページの見た目や振る舞いを柔軟に制御できます。
