HTML5のautofocus属性の正しい書き方──autofocus="autofocus"とautofocus、どちらが正解？

HTML5でフォーム要素に自動的にフォーカスを当てるautofocus属性。「autofocus="autofocus"」と値を付けて書くべきか、それとも単に「autofocus」だけを書くべきか迷ったことはありませんか？この記事では、W3Cの公式仕様に基づいて正しい記述方法をわかりやすく解説します。

W3C仕様におけるautofocus属性の定義

w3.orgの仕様では、autofocus属性について次のように定められています。

autofocus属性はブール型（boolean）属性です。要素にブール型属性が存在する場合はtrue値を表し、属性が存在しない場合はfalse値を表します。

属性が存在する場合、その値は空文字列であるか、属性の正規名とASCII大文字・小文字を区別せずに一致する値でなければならず、先頭や末尾に空白文字を含めてはいけません。

正しい記述方法

HTMLでは、ブール型属性は値を付けても付けなくても記述できます。つまり、以下の3つの書き方はすべて有効です。

<input type="text" autofocus>

<input type="text" autofocus="autofocus">

<input type="text" autofocus="">

これらはすべて同じ意味を持ち、ページ読み込み時に自動的にその要素へフォーカスが移動します。W3Cの観点では、「autofocus」「autofocus="autofocus"」「autofocus=""」のどれで書いても問題ありません。

XHTMLで記述する場合の注意点

ただし、文書をXHTML（XML構文）として扱う場合は注意が必要です。XMLでは属性値の省略が認められていないため、「autofocus="autofocus"」のように明示的に値を指定しなければなりません。一方、HTML5として記述するのであれば、シンプルに「autofocus」だけで十分です。

まとめ

HTML5では、autofocusはブール型属性として扱われるため、値を省略して単に「autofocus」と書くのが最も簡潔で推奨される方法です。コードの可読性を高めるためにも、余計な値を付けずにすっきりと記述しましょう。