HTML

属性

初級

読み方：ぞくせい｜英語：Attribute

タグに追加情報を与えるもので、開始タグの中に書くよ。例：href, src, alt, class, id。

やさしい説明

属性（ぞくせい）とは、タグに追加情報を与えるものです。開始タグの中に 属性名="値" の形で書きます。

タグが「ラベル」だとすると、属性は「ラベルに書き込むメモ」です。例えば、リンクタグ <a> だけでは「リンクを作りたい」ことしかわかりません。href="..." という属性を付けて初めて「どこにリンクするか」が決まります。

属性はたくさんの種類があります。リンク先のURL（href）、画像のパス（src）、説明文（alt）、クラス名（class）などが代表的です。

1つのタグに複数の属性をつけることもできます。スペースで区切って並べます。

具体例・使い方

<!-- href属性でリンク先を指定 -->
<a href="https://example.com">サイトへ</a>

<!-- src属性で画像パス、alt属性で説明文 -->
<img src="cat.jpg" alt="かわいい猫の写真">

<!-- class属性でCSSのスタイルを適用 -->
<div class="card">カード内容</div>

<!-- type属性で入力欄の種類を指定 -->
<input type="email" placeholder="メールアドレス">

<!-- 複数の属性をスペースで区切って並べる -->
<a href="/about" class="nav-link" target="_blank">詳細ページ</a>

よく使う属性一覧

  • href — リンク先URL（<a> タグ）
  • src — 画像・スクリプトのパス（<img>・<script> タグ）
  • alt — 画像の代替テキスト（<img> タグ、SEO・アクセシビリティに重要）
  • class — CSSのクラスを指定（複数指定はスペース区切り）
  • id — 要素を一意に識別（ページ内に1つだけ）
  • type — 入力欄やボタンの種類を指定（<input>・<button>）
  • placeholder — 入力欄の薄いヒントテキスト
  • target="_blank" — リンクを新しいタブで開く

class は複数指定できます（例：class="btn btn-primary large"）。id は1ページに1つしか使えません。CSSやJavaScriptで要素を選択するときに使い分けます。

真偽値属性（値なしで使う属性）

<!-- 値なしで書くだけで有効になる属性 -->
<input type="checkbox" checked>     <!-- 最初からチェック済み -->
<input type="text" disabled>        <!-- 入力できない状態 -->
<input type="text" required>        <!-- 必須入力 -->
<video src="movie.mp4" autoplay muted loop></video>

checked・disabled・required・autoplay などは「書くだけで有効」な真偽値属性です。値を書く必要はありません（disabled="disabled" と書いても同じ意味）。

いつ使う？

リンクを作るとき（href）、画像を表示するとき（src, alt）、CSSでデザインを当てるとき（class）——HTMLを書くときはほぼ毎回属性を使います。属性なしでは機能しないタグも多く、HTMLの基本中の基本です。

間違いやすいポイント

❌ 属性値のクォートを忘れる

クォートがないとスペースを含む値が正しく認識されず、予期しないバグの原因になります。必ずダブルクォートで囲みましょう。

<!-- ❌ クォートがない -->
<a href=https://example.com>リンク</a>

<!-- ✅ ダブルクォートで囲む -->
<a href="https://example.com">リンク</a>

❌ 属性名のスペルミス（タイポ）

herf（正しくは href）、scr（正しくは src）のようなタイポは、リンクや画像が表示されない原因になります。VS Code などエディタの補完機能を活用しましょう。

よくある疑問

Q: 属性の順番は決まっている？

A: 順番は自由ですが、慣例としてclass、id、src、href、altの順に書くことが多いです。

Q: 属性の値にスペースを入れていい？

A: class属性は複数のクラス名をスペースで区切れます（class="box red"）。それ以外の属性でスペースを入れると意図しない動作になることがあります。

Q: 属性を書く位置はどこ？

A: 開始タグの中、タグ名の後にスペースを空けて書きます。例: <a href="url">リンク</a>。終了タグには属性を書けません。

関連用語

  • タグ — 属性はタグの開始タグ内に書く
  • href — リンク先を指定する代表的な属性
  • src — 画像やスクリプトのパスを指定する属性
  • alt — 画像の代替テキストを指定するアクセシビリティ属性

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A

← 用語集一覧に戻る