HTML Symbol Entities Cheatsheet

HTML symbol entities are special codes that represent characters which might otherwise be interpreted as HTML markup or are difficult to type directly. For example, < displays the less-than symbol < without the browser mistaking it for an HTML tag. Using entities ensures your content renders correctly across all browsers, avoids encoding issues, and is essential for displaying reserved characters like &, <, >, and " in your HTML documents.

Entity names (like &) are easy to remember and read, but not every Unicode character has a named entity. Numeric codes come in two forms: decimal (&) and hexadecimal (&). Numeric codes can represent any Unicode character, making them more universal. Named entities are generally preferred for readability, while numeric codes are used when a name doesn't exist or when working with dynamic content.

If your HTML document uses UTF-8 encoding (which is standard today), you can directly type most symbols without entities. However, you must still use entities for HTML-reserved characters (<, >, &, ") to prevent parsing errors. Entities are also useful when your keyboard lacks certain symbols, when working in CMS platforms that may strip special characters, or when you need guaranteed cross-platform consistency in email HTML or legacy systems.

Yes, all modern browsers fully support HTML entities. The named entities from HTML4 and HTML5 specifications are universally recognized. For numeric entities referencing Unicode characters, support depends on whether the user's system has a font that includes that glyph. Most common symbols (arrows, math operators, currency signs, Greek letters) are well-supported across Windows, macOS, Linux, iOS, and Android. For obscure Unicode symbols, consider testing across target platforms.

In CSS, use the escaped Unicode format with a backslash: content: "\00A9"; for the copyright symbol ©. In JavaScript, use Unicode escape sequences like "\u00A9" or template literals with direct Unicode characters. When injecting HTML via JavaScript's innerHTML, you can use entity names like ©, but when using textContent, use the actual character or Unicode escape. For React/JSX, you can use entities directly in JSX markup or use JavaScript Unicode escapes in expressions.

The non-breaking space entity   (or  ) creates a space character that prevents an automatic line break at that position. Use it to keep related words together (e.g., "10 km"), in table cells that shouldn't collapse, or to create indentation. However, avoid using multiple   for layout spacing — use CSS margins and padding instead. Overusing   can create accessibility issues for screen readers and make responsive design harder to manage.

Use this cheatsheet! Search by symbol name (e.g., "arrow"), character description (e.g., "trademark"), or even paste the symbol itself into the search box. You can also use browser developer tools, Unicode lookup tables, or online character maps. For programmatic needs, most programming languages offer functions to convert between characters and their Unicode code points, which you can then format as HTML numeric entities.