HTML Entities (Symbols)
Overview
Sometimes you need to display special characters on your website, like the Copyright symbol (©) or the Trademark symbol (™).
More importantly, what if you want to display the actual code `<p>` on the screen? If you just type `<p>`, the browser will think you are trying to create a paragraph! To safely display reserved HTML characters and special symbols, we use 'HTML Entities'.
Syntax
Entities always start with an ampersand `&` and end with a semicolon `;`. To display a Less Than sign `<` without confusing the browser, use `<`. To display Greater Than `>`, use `>`.
<!-- ❌ WRONG: The browser thinks this is a real tag! -->
To create a paragraph, use the <p> tag.
<!-- ✅ CORRECT: Displays perfectly as text -->
To create a paragraph, use the <p> tag.You can use entities to print symbols that aren't easily found on your keyboard. `©` is the copyright symbol. ` ` is a 'Non-Breaking Space', which forces a space and prevents text from wrapping to a new line at that point.
<footer>
<!-- Prints: © 2025 Google LLC -->
© 2025 Google LLC
</footer>
<p>
The price is 100 € (Euros)
</p>
<!-- Forces the words to stay glued together on the same line -->
<p>
Mr. Kartik
</p>Common Pitfalls
- Always remember the semicolon `;` at the end of the entity! Writing © instead of © might work in some browsers, but it's technically invalid HTML and will eventually break.
- Interview tip: (Non-Breaking Space) is frequently asked about. It's used when you want a space between two words, but you absolutely do NOT want the browser to put them on separate lines if the screen gets too small.
Real-World Example
Using entities to display a mathematical formula safely:
<h2>Math Equation</h2>
<p>
If x < 10 and y > 5, then the result is ± 20.
<br>
Formula: A = πr²
</p>