HTML entities

Intro

In the previous lesson, we introduced the concept of HTML entities. We used an HTML entity to create the copyright symbol. In this lesson, we’ll go into a bit more detail.

Steps

In the previous lesson, we had the following code.

<footer>
  <small>&copy; 2022 Business Name.</small>
</footer>

Alternate method

The code © creates the copyright symbol. However, there are technically a couple of other codes you could have used. Try duplicating the small element and then use © for the copyright symbol.

<footer>
  <small>&copy; 2022 Business Name.</small>
  <small>&#xa9; 2022 Business Name.</small>
</footer>

If you check the preview, you should see two copyright notices with the proper symbol.

Now duplicate the small element again and replace © with ©.

<footer>
  <small>&copy; 2022 Business Name.</small>
  <small>&#xa9; 2022 Business Name.</small>
  <small>&#169; 2022 Business Name.</small>
</footer>

If you check the preview, you should now see three copyright notices with the proper symbol.

Since © is easier to read and remember, you can always use that format, but I wanted to show you that there are other ways of creating the symbol.

If you’d like to see how to create other symbols, you can search online for the term “HTML entities.” There are several websites that list out the various symbols and their entities. Here’s one HTML entity chart from Toptal as an example.

More symbols

There are a handful of symbols that are reserved in HTML, which means you should avoid using them in your text content. You should use HTML entities instead of these symbols.

<: &lt;

>: &gt;

&: &amp;

“: &quot;

Final code

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Site Title</h1>
  <section>
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus ratione modi soluta odit doloribus repellat unde obcaecati quia, magnam distinctio accusantium quasi quo dignissimos eum quas eaque officiis fugiat sunt.</p>
  </section>

  <section>
    <h2>Services</h2>
    <h3>Service 1</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti corporis eaque atque fugit? Molestiae consequuntur dicta pariatur, eligendi fuga esse facere laborum, repudiandae ducimus optio perferendis quidem assumenda officiis voluptate?</p>

    <h3>Service 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum aliquid quo porro dolore aut quaerat ipsam. Similique nam architecto quas, nostrum fugiat omnis veniam magni, adipisci nemo voluptatum cumque eum!</p>
  </section>
</main>

<footer>
  <small>&copy; 2022 Business Name.</small>
  <small>&#xa9; 2022 Business Name.</small>
  <small>&#169; 2022 Business Name.</small>
</footer>