HTML属性での「""」 「''」違い

質問

皆様、はじめまして。

現在、ある書籍を参考にWebデザインを勉強しております。

その書籍の中で、
class='tagline'
class="column side"
等のように、シングルクォーテーションと
ダブルクォーテーションと2通りの書き方が出て来ました。

何故、シングルとダブルと分けて書いているのかがわからなくて。。。

レスポンシブデザインに関しての書籍で、
HTMLやCSSなどの詳しい説明は書いてありません。

JavaScriptとかで関係してくるのですかね？

また、分けて書くことのメリットなど教えて頂けると助かります。

回答No.3

t_ohta · ベストアンサー

属性値の囲みはどちらでも構いませんが、ご自身で使い方を統一した方がいいでしょう。

たとえば
<button onclick="location.href = 'abc.html';">ボタン</button>
といった形で、両方を使わなければいけないシーンが出てきます。
ごちゃ混ぜに使っているとコーディングミスの原因になりますので、自分自身でルールを決めておくとミスを減らせます。

回答No.2

ORUKA1951

どちらでも構いません。
HTMLもSGML( http://ja.wikipedia.org/wiki/SGML )の派出品でマークアップ言語です。
　　　↑読んでおきましょう。

HTMLの仕様では
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　デフォルトでは、SGML規定はすべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて 囲うよう求めている。
　二重引用符で属性値が囲われる場合は単引用符がこの属性値の一部を成し得るし、逆の囲い方も可能である。
　・・・【中略】・・・
　属性の値を引用符で囲わなくてよいケースもある。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(HTMLのみ、XML/XHTMKは囲わなければならない)

　属性値が、アルファベット(a-z and A-Z)、数字(0-9)、ハイフン(ASCII十進45)、ピリオド(ASCII十進46)、アンダースコア(ASCII十進95)、及びコロン(ASCII十進58)のみを含む場合である。
　本仕様は、引用符が省略可能な場合であっても省略しないことを推奨する。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［On SGML and HTML (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.2 )］より

　分からないときは、仕様書を読む。最低限、これだで随分と変わりますよ。

　なお、
class='tagline'
class="column side"
　のようなclass名は、本来は良くないことも書かれています。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』など
　文書構造を補完するものにしましょう。
注) 仕様書を理解できない人が多かったので、これらはHTML5では新しい要素になりました。
『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』

class='tagline'　絶対おかしい!

class="column side"
　だったら、<div class="aside">とかでしょうね。
＞レスポンシブデザインに関しての書籍で、
　？？？？

お礼

ご回答ありがとうございます。

仕様書が一番正しいですよね(^_^;)
ありがとうございました。

回答No.1

dancerock

書籍の間違いじゃないでしょうか？

ダブルクォーテーションが正しいと思います。

シングルクォーテーションでやると認識されないと思います。

お礼

ご回答ありがとうございます。

書籍的には、同じような書き方を数箇所でしているので、
間違いでは無さそうです。

ダブルクォーテーションが無難そうですね。

ありがとうございました。