引用符:HTMLは[”](ダブルクォーテーション)

所長

漢字間違がちな文字実”体”参照

整理すると

  • 企業・プロジェクトでルールが決められているときは、それに従うべし
  • HTMLではダブルクォート[”](ダブルクォーテーション)・JavaScriptではバックティック(バッククォート)[`]
  • HTML:[”](ダブルクォーテーション)・[’](シングルクォーテーション)
    JavaScript:[”](ダブルクォーテーション)・[’](シングルクォーテーション)・ES2015(ES6)ではバックティック(バッククォート)[`]も利用可
  • 英語圏では、「you’re(you are)」のようにアポストロフィーを使用する表現は珍しくないことから、HTMLではダブルクォート[”]を使用するほうが良い

引用符とは?

HTMLの各要素で属性値を囲んでいる[”]やJavaScriptで文字列リテラルを囲んでいる[`]のことです。

<span class="highlight active">
console.log(`you can start with "I'm sorry"`)

もう少しだけ詳しい説明は「引用符は一貫性を持って使用する」ページを参照してください。

引用符の使い方

HTMLについて、引用符は[”](ダブルクォーテーション)と[’](シングルクォーテーション)のどちらを使用してもかまいません。推奨はしませんが、

<!-- この例は推奨しないが問題なく動作する -->
<a href="www.dot8.jp" class='linkActive'>

このように、属性値ごとに引用符を変え、混在して使用することも可能です。しかし、

<!-- この例は問題がある -->
<a href='www.dot8.jp">

この例のように、引用符のスタートをシングルクォーテーション[’]・エンドをダブルクォーテーション[”]とするような混在は、許されません。

HTMLでは引用符にはダブルクォーテーション[”]やシングルクォーテーション[’]が使用されますが、引用符として使用しているダブルクォーテーション[”]の中でダブルクォーテーションを利用したくなる可能性が考えられます。
その場合は、[©]を表示するために「&copy;」と記述する方法である、文字実体参照をおこないます。
ダブルクォーテーションを表示させたいのであれば、「&quot;」または「&#034;」と記述します。

<!-- HTML内で["]を表示(どちらも同じ見え方) -->

<span>&quot;</span>
<span>&#034;</span>
<-- input内のvalueで、ダブルクォートを表示させる例 -->
<input type="text" value="&#034;←ダブルクォート表示">

引用符は省略しない

HTML5では、属性値に
「 (スペース)」「<(小なり記号)」「>(大なり記号)」「’(シングルクォート)」「”(ダブルクォート)」「`(バックティック)」「=(イコール)」
が含まれていない場合、引用符を省略できます。例えば以下のような感じ
○)<span class=”highlight”>
○)<span class=”highlight active”>
○)<span class=’highlight active’>
×)<span class=highlight active> →属性値間に半角スペース
×)<input type=text placeholder=「”0″」か「1以上の値を入力」> →属性値の間に「”」
最後の例はplaceholderに説明を入れている時点でダメダメ(実際に値を入れようとすると、制限がわからなくなる)なのですが、ここではダブルクォートがダメという例で納得してください。

このように、引用符は確かに省略できる場合もあります。1バイトでも軽い方がコードはよいのですが、「ココの値を後から書き換える人が、引用符の必要性を判断する」というルールはバグの温床になりますので、属性値は省略しないようにします。

HTMLでは[”](ダブルクォーテーション)

  • 前述のとおり、日本語圏ではシングルクォート[’]をほぼ使用しませんが、英語圏では例えば「I’m(I am)」のように、アポストロフィーを使用する表現は珍しくありません
  • また、HTML標準の属性区切り文字は二重引用符で、単一引用符も使用可とされていました
  • HTML5・HTML Living Standardでは、引用符について「どちらでもよい」とされています

以上の理由を総合的に考えると、文章を記述するHTMLではダブルクォートを使用するのが良いと考えます。ここまでは、ネット上の多くの情報と一緒ですね。

まとめと補足情報

HTMLでは[”](ダブルクォーテーション)を推奨する理由は、ご理解いただけましたでしょうか。もちろん、これ以外の考え方もできますので、「明確な理由付けができる」という方は自分のルールを、なかなか考えるのが難しいという方は筆者と同じルールをまずは試してみていただけたらと思います。

なお、文中では「シングルクォーテーション」と「シングルクォート」という表記を一部併用しておりました。どちらの書き方も間違いではありません。「シングルクォーテーション」「ダブルクォーテーション」とするのか、「シングルクォート」「ダブルクォート」とするのかについては、好みの問題と思ってください。「バックティック」「バッククォート」も同様に、好みの問題と言って良いでしょう。

また、文中で「シングルクォーテーション」と「アポストロフィー」について同じと思えるような記述をしております。厳密には、異なるものというべきか、異なる扱いをするべきものではあるのですが、キーボードで入力するシングルクォーテーションとアポストロフィーは、実質一緒となっておりますので、ここでは一緒のものとして扱いました。引用符についても、始めと終わりの区別のないシングルクォーテーション「’」と区別のある「‘」「’」、区別のないダブルクォーテーション「”」と区別のある「“」「”」、となかなか奥深いのですが、ここでは区別のない「’」「”」としております。この辺の説明は今回触れておりませんので、気になった場合は調べてみていただけると楽しめると思います。

せばっ!

コメントを残す

メールアドレスが公開されることはありません。