HTML の属性値の先頭または末尾に含まれる空白文字の扱い2021年12月07日 23時18分

この記事は HTML アドベントカレンダーの 7 日目の分です。


HTML の属性値の先頭または末尾にスペースなどの空白文字を記述したとき、それらの文字がそのまま扱われる場合と無視される場合があります。例として form 要素の属性を見ていきましょう。

<form
    method=" post "
    action=" /edit "
    target=" _blank "
    rel=" noopener ">
  • method 属性の値は特定のキーワードであり、空白文字を含む値は指定できません。" post " は無効な値として無視され、デフォルト値である "get" を指定したのと同じ扱いになります。
  • action 属性の値はスペースで囲まれる可能性のある空でない妥当な URL であり、先頭と末尾の空白文字の並びは無視されます。この場合は "/edit" を指定したのと同じ扱いになります。
  • target 属性の値は特定のキーワードまたは名前であり、空白文字も名前の一部として扱われます。この場合は " _blank " という名前のウィンドウがフォーム送信先になります。常に新しいウィンドウを開くキーワード "_blank" とは異なります。
  • rel 属性の値はスペース区切りのトークンであり、先頭と末尾の空白文字の並びは無視されます。この場合は単に "noopener" を指定したのと同じ扱いになります。

先頭と末尾の空白文字の扱いは属性によってバラバラですね。HTML コードを記述する際は、どの属性ならどう扱われるといったことを覚えるよりも、属性値の先頭または末尾に空白文字を置かないと決めてしまったほうが楽だと思います。