HTML Entities, Comments & Special Characters

While writing HTML, you might face situations where certain characters don’t display properly, such as <, >, or &. These are reserved by HTML and need to be written in a different way. Similarly, you may want to insert non-keyboard characters like ©, ®, or emojis. To handle this, HTML provides entities and special character codes.

Additionally, when writing code, it’s important to leave notes or explanations for yourself and other developers. That’s where HTML comments come in.

In this post, we will explore how to use HTML entities, comments, and special characters effectively.

What Are HTML Entities?

HTML entities are a way to display reserved or special characters in HTML that would otherwise be read as code. They always start with an & and end with a ;.

For example:

• < should be written as <
• > should be written as >
• & should be written as &

Example:

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Use &amp; to join words like Rock &amp; Roll</p>

Output:

5 < 10 and 10 > 5
Use & to join words like Rock & Roll

Commonly Used HTML Entities

HTML Comments

Comments allow you to add notes in your code that won’t be shown on the web-page. They are useful for explaining sections of code, leaving reminders, or temporarily disabling code during testing.

The syntax for comments is:

<!-- This is a comment -->

Example:

<p>This text is visible on the page.</p>

<!-- This is a hidden note for developers -->
<p>This text will also appear on the page.</p>

<p>This text is visible on the page.</p>

<!-- This is a hidden note for developers -->
<p>This text will also appear on the page.</p>

Special Characters and Symbols

Apart from reserved characters, HTML entities also let you add symbols and characters not found on a standard keyboard, like arrows, currency symbols, and emojis.

Example:

<p>Currency: &dollar; 100, &euro; 90, &pound; 75</p>
<p>Arrows: &larr; &uarr; &rarr; &darr;</p>
<p>Emoji: &#128512; (smiley face)</p>

Output:

• Currency: $ 100, € 90, £ 75
• Arrows: ← ↑ → ↓
• Emoji: 😀 (smiley face)

Summary

Practice Challenge

1. Write a paragraph that displays the text: (Hint: Use HTML entities)

If 4 < 5 and 10 > 7, then Rock & Roll is "fun".

2. Create a short HTML snippet with comments explaining each section.
3. Display at least three currency symbols and two arrows using entities.

With this knowledge, you can now display special characters properly, use comments in your code, and ensure that your HTML is both readable and error-free.