【HTML】HTMLの属性とは？要素の性質を制御する機能について

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>

copy

id

要素に一意の識別子を付与します。スタイルシートやJavaScriptで特定の要素を操作する際に使用します。

例:

<div id="main-content">メインコンテンツはここです</div>

copy

style

要素に直接CSSスタイルを適用します。通常はスタイルシートを使う方が管理がしやすいですが、一時的なスタイリングに便利です。

例:

<div style="color: red;">このテキストは赤色です</div>

copy

title

要素にマウスカーソルを合わせたときに表示されるツールチップを設定します。

例:

<abbr title="Hyper Text Markup Language">HTML</abbr>

copy

href

ハイパーリンクの目的地を指定します。a要素で使用されます。

例:

<a href="https://www.example.com">訪れてください</a>

copy

src

画像やスクリプトなどの外部リソースの場所を指定します。

例:

<img src="image.jpg" alt="サンプル画像">

copy

alt

画像が表示できない場合に代替テキストとして表示されます。アクセシビリティの向上に役立ちます。

例:

<img src="logo.png" alt="会社のロゴ">

copy

disabled

フォーム要素を無効にします。ユーザーが操作できなくなります。

例:

<input type="text" disabled value="入力不可">

copy

selected

オプション要素が初期選択状態であることを指定します。

例:

<option selected>選択されたオプション</option>

copy

https://eguweb.jp/html/73049/

【HTML】HTMLの属性とは？要素の性質を制御する機能について

Yuuki Eguchi

テックブログ

1 Likes