HTMLの特殊文字について

文字実体参照

<br> をHTMLタグとしてではなく、文章中に文字列として、表示させるにはどうすればよいのでしょうか。
HTMLでは、 < (小なり)と > (大なり)は、HTMLタグを示す記号として使われるので、普通に <br> と記入すると、ただの改行となってしまいます。
< を出すには < と、 > を出すには、 > と記入します。
つまり、 <br> を表示させるには、 <br> とHTMLに書けばよいのです。
その他、空白を出すには、   、 " を出すには " 、 ' を出すには ' と記入すれば文字として表示できます。
これらのような文字の記入の仕方を「文字実体参照」と言います。

まだまだある特殊文字

HTMLで使用可能な特殊文字は、HTMLの標準化を行っている W3Cのサイトに掲載されています。
この中から、私なりにおすすめな特殊文字を紹介します。
なお、ブラウザやOSなどの環境によっては表示できない文字があります。

おすすめ特殊文字

文字実体参照	表示	説明
`&`	&	アンパサンド
`…`	…	省略記号
`&blank;`	␣	空白記号
`&phone;`	☎	電話マーク
`©`	©	著作権マーク
`&sung;`	♪	音符
`&hearts;`	♥	ハート
`&rtrif;`	▸	右向き小正三角形(黒)
`&boxbox;`	⧉	２つの正方形が結合した図形
`&block;`	█	ブロック
`½`	½	２分の１
`&frac13;`	⅓	３分の１
`¼`	¼	４分の１
`¾`	¾	４分の３
`&rlarr;`	⇄	右向き矢印＋左向き矢印
`&Aopf;`	𝔸	A
`&aopf;`	𝕒	a

HTML文字実体参照は他にも山ほどあります。
もちろん全部覚える必要はありません。思い出したいときに W3Cのサイトを見返せばよいのです。

サンプル

これらのサンプルはHTMLのbody要素内に置いてください。

サンプル1 「コードの挿入」

index.html

&lt;!DOCTYPE html&gt;<br>
&lt;html lang=&quot;ja&quot;&gt;<br>
&lt;head&gt;<br>
&nbsp;&nbsp;&lt;meta charset=&quot;UTF-8&quot;&gt;<br>
&nbsp;&nbsp;&lt;title&gt;Document&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&nbsp;&nbsp;&lt;h1&gt;Hello! Qiita World!&lt;/h1&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>
と表示させるためには、<br>
&amp;lt;!DOCTYPE html&amp;gt;&lt;br&gt;<br>
&amp;lt;html lang=&amp;quot;ja&amp;quot;&amp;gt;&lt;br&gt;<br>
&amp;lt;head&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt;&lt;br&gt;<br>
&amp;lt;/head&amp;gt;&lt;br&gt;<br>
&amp;lt;body&amp;gt;&lt;br&gt;<br>
&amp;nbsp;&amp;nbsp;&amp;lt;h1&amp;gt;Hello! Qiita World!&amp;lt;/h1&amp;gt;&lt;br&gt;<br>
&amp;lt;/body&amp;gt;&lt;br&gt;<br>
&amp;lt;/html&amp;gt;&lt;br&gt;<br>
と書きます。

実行結果

サンプル2 「blockによってグラフを作る」

index.html

  <table>
    <tr>
      <th>アンケート回答</th>
      <th>人数</th>
      <th>グラフ</th>
    </tr>
    <tr>
      <td>はい</td>
      <td>29人</td>
      <td>&block;&block;&block;&block;&block;&block;&block;</td>
    </tr>
    <tr>
      <td>いいえ</td>
      <td>17人</td>
      <td>&block;&block;&block;&block;</td>
    </tr>
    <tr>
      <td>どちらでもない</td>
      <td>9人</td>
      <td>&block;&block;</td>
    </tr>
    <tr>
      <td>分からない</td>
      <td>7人</td>
      <td>&block;&block;</td>
    </tr>
    <tr>
      <td>無回答</td>
      <td>10人</td>
      <td>&block;&block;&block;</td>
    </tr>
  </table>

  <style>
    table, th, td {
      padding: 10px;
      border: 2px solid #000;
    }
  </style>

実行結果

まとめ

HTMLには文字実体参照というものがたくさんあり、普通には表示できないものも表示できます。
皆さんも文字実体参照を活用してみてください！

執筆者（ふーちん）

N予備校プログラミングコース受講中です。
まだ初心者で、この記事もアカウントを作ってから2つ目に書きました。