How to Use HTML Entities for Custom Character Values
In this lesson you will learn how to use HTML entities in order to safely render special characters on a webpage, along with the reason why entities are important.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this video, we're going to learn about custom HTML5 entities. These are special entities that allow you to use custom symbols like copyright symbol, ampersands, and things like that.

Though technically you can use these symbols directly on the custom page, it's not recommended because certain browsers will render these symbols differently. For example, "&" is used for different things such as running queries, in GET&POST requests, and other server-side communications. This is why we use entities, as they'll translate to safe-to-use symbols while getting rendered by different browsers. For example, to display an ampersand, we can use the code: &, and this will render "&" on the browser.

<body>
  <p>Ampersand: &amp;</p>
</body>

And the output will be:

medium

So, that's how you can do an entity name.

Instead of name, you can also do a number, like this:

This will also display the same ampersand symbol.

Both the name and number are the same in terms of browser rendering, so it just depends on what you feel most comfortable remembering.

We'll go through more symbols like copyright and registered trademark.

<body>
  <p>Ampersand: &amp; &#38;</p>
  <p>Copyright: &copy; &#169;</p>
  <p>Registered tademark: &reg; &#174;</p>
</body>

The next one is an interesting entity called non-breaking space. To start off, type a few spaces and then a sentence. When it gets rendered on the browser, you'll see no space. This is because whitespaces are by default ignored by HTML. If you specifically want to insert a whitespace, you should use this code:

&nbsp; or &#160;

Remember, never use &nbsp; to give padding to your content as it'll look ugly, and can even throw off the design.

Thus, these are probably the four most popular entities that you'll use. But there are also a few more, and we'll run through them. They are greater than symbol, less than symbol, double quotes, and single quotes. 

  <p>Greater than: &gt; &#62;</p>
  <p>Lesser than: &lt; &#60;</p>

  <p>Double quotes: &quot; &#34;</p>
  <p>Single quotes: &apos; &#39;</p>
</body>

So, these are some of your common entities.