はじめに
HTML5プロフェッショナル認定試験の勉強中に、あるコードを見て理解に躓きました。
それは、以下のコードです。
See the Pen <input type="checkbox" checked=""> by rukacode (@xlmmqffm-the-encoder) on CodePen.
checked=""と空の属性値が指定されているのに、なぜチェックが付くのかが分かりませんでした。
この疑問を調べていくうちに、論理属性と列挙属性の違いを正確に理解できていなかったことが原因だと気づきました。
本記事では、この2つの属性の違いをまとめていきます。同じ疑問を持つ方々の助けになれば幸いです。
論理属性とは
checkedは論理属性（Boolean Attribute）です。論理属性を調べたところ下記のような記載を見つけました。
「値を指定せずに、その属性が存在するかしないかだけで意味を持つ属性」 のことです。
つまり、属性を記載した時点でその属性は有効になります。
具体例
<details open>
open属性があることで、<details>要素内のコンテンツがデフォルトで表示されます。
<input disabled>
disabled属性があることで、入力欄が非活性（操作不能）になります。
列挙属性とは
なぜ混乱してしまったのかというと、似た書き方をする列挙属性と混同してしまったからだと考えられます。論理属性との対比として、列挙属性について見ていきましょう。
列挙属性に関する説明は以下の通りです。
「事前に定義されたいくつかの属性値を持つことが可能な属性」 のことです。
列挙属性は、あらかじめ用意された属性値の中から、期待する動作のものを設定するということがわかります。
具体例
<input type="text">
type属性は、text、checkbox、radioなど、いくつかの決まったキーワードから選んで入力欄の種類を指定します。type属性にtext以外の値を指定すると、入力欄の挙動が変わります。
紛らわしい属性
論理属性と列挙属性には、特に混同しやすい属性があります。
disabled属性
<input type="text" disabled>
<input type="text" disabled="disabled">
<input type="checkbox" disabled="">
disabledは論理属性なので、属性が記載された時点で有効になります。disabled="disabled"のような記述は、HTMLの仕様上、値の有無ではなく属性そのものの有無が意味を持つため、上記すべての記述が同じ効果を持ちます。これは冒頭のchecked属性と同様です。
preload 属性
<audio src="sample.mp3" preload="none"></audio>
<audio src="sample.mp3" preload="auto"></audio>
<audio src="sample.mp3" preload="metadata"></audio>
audioやvideo要素のpreload属性は、none、metadata、autoという3つの決まった値を取る列挙属性です。preload="true"のような、定義されていない記述は無効であり、正しい値を指定する必要があります。
まとめ
checked=""が有効なのは、checkedが論理属性であり、値の有無にかかわらず「属性が存在する」ことで意味を持つからだとわかりました！
引用元