HTML情報

引用符：HTMLは［”］（ダブルクォーテーション）

所長

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

整理すると

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

引用符とは？

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では［”］（ダブルクォーテーション）を推奨する理由は、ご理解いただけましたでしょうか。もちろん、これ以外の考え方もできますので、「明確な理由付けができる」という方は自分のルールを、なかなか考えるのが難しいという方は筆者と同じルールをまずは試してみていただけたらと思います。

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

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

せばっ！

関連記事引用符：JavaScriptは［`］