HTMLの特殊文字について

# HTMLの特殊文字について

## 文字実体参照

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

## まだまだある特殊文字

HTMLで使用可能な特殊文字は、HTMLの標準化を行っている [W3Cのサイト](http://dev.w3.org/html5/html-author/charref "HTML特殊文字の一覧ページ") に掲載されています。
この中から、私なりにおすすめな特殊文字を紹介します。
なお、ブラウザやOSなどの環境によっては表示できない文字があります。

<details><summary>おすすめ特殊文字</summary><div>

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

</div></details>

HTML文字実体参照は他にも**山ほど**あります。
もちろん全部覚える必要はありません。思い出したいときに [W3Cのサイト](http://dev.w3.org/html5/html-author/charref "HTML特殊文字の一覧ページ") を見返せばよいのです。

## サンプル

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

### サンプル1&nbsp;&nbsp;&nbsp;「コードの挿入」

```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>
と書きます。
```

### 実行結果

![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2377776/5332e40e-0c2f-4ab1-7711-bb5978b1c41d.png)

### サンプル2&nbsp;&nbsp;&nbsp;&nbsp;「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>
```

### 実行結果

![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2377776/a872c309-f7d0-6707-9901-b26525b04236.png)

## まとめ

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

## 執筆者（ふーちん）

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