HTML・文章にひと工夫

特殊文字(実体参照)

<, &, © のような「そのままでは書けない・打ちにくい」文字。&lt; &amp; という書き方(実体参照)で、きちんと画面に出す方法を覚えよう。

「文章の中に < という記号を書きたいのに、なぜか画面に出ない……」——じつはHTMLでは、<&タグの合図として特別あつかいされています。そのまま書くと、ブラウザが「お、タグの始まりかな?」と勘違いしてしまうのです。そんな記号を、ちゃんと文字として見せる書き方が 実体参照(じったいさんしょう)

なぜそのまま書けないの?

理由はシンプルで、<タグの始まり&実体参照の始まりの記号だから。ブラウザはこの2つを見ると「命令かな?」と身構えます。だから、ただの文字として見せたいときは、あいことばに置きかえて「これは記号だよ」と教えてあげる必要があります。

よく使う実体参照

覚えておきたいのは、この数個だけで十分です。

出したい文字書き方名前の由来
<&lt;less than(より小さい)
>&gt;greater than(より大きい)
&&amp;ampersand(アンド記号)
"&quot;quotation(引用符)
©&copy;copyright(著作権)

たとえば、記事の中で「pタグ」の書き方そのものを見せたいとき。

<p>段落は &lt;p&gt; と書きます。</p>

こう書くと、画面には 段落は <p> と書きます。 と、記号がそのまま出ます。&lt;&gt; に置きかえたおかげで、ブラウザがタグと勘違いせずにすんだわけです。

記号やマークも出せる

文字だけでなく、キーボードにない記号も出せます。フッターでよく見るコピーライトなら、こう。

<p>&copy; 2026 しまちゃん</p>

&copy;© に変わります。ほかにも矢印や特殊なマークがたくさん用意されています。

このレッスンのまとめ

  1. < > & は特別あつかい。文字として出すには実体参照を使う
  2. &lt; &gt; &amp;——& で始めて ; で閉じる
  3. UTF-8なら日本語・絵文字はそのまま。実体参照が要るのは主に3つ

やってみよう:フッターの著作権表示

しまちゃんページの <footer> に、コピーライトを置きましょう。© の記号は &copy; で出します。

<footer>
  <p>&copy; 2026 しまちゃん</p>
</footer>

&copy;© に変わって、画面には「© 2026 しまちゃん」と出ます。キーボードに無い記号も、あいことばでだせるようになりました。