論理属性 - 値が必要ない属性

論理属性(Boolean Attribute)とは、値の指定が必要ない属性のことで、selectedcheckedがそうです。値がBoolean値における真か偽かの2種類しかなく、論理属性が導く働きには「デフォルトかそうでないか」の2種類しかありません。ブラウザは、論理属性が指定されていない偽の場合はデフォルトで、指定された真の場合はデフォルトじゃない動作をします。その存在の有無に意味がある属性と言えます。

説明

例えば、セレクトフォームにおけるselectedや、ラジオボタンにおけるcheckedが論理属性です。この属性は値を指定しなくても、「その属性が指定されているだけ」で、要素に影響を与えていますよね。論理属性を指定することによって、デフォルトじゃない働きをします。つまり、セレクトボックス、ラジオボタンでは、該当の選択肢が、通常はならない選択状態になります。

HTML

<!-- [selected]は論理属性 -->
<select name="number">
	<option value="1">1</option>
	<option value="2" selected>2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<!-- [checked]は論理属性 -->
<input type="radio" name="love" value="cat">猫
<input type="radio" name="love" value="dog" checked>犬

空の値を指定する

空の値を指定する場合がありますが、これには特に意味はありません。というのも、空の値というと通常は否定的な意味を持ちそうなところ、そうではありません。下記の例で言えば、空の値を指定したとしても、属性自体が存在しているので、該当の選択肢は選択状態になります。

HTML

<!-- [selected]は論理属性 -->
<select name="number">
	<option value="1" selected="">1</option>
	<option value="2">2</option>
</select>

<!-- [checked]は論理属性 -->
<input type="radio" name="love" value="cat">猫
<input type="radio" name="love" value="dog" checked="">犬

属性名を指定する

値に属性名を指定するケースもあります。が、これも空の値と同じで特に意味はありません。属性名だけを指定した時と同様に真になり、その要素に影響を与えます。

HTML

<!-- [defer]は論理属性 -->
<script src="..." defer="defer"></script>

<!-- [async]は論理属性 -->
<script src="..." async="async"></script>

間違った値の指定

論理属性には、空の値か、または、属性名を指定することができます。関係のない文字列を指定すると文法違反になります。ただし、文法違反になっても、ほとんどのブラウザでは正常に動作します。

HTML

<!-- 正しい指定方法 -->
<script src="..." defer></script>
<script src="..." defer=""></script>
<script src="..." defer="defer"></script>

<!-- 間違った指定方法 -->
<script src="..." defer="true"></script>

下記は、論理属性の値に関係のない文字列を指定した例です。文法違反でも、あなたのブラウザでは正常に動作していますか?

HTML

<select name="number">
	<option value="1">1</option>
	<option value="2" selected="hoge">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

参考情報