テキストのHTMLエンコード/デコード

HTMLの特殊文字を含む文字列を表現するためのHTMLエンコーダです。その逆の変換もできます。

<div class="row"> →(変換後) &lt;div class=&quot;row&quot;&gt;

HTMLエンコード/デコードとは

HTML内で次のようなタグ(<img>)を表現することはできません。言わずもがなですが、その文字列自体がHTMLとして解釈されてしまって文書構造が変わってしまうからですね。


<!-- HTML内ではタグを文字としては書けません(こんなふうには書けません) -->
<html>
	<body>
		画像には<img>タグを使う
	</body>
</html>

HTMLのコードの中でHTMLのタグを表現するためには、括弧(< >)を別の文字(&lt; &gt;)に置き換える必要があります。


<!-- HTML内ではタグを含む文字列をHTMLエンコードしておきます -->
<html>
	<body>
		画像には&lt;img&gt;タグを使う
	</body>
</html>

HTML特殊文字

括弧(< >)やダブルコーテーション(")だけではなく、さまざまな記号が特殊文字として使えます。ここでリストアップしている特殊文字は一部を抜粋したものです。特殊文字はエンティティ文字ともいうようです。

よく使う特殊文字
文字 表記 記号名
< &lt;
&#60;
括弧開き(始め括弧)
> &gt;
&#62;
括弧閉じ(終わり括弧)
" &quot;
&#34;
ダブルコーテーション
' &#39; シングルコーテーション
& &amp;
&#38;
アンド
  &nbsp;
&#174;
no-break space
行の折り返しを防ぐ特殊なスペース
« &laquo;
&#171;
左向きの二重引用符
» &raquo;
&#187;
右向きの二重引用符
&harr;
&#8596;
左右の矢印
&hArr;
&#8660;
左右の矢印
記号・アイコン
文字 表記 記号名
© &copy;
&#160;
コピーライト
® &reg;
&#174;
登録商標
&#12306; 郵便番号
&#12320; 郵便番号
&spades;
&#9824;
スペード
&clubs;
&#9827;
クラブ
&hearts;
&#9829;
ハート
&diams;
&#9830;
ダイヤ
&#9828; スペード
&#9831; クラブ
&#9825; ハート
&#9826; ダイヤ
&#9832; 温泉マーク
&phone;
&#9742;
電話
数学記号
文字 表記 記号名
&infin; インフィニティ
&ne; ノットイコール
&perp;
&#8869;
直交
&ang;
&#8736;
角度
&sum; シグマ
½ &frac12;
&#189;
2分の1
¼ &frac14;
&#188;
4分の1
¾ &frac34;
&#190;
4分の3
単位
文字 表記 記号名
&euro;
&#128;
ユーロ記号
¢ &cent;
&#162;
セント記号
£ &pound;
&#163;
ポンド記号
¥ &yen;
&#165;
円記号
&#8451; 気温(摂氏)
&#8457; 気温(華氏)
µ &micro;
&#181;
ミクロン
&#13212; ミリメートル
&#13213; センチメートル
&#13214; キロメートル
&#13215; 平方ミリメートル
&#13216; 平方センチメートル
&#13217; 平方メートル
&#13218; 平方キロメートル
&#13198; ミリグラム
&#13199; キログラム
&#13252; シーシー(cubic centimetre)
&#13205; マイクロリットル
&#13206; ミリリットル
&#13207; デシリットル
&#8467; リットル
&#13208; キロリットル
&#13208; キロリットル
ローマ数字
文字 表記 記号名
&#8544; ローマ数字(1)
&#8545; ローマ数字(2)
&#8546; ローマ数字(3)
&#8547; ローマ数字(4)
&#8548; ローマ数字(5)
&#8549; ローマ数字(6)
&#8550; ローマ数字(7)
&#8551; ローマ数字(8)
&#8552; ローマ数字(9)
&#8553; ローマ数字(10)
&#8554; ローマ数字(11)
&#8555; ローマ数字(12)
&#8560; ローマ数字(1)
&#8561; ローマ数字(2)
&#8562; ローマ数字(3)
&#8563; ローマ数字(4)
&#8564; ローマ数字(5)
&#8565; ローマ数字(6)
&#8566; ローマ数字(7)
&#8567; ローマ数字(8)
&#8568; ローマ数字(9)
&#8569; ローマ数字(10)
&#8570; ローマ数字(11)
&#8571; ローマ数字(12)