HTML Entities
In this page:
Reserved Characters
Characters like <, >, and & are reserved by HTML to parse tags. To display these characters as plain text on your webpage, you must replace them with their corresponding HTML entity codes.
Note: All HTML entities start with an ampersand (&) and end with a semicolon (;).
Warning: Failing to escape a less-than sign (<) can cause the browser to mistake your text for a broken HTML tag.
Example: Reserved Characters
<p>Use <div> to create a division, and & for an ampersand.</p>The Non-Breaking Space (nbsp)
Normally, browsers collapse multiple spaces in your code into a single space. The non-breaking space entity ( ) prevents the browser from collapsing your spaces and keeps the wrapped words from breaking onto a new line.
Note: Use non-breaking spaces to keep units of measurement or short dates bound together on the same line.
Warning: Avoid using repeatedly to create large layout margins; use CSS margins instead.
Example: The Non-Breaking Space (nbsp)
<p>10 km</p>Currency Symbols
Since standard keyboards do not have keys for foreign currencies like Euros, Pounds, or Yen, HTML provides easy-to-use entity codes to display these currency symbols cleanly on your page.
Note: You can use either the named entity (like €) or the numbered entity (like ) to render currency symbols.
Warning: Double-check your currency codes to make sure your pricing tables show the correct symbols.
Example: Currency Symbols
<p>€20, £15, ¥500</p>Trademark and Copyright Symbols
Adding trademark and copyright symbols is essential for branding and legal protection. HTML provides simple, universally supported entities to render these standard legal characters.
Note: Use the named entity © to quickly add a copyright symbol to your page footer.
Warning: Always write these codes in lowercase to make sure they render correctly on older mobile browsers.
Example: Trademark and Copyright Symbols
<p>© 2024 MyCompany™</p>Combining Multiple Entities Safely
You can use multiple HTML entities in a single line of code to write mathematical formulas, technical explanations, or legal notices without breaking your page layout.
Note: Keep your code tidy by using spacing and line breaks when writing dense blocks of entities.
Warning: Ensure you include the closing semicolon on every entity to prevent rendering bugs.
Example: Combining Multiple Entities Safely
<p>5 < 10 & 10 > 5</p>Common HTML Entities Reference Table
A handful of entities come up constantly in everyday HTML: & for an ampersand, < and > for angle brackets, " for a straight double quote, © for the copyright symbol, and for a non-breaking space. Keeping these few in memory covers the vast majority of real-world cases.
Note: Bookmark a full HTML entity reference chart for the rare symbols you will not remember by heart, like fractions or arrows.
Warning: Forgetting to escape a literal ampersand as & inside an href like a search query URL can quietly break the link in some browsers.
Example: Common HTML Entities Reference Table
<p>& < > " © </p>Numeric vs Named Entities vs Unicode
A named entity like © is easy to read and remember. A numeric entity like © represents the exact same character using its Unicode code point number, and works even in older systems that might not recognize every named entity. Since modern files are saved as UTF-8, you can often just type the actual Unicode character, like © directly, and skip entities entirely.
Note: For modern websites saved as UTF-8, typing the real character directly, like © or ★, usually works fine and is simpler than remembering entity codes.
Warning: Entities remain necessary for HTML's own reserved characters, like < and &, no matter how modern your file encoding is — those must always be escaped.
Example: Numeric vs Named Entities vs Unicode
<p>© is the same as © is the same as ©</p>- Forgetting to include the required semicolon (;) at the end of your HTML entity codes.
- Failing to escape raw ampersands (&) inside your standard paragraph texts.
- Using the wrong entity code (like writing © in uppercase as ©), which can fail to render on older browsers.
- HTML entities prevent browsers from misinterpreting reserved characters (like <, >, and &) as code.
- All HTML entities start with an ampersand (&) and end with a semicolon (;).
- Use entities to display reserved HTML characters, currencies, trademarks, and non-breaking spaces safely on your webpage.
Standard HTML entity codes are natively supported by all browsers and assistive devices.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: