属性 - 要素に性質や情報を付加するもの

HTMLにおける属性とは、要素に性質や情報を付加するものです。英語では、attributeと言います。

説明

例えば、下記のコードを見て下さい。a要素には、href属性を設定しています。href="hoge"全体を「属性」、hrefを「属性名」、hogeを「属性値」と表現します。href属性によって、このa要素が、どのドキュメント(URLアドレス)のハイパーリンクなのか、という情報を付加しているわけです。

HTML

<a href="hoge">〜のページに移動する</a>

// 属性: href="hoge"
// 属性名: href
// 属性値: hoge

もちろん、1つの要素には、複数の属性を指定することができます。下記は、span要素に、id属性と、class属性を指定した例です。

HTML

<span id="hoge" class="syncer">〜のページに移動する</span>

クオーテーション

属性値は、シングルクオーテーション(')、または、ダブルクオーテーション(")で囲みます。どちらで囲んでも文法上、問題ありません。慣例としては、ダブルクオーテーションで囲むことが多いです。企業のスタイルガイド(その企業が独自に決めた、コードを書く際のルール)にも、「ダブルクオーテーションを使うこと」と定められているケースが見受けられます。

HTML

<!-- ダブルクオーテーション -->
<div class="hoge">
	<p>ああ、いい天気だ。</p>
</div>

<!-- シングルクオーテーション -->
<div class='hoge'>
	<p>ああ、いい天気だ。</p>
</div>

大文字と小文字

属性名は、大文字と小文字、どちらで記述してもかまいませんが、普通は小文字を用いると思います。属性名を大文字で書いていると、他の人がそのコードを見た時に「読みづらい」と思われてしまうかもしれません。

HTML

<span ID="hoge" CLASS="syncer">〜のページに移動する</span>

特殊文字

例えば、属性値の中に"という文字があると、どこからどこまでが属性値なのかブラウザが判断できません。>という文字があると、どこからどこまでがタグなのかブラウザが判断できません。属性値の中に、こういった特殊文字が含まれる場合は、HTMLエスケープをして下さい。例えば、img要素のalt属性に、「<袋田の滝>の光景」という値を指定するには、次の通りです。

HTML

<!-- 悪い例 -->
<img src="..." alt="<袋田の滝>の光景">

<!-- 良い例 -->
<img src="..." alt="&lt;袋田の滝&gt;の光景">

<!-- [&lt;]は[<]をHTMLエスケープしたもの -->
<!-- [&gt;]は[>]をHTMLエスケープしたもの -->

属性の種類

属性にも様々な種類があります。

  • グローバル属性 … 「グローバル属性」とは、全ての要素に共通して指定できる属性のことです。
  • 論理属性 … 「論理属性」とは、selectedやcheckedのように値が必要なく、指定するだけで真になる属性です。
  • 列挙属性 … 「列挙属性」とは、値の種類があらかじめ決まっていて、任意の値を指定できない属性のことです。例えば、フォームのtype属性がそうです。