HTML と CSS の基本を学び、シンプルなウェブページを作成する際に、タグの内容に複数のスペースが自動的に 1 つのスペースに結合されるため、複数のスペースの効果を実現するために を使用することがあります。
また、CSS のmarginやpaddingなどのプロパティに慣れていない場合に、特定のレイアウトを実現するために について偶然知ることもあります。
確かに、それは複数のスペースが自動的に結合される問題を解決することができますし、ページのレイアウトを調整するためにも使用できますが、レイアウトの問題は CSS で処理することが最善です。 に頼らないようにしましょう。
では、さっき言及した やよく見かける<、>などは、実際には何でしょうか？
文字実体参照（Named Character References）#
SGML、HTML、XML ドキュメントでは、多くの文字が予約文字であり、<や>のような文字はマークアップ言語にとって特別な意味を持っています。もし、いくつかの Unicode 文字がドキュメントの現在のエンコーディング（例：ISO-8859-1）で直接表現できない場合や、HTML の構文によって解析されて元の文字が表示されない場合、これらの直接エンコードできない文字を表すために、文字値参照または文字実体参照と呼ばれる 2 つのエスケープシーケンスを使用することができます。先ほどの は文字実体参照の一例です。
HTML 標準に関する実体名の説明：Named character references。標準では、開発者がダウンロードして使用できる安定したJSON 形式のデータも提供されています。
同じ記号は、文字実体と文字値の 2 つの方法で参照することができます。たとえば、先ほどのスペース文字は、対応する文字値参照である を使用して表すことができます。実体名の利点は、覚えやすいことですが、すべてのブラウザで正しく認識されることを保証することはできません。一方、文字値にはそのような心配はありませんが、覚えるのが不便です。
HTML 4 DTD では、252 個の名前付きエンティティが定義されています。注意深いあなたは、ここでの文字値が実際にはシンボルの ASCII コードに対応していることに気付くかもしれません。10 進数または 16 進数で表すことができます。
すべての文字実体を確認するには、Character entity reference - Wikipediaにアクセスしてください。
変換方法#
特定の記号の文字実体や文字値を知りたい場合は、このウェブサイトを使用して簡単に変換できます。変換結果を文字実体または文字値に設定することができます。
実際の開発での取り扱い方#
コミュニティの html-entities npm モジュールを使用して処理することができます。
2023 年 8 月 29 日更新：html-entities 以外にも、entitiesとheを使用することもできます。
以下は ESM の簡単な使用例です：
import { encode, decodeEntity } from 'html-entities'
encode('< > " \' & © ∆')
// -> '< > " ' & © ∆'
encode('< ©', { mode: 'nonAsciiPrintable' })
// -> '< ©'
encode('< ©', { mode: 'nonAsciiPrintable', level: 'xml' })
// -> '< ©'
decodeEntity('<')
// -> '<'
decodeEntity('©', { level: 'html5' })
// -> '©'
decodeEntity('©', { level: 'xml' })
// -> '©'
本記事があなたにとって役立つことを願っています。