HTMLの属性値に一重引用符が推奨されない理由は？

ぽんきち

HTMLのタグ属性値を一重引用符（シングルクォーテーション ‘ ）で囲っていたらエディターに注意された。。。

HTMLの仕様としては二重引用符を推奨しているらしい。理由が気になったので調べてみた。

二重引用符を推奨する理由

※一重引用符は’シングルクォーテーション’のことを、二重引用符は”ダブルクォーテーション”のことを指しています。

調べた時によく出てきた意見。全体のルールとして統一しておいた方が良い。とのこと。
確かにごちゃごちゃしてたら見づらいもんね。でもそれなら一重引用符でも良いよね。

例えば下記のような記述があった場合に

<img src="aaa.png" alt="It's a new world">

alt属性の値を一重引用符で囲ってしまうと、It’sのところで区切られてしまうのでこの部分だけ実体参照を使って'It"s a new world'としなくてはならない。
※"は’のこと。

これは面倒！

あとはJSの話になるけど、下記のような記述があったとして、

console.log("I'm Taro");

外側が一重引用符だったら下記のようにエスケープが必要になる。

console.log('I\'m Taro');

これは見づらい。（あとバックスラッシュ入力するのがなにげに面倒）

ということで文字列の中でアポストロフィーを使いたい場合は、外側は二重引用符に限りますね。

結果、文字列だけ二重引用符であとはシングルっているのも統一性が損なわれるのでNG。二重引用符に1票。

余談ですが、実体参照の入力のしやすさで違いが出るかも？と思いましたが、一重引用符の場合の実体参照は　' だったのであまり差はありませんでした。

二重引用符は一重引用符に比べて、視覚的に目立ち強調されやすいため読みやすいとされている。らしい。

・二重引用符

<h1 class="midashidayo" id="midashi_id">これは見出しです</h1>
<div class="divdayo">
  <p class="divnonakanopdayo">これはdivの中のpです</p>
</div>

・一重引用符

<h1 class='midashidayo' id='midashi_id'>これは見出しです</h1>
<div class='divdayo'>
  <p class='divnonakanopdayo'>これはdivの中のpです</p>
</div>

どうでしょう。自分は確かにシングルの方は若干おしとやかな感じがするな〜。と思いました。

エディターによっては色分けしてくれるので関係なさそうですが、シンプルなエディターを利用されている方はピンとくるのかもしれません。

ブラウザによっては一重引用符で囲まれた属性値の終わりを正しく認識できないらしい。

例えば下記の記述の場合、

<div class='container' id='myDiv' data-content='Hello World!'>Content Here</div>

‘container’という部分までをclass属性とし、’myDiv’ data-content=’Hello World!’の部分をひとくくりにid属性として認識してしまうことがあったそうです。

”あった。”というのは、IE6や7、一部のモバイルブラウザにて過去報告されていた事象のようで、現在の主要なブラウザでは正常に解釈してくれるぽい。

現在は実際に問題が発生することはまず無いようですが、互換性を考慮して属性値は二重引用符で囲むことを推奨しているとな。

見返してみると二重引用符の方が楽だし安全！てことで、HTMLの仕様として推奨されている理由がなんとなく分かりました。phpでは一重引用符を使うことが多いのでついつい使いそうになってしまいますが、HTMLやJSでは二重引用符推しでいきたいと思います。

エディターが波線ばかりになるのもうるさいですしね。笑

もし他にもこんな理由が考えられるよ！っている意見があれば教えてほしいです。
それでは。