「

RyXeon & Tech

」を文字として表示。HTMLエスケープを実変換

サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。

HTMLの解説で<p>のようなタグをそのまま見せたいとき、山括弧を直接書くとブラウザーが要素として解釈する。今回は<p>RyXeon & Tech</p>という元文字列を変換した。

画面には<p>RyXeon & Tech</p>と表示された。<、>、&の3種類が文字参照へ置き換わり、タグではなく説明用の文字として扱える形になった。

操作手順

1. Browserling HTML Encoderを開く。
2. 入力欄へ<p>RyXeon & Tech</p>を貼り付ける。
3. 「HTML Encode!」を押す。
4. <、>、&へ変わった箇所を確認する。

どこで役立つのか

ブログでHTMLの例を示すとき、問い合わせ内容を管理画面に表示するとき、コード断片をチャットへ渡すときに使える。特に&自体を先に文字参照へするのは、後から山括弧を置き換える処理と衝突させないためにも重要である。

これはHTML文脈で文字を表示するための変換であり、URL、JavaScript文字列、JSONにはそれぞれ別の規則がある。貼り付け先の文脈に合うエンコードを選ぶ必要がある。

出典・確認先

• Browserling HTML Encoder
• WHATWG HTML: Character references