Numeric Character References (Decimal)

Technical Deep Dive & Specifications

The Anatomy of a Decimal NCR

A decimal character reference begins with an ampersand and hash (&#), followed by one or more decimal digits (Base 10: 0 through 9), and ends with a semicolon (;).

         +--- Ampersand (Escape sequence start)
         |
         |  +--- Hash symbol (Signifies a NUMERIC code point)
         |  |
         |  |  +--- Base-10 Decimal Integer (Unicode Code Point)
         |  |  |
         |  |  |       +--- Semicolon (Terminating delimiter)
         |  |  |       |
         v  v  v       v
         &  #  1 6 9   ;  ======> Decodes to © (Unicode Code Point 169)

The WHATWG Numeric Character Reference Tokenizer State

When the browser parser encounters &#, it switches from normal text parsing into the numeric reference pipeline:

               [ Data State ]
                     |
                     | (Read '&')
                     v
      [ Character Reference State ]
                     |
                     | (Read '#')
                     v
   [ Numeric Character Reference State ]
                     |
                     +---------------------------------------+
                     |                                       |
          (Read [0-9] Digit)                       (Read 'x' or 'X')
                     |                                       |
                     v                                       v
   [ Decimal Char Ref State ]                  [ Hex Char Ref State ]
   - Accumulate digits: total = (total * 10) + digit         |
   - Match ';' delimiter                                     |
   - Lookup code point in Unicode table                      v
   - Remap Windows-1252 if in 0x80..0x9F range      (See Lesson 13.3)
   - Emit UTF-16 character token into DOM

Decimal Code Point Ranges & Architecture

Unicode organizes characters into sequential numeric ranges. The first 256 code points match historical ASCII and ISO-8859-1 (Latin-1) standards:

The Windows-1252 Remapping Rule

In the 1990s, Microsoft Windows used an encoding called Windows-1252, which placed printable characters like the Euro symbol (€), smart quotes (“ ”), and em-dashes (—) in the range 128 to 159 (where official ISO/Unicode had non-printable control characters).

To prevent millions of legacy web pages from breaking, the modern WHATWG HTML Standard mandates that browsers automatically remap decimal references between 128 and 159:

<!-- In strict Unicode, 128 is an invisible control character.
     In modern HTML5, the browser automatically remaps &#128; to Unicode 8364 (€) -->
<p>Price: &#128;50</p> <!-- Renders as: Price: €50 -->

Senior Best Practice: While the browser remaps these for backward compatibility, you should always author modern HTML using the official Unicode decimal values (e.g. € instead of €).

Decimal Code Point Comparison Matrix

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 18 (Hello World!): Demonstrates that every letter in "Hello World!" corresponds directly to its standard ASCII decimal value: 72 ('H'), 101 ('e'), 108 ('l'), 111 ('o'), 32 (Space), 87 ('W'), 33 ('!').
• Line 19 (5 < 10 & 10 > 5): Escapes < (<), & (&), and > (>) using decimal notation.
• Line 24 (€100): Renders € using its official Unicode decimal code point (8,364).
• Line 26 (₹2,499): The Indian Rupee symbol does not have a standardized HTML4 legacy named entity like &inr;. Using ₹ renders ₹ accurately in every compliant browser.
• Line 31 (✔): Renders the heavy checkmark symbol (✔).
• Line 32 (★ and ☆): Renders solid (★, 9733) and outlined (☆, 9734) stars.
• Line 33 (🚀): Renders the Rocket emoji (🚀) from Unicode Plane 1 (Decimal 128,640).

Expected Browser Render Output

Decimal Character Reference Showcase

1. ASCII Escapes in Action
Using raw ASCII decimals: Hello World!
Reserved characters: 5 < 10 & 10 > 5

2. Global Currencies (With and Without Named Entities)
Euro (Named & Decimal): €100 vs €100
British Pound: £85.50
Indian Rupee (Decimal NCR only): ₹2,499
Japanese Yen: ¥12,000

3. UI Symbols and Astral Plane Emojis
Status: Active [ ✔ Verified ]
Rating: ★★★★☆ (4/5 Stars)
Astral Plane Rocket Emoji (Decimal 128640): 🚀