HTML Entities
Hero
HTML Entities Learn how to safely display reserved characters, math symbols, and emojis in your web pages using HTML entities. Learning Outcomes: Understand reserved characters and how to use ampersand syntax. Prerequisites: Basic understanding of HTML tags. Reading Time: 3 min read Difficulty: Beginner
Introduction
HTML has a fundamental problem: certain characters are "reserved." For example, the less-than sign (<) and greater-than sign (>) are used to create HTML tags. If you want to literally type "A < B" on your website, the browser gets confused because it thinks you are trying to start a new tag! To solve this, HTML uses special codes called Entities.
Why This Matters
As you write technical blogs for himubey.in, you will often need to display HTML code to your readers. If you don't use entities, your code snippets will actually render as live HTML on the page, breaking your layout. Additionally, entities are the secret to displaying the copyright symbol (©), non-breaking spaces, and specific currency symbols.
Core Concepts
An HTML entity always begins with an ampersand (&) and ends with a semicolon (;).
- Reserved Characters: Characters that mean something specific in HTML (like
<,>, and&). - Non-breaking Space: The most famous entity (
). It forces a space between words that the browser cannot break onto a new line.
Syntax
You can use the entity name or the entity number. Names are easier to remember!
<!-- Displaying a less-than sign -->
<p>5 < 10</p>
<!-- Displaying a copyright symbol -->
<p>© 2026</p>
Real World Example
Let's build the footer text for Himanshu Dubey's portfolio and show a code snippet safely.
<footer>
<!-- Using entities for copyright and spacing -->
<p>© 2026 Himanshu Dubey. All rights reserved.</p>
<!-- Safely displaying HTML code inside a paragraph -->
<p>To create a paragraph, use the <code><p></code> tag!</p>
</footer>
Best Practices
- Use
&for Ampersands: Even if a standard&symbol usually works in your text, it's best practice to always use&when you want an ampersand to appear. It prevents the browser from accidentally parsing it as the start of an entity. - Use Entity Names: While you can use numbers (like
©for copyright), names (like©) are vastly easier for you and other developers to read and understand.
Common Mistakes
Mistake: Trying to type HTML tags into a code block directly.
<!-- WRONG: The browser tries to render the H1, making the text giant instead of showing the code! -->
<pre>
<h1>This is a title</h1>
</pre>
Correct Approach:
<!-- CORRECT: The user will actually see the raw HTML tags -->
<pre>
<h1>This is a title</h1>
</pre>
💡 Himubey Tip
Have you ever had two words that must stay together on the same line, like "Himanshu Dubey" or "$1,000,000"? If they wrap onto two lines, it looks terrible. By putting a Non-Breaking Space ( ) between them (e.g., Himanshu Dubey), the browser will treat them as a single glued-together word and will never split them at the end of a line!
Interview Questions
- Why must you use the
<entity instead of simply typing the<symbol on your keyboard? - What three characters make up the required syntax structure of an HTML entity?
- What is the specific purpose of the
entity?
Mini Challenge
Task: Use entities safely.
- Create a paragraph.
- Inside the paragraph, write the exact sentence: "Tom & Jerry said 5 > 3".
- You must use the correct HTML entities for both the ampersand and the greater-than sign!
Summary
HTML entities are essential for escaping reserved characters and adding special typographic symbols to your webpage. By mastering symbols like <, >, &, and ©, you ensure your content—especially code snippets—renders exactly as you intended.