HTMLの属性(attributes)は、HTML要素に追加情報を提供し、その振る舞いや表示を制御するために使用されます。属性は常に要素の開始タグ内に記述され、その要素の特性を指定します。属性は一般的に名前と値のペアで構成され、name="value"
の形式を取ります。
属性の一般的な使用法
<element attribute="value">content</element>
例えば、<a>
要素(アンカータグ)には href
属性があり、リンクの目的地を指定します。
<a href="https://www.example.com">Visit Example.com</a>
属性の種類
HTML属性は大きく以下のような種類に分けられます:
- グローバル属性: どのHTML要素にも適用できる属性で、例えば
class
、id
、style
、title
、lang
などがあります。 - 特定の要素専用の属性: 特定のHTML要素にのみ適用される属性で、例えば
<img>
要素のsrc
、alt
、width
、height
などがあります。
いくつかの一般的なHTML属性
- id: 要素に一意の識別子を割り当てます。
- class: 要素を一つ以上のクラス名に関連付けます。
- style: インラインスタイルを直接要素に適用します。
- title: 要素にマウスカーソルを合わせたときに表示される追加情報を提供します。
- alt:
<img>
要素に対する代替テキストを提供します。 - href:
<a>
要素でリンク先のURLを指定します。 - src:
<img>
や<script>
要素でファイルの場所を指定します。 - placeholder:
<input>
要素でフィールド内に表示される薄いフォントのヒントを提供します。
属性の重要性
属性は、ウェブページの構造とスタイルを定義する上で中心的な役割を果たします。CSSとJavaScriptを使用する際には、class
や id
などの属性が特に重要になります。これらの属性を通じて、特定のHTML要素をターゲットにしてスタイルを適用したり、イベントハンドラを割り当てたりすることができます。
正しく使用された属性は、ウェブページのアクセシビリティを向上させ、SEOの観点からもページのコンテンツをより適切に検索エンジンに伝えることができます。また、ユーザーエクスペリエンスを向上させるために、画像の代替テキストやフォームのプレースホルダーなどが利用されます。