HTML のエスケープ文字

1. HTML での文字エスケープの概要
2. HTML でエスケープする必要のある文字

このチュートリアルでは、HTML 文字のエスケープについて学習します。さらに、チュートリアルでは、HTML でエスケープする必要のある文字を紹介します。

HTML での文字エスケープの概要

HTML、XML、XHTML などのマークアップ言語で文字エスケープを使用して、ASCII 文字を使用して Unicode 文字を表します。

文字エスケープは、マークアップ言語で使用される <、> などの文字を表す必要がある場合に発生します。これらの文字をエスケープしないと、マークアップルールが妨害され、目的の出力が得られません。

HTML ではさまざまな Unicode 文字をエスケープできます。エスケープできる文字には、"、'、<、>、&などがあります。

HTML エンティティのリストはここにあります。これらの文字は、主に 2つの方法で表すことができます。

これらは、数値文字参照と名前付き文字参照です。数値文字参照は、10 進数および 16 進数の数値文字参照として表すことができます。

次の例を見てみましょう。これは、さまざまな文字参照を使用したノーブレークスペースの表現を示しています。

サンプルコード：

<p> Hi Jack&nbsp;! </p> <!-- named character references -->
<p> Hi Jack&#xA0;! </p> <!-- hexadecimal numeric character references -->
<p> Hi Jack&#160;! </p> <!-- decimal numeric character references -->

出力：

上記の例に見られるように、名前付き文字参照、16 進数字参照、およびノー​​ブレークスペースの 10 進数字参照は、それぞれ 、 、および  です。数値文字参照は&# 文字で始まり、; で終わることがわかります。

HTML には、一部の文字をエスケープする必要があるさまざまなコンテキストがあります。コンテキストには、ドキュメントの本文と内部属性、スタイルタグとスクリプトタグなどがあります。

HTML でエスケープする必要のある文字

このセクションでは、HTML でエスケープする必要のある文字について説明します。HTML でエスケープするには、3 文字を見逃してはなりません。それらは：

• (<)
• (>)
• (&)

HTML や XML などのマークアップ言語は、税ラッパーとも呼ばれる記号 < および > よりも大きい記号と小さい記号を構成します。これらの構文ラッパーをドキュメント本文でエスケープする必要があります。そうしないと、マークアップ構文が妨げられます。

構文ラッパーの名前文字参照を以下に示します。

• (<) <
• (>) >

ここでは、文字がエスケープされない条件と、文字をエスケープする方法を説明します。

以下の例では、最初の <a> タグで、<a> タグの間にテキスト the <a> tag を記述しています。

その結果、ハイパーリンクは 2つの <a> タグで囲まれているため、文字 the にのみ適用されます。

しかし、これは私たちの目標ではありません。私たちの目標は、<a> タグのみを表示することです。したがって、a タグの周りの構文ラッパーをエスケープする必要があります。

したがって、< を使用しましたおよび> 構文ラッパーをエスケープするための文字参照。<a> 参照は <a> タグを表します。

その結果、下の例の 2 番目の <a> タグでは、ハイパーリンクがテキスト全体に適用され、the <a> tag となります。これが、HTML の構文ラッパーをエスケープする必要がある理由です。

サンプルコード：

<a href="#"> the <a> tag </a> <br>
<a href="#"> the &lt;a&gt; tag </a> 

出力：

アンパサンド記号は、Unicode 文字の参照文字をエスケープしながら書き込む最初の文字として使用されます。ただし、特定の Unicode 文字の参照文字を HTML で表示する必要がある場合は、アンパサンド記号をエスケープする必要があります。

以下に例を示します。

サンプルコード：

<p> The character reference of the symbol &lt; is &amp;lt; </p>

出力：

私たちの目標は、< 記号< と同等の参照文字を表示することです。しかし、参照< を書くと、ブラウザで < に変換されます。

名前参照文字を表すには、参照< のアンパサンド記号をエスケープする必要があります。アンパサンドをエスケープした後、上記の例に示すように、通常どおり残りの文字を書き込むことができます。

この記事では、HTML で文字をエスケープする必要がある理由と、エスケープする必要がある文字について説明しました。また、名前文字参照と数値文字参照についても学びました。