HTML - Entities

Hello there, future web developers! As your friendly neighborhood computer teacher, I'm excited to take you on a journey through the fascinating world of HTML entities. Don't worry if you're new to programming – we'll start from the basics and work our way up. By the end of this tutorial, you'll be an HTML entity expert!

What are HTML Entities?

Before we dive in, let's understand what HTML entities are. Think of them as special codes that represent characters that might otherwise be difficult to display in HTML. It's like having a secret language for your web pages!

Why do we need HTML entities?

Imagine you want to display the less than symbol (<) in your HTML. If you just type it directly, your browser might think it's the start of a new HTML tag! That's where entities come to the rescue. They allow us to display these special characters without confusing the browser.

HTML Character Entities Name and Code

Let's start with some of the most common HTML entities. We'll look at both their names and their numeric codes.

Character	Entity Name	Numeric Code
<	<	<
>	>	>
&	&	&
"	"	"
'	'	'

Let's see these in action:

<p>I love to use &lt;strong&gt; tags to make text <strong>bold</strong>!</p>
<p>The ampersand symbol (&amp;) is used for HTML entities.</p>

In this example, we're using < and > to display the actual tags, and & to show the ampersand. Try removing these entities and see what happens!

HTML Non Breaking Spaces Name and Code

Now, let's talk about a special entity that's incredibly useful: the non-breaking space.

Character	Entity Name	Numeric Code
(space)

The non-breaking space is like a superhero space – it prevents line breaks where you don't want them. For example:

<p>I love HTML&nbsp;entities!</p>

This ensures "HTML" and "entities" always stay on the same line.

Example of HTML Entities

Let's put our knowledge to the test with a fun example:

<p>I'm learning HTML &amp; it's &lt;em&gt;amazing&lt;/em&gt;!</p>
<p>Copyright &copy; 2023 by John&nbsp;Doe</p>

In this example, we're using & for the ampersand, < and > to display the <em> tags, © for the copyright symbol, and   to keep "John" and "Doe" together.

ISO 8859-1 Symbol Entities Name and Code

HTML also provides entities for various symbols. Here are some common ones:

Symbol	Entity Name	Numeric Code
©	©	©
®	®	®
™	™	™
€	€	€
£	£	£

Let's use these in a practical example:

<p>Our company, Web Wizards&trade;, accepts payments in &euro; and &pound;.</p>
<p>All content is &copy; 2023 Web Wizards&reg;.</p>

ISO 8859-1 Character Entities Name and Code

Sometimes, you might need to display characters with accents or other diacritical marks. HTML entities come to the rescue again:

Character	Entity Name	Numeric Code
à	à	à
é	é	é
ñ	ñ	ñ
ü	ü	ü

Here's how you might use these:

<p>In Spanish, "hello" is "hola" and "goodbye" is "adi&oacute;s".</p>
<p>The French word for "beach" is "plage" (pronounced "pl&acirc;zh").</p>

Other Entities Supported by Browsers

Modern browsers support a wide range of entities, including mathematical symbols, arrows, and even emojis! Here are a few fun ones:

Symbol	Entity Name	Numeric Code
∞	∞	∞
♥	♥	♥
→	→	→
☺	⌣	☺

Let's use these to create a playful message:

<p>I have &infin; love for HTML! &hearts;</p>
<p>Let's move forward &rarr; and keep learning! &smile;</p>

Remember, while these entities are fun, it's important to use them judiciously. Overusing entities can make your HTML harder to read and maintain.

Conclusion

Congratulations! You've just taken a deep dive into the world of HTML entities. From displaying special characters to adding fun symbols, you now have a powerful tool in your web development toolkit.

As we wrap up, here's a little story from my teaching experience: I once had a student who was frustrated because his ampersands kept disappearing from his web page. When I showed him HTML entities, his face lit up like he'd discovered a hidden treasure. That's the magic of learning – there's always a solution waiting to be uncovered!

Remember, practice makes perfect. Try incorporating these entities into your HTML projects, and soon they'll become second nature. Happy coding, and may your web pages be filled with perfectly rendered characters and symbols!

Credits: Image by storyset