This article was initially published on  [Dev](https://dev.to/ksound22/html-character-entities-useful-more-than-you-think-44jo)  and [Hashnode](https://koladechrisksound.hashnode.dev/html-character-entities-useful-more-than-you-think).

HTML character entities are texts, usually, a mixture of symbols used to display reserved characters, including emojis, in HTML. They begin with an ampersand (&) and end with a semicolon (;). The most widely used HTML entity on the web is the copyright symbol (©, coded &#169;, &copy;, and &COPY; )  found on a lot of websites footer, including my own  [portfolio](https://ksound22.github.io). 

Almost everybody seems not to notice these special characters are not for displaying the copyright symbol and random emojis alone. One other thing I find useful about them is making logos for websites. And sometimes, you might not need an icon library for your project at all as there is a code for almost every symbol, if not all actually.

Some HTML character entities include:

- `&#x00024`; – Dollar
- `&#x00040;` – asterisk 
- `&#x000A3;` – pound
- `&#x0003E;` – greater than
- `&#x0003C;` – lesser than 
- `&#x0002B` – plus
- `&#x0260E;` – telephone
- `&#x02665;` – Dark hearts
- `&#x02606;` – star
- `&#x02640;` – female
- `&#x02642;` – male
- `&#x0266A;` – sung
- `&#x02666;` – diamond
- `&#x02736;` – sext
- `&#x02660;` – spade

You can find a lot of other HTML entities in the official list of character entities  [here](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references) and  [here](https://dev.w3.org/html5/html-author/charref).

In the code snippets below, I tried to craft a logo for a mystery soccer club with HTML character entities and CSS positioning:

```HTML
    <div class="container">
        <span>
        <div class="lion">
            &#129409;
        </div>
        <div class="crown">
            &#128081;
        </div>
        <div class="ball1">
            &#9917;
        </div>
        <div class="ball2">
            &#9917;
        </div>
        <div class="text">
            <h4>KINGS FC</h4>
        </div>
        </span>
    </div>
``` 

```CSS
/* The CSS */
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  display: inline;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

span {
  border: 20px outset orange;
  border-radius: 9px;
}

.lion,
.ball1,
.ball2,
.text {
  font-size: 30px;
}

.lion {
  position: relative;
  top: 40px;
  left: 78px;
}

.crown {
  position: relative;
  top: 10px;
  left: 26px;
  font-size: 35px;
}

.ball1 {
  position: relative;
  top: 68px;
  left: -2px;
}

.ball2 {
  position: relative;
  top: 69px;
  left: -100px;
}

.text {
  position: relative;
  top: 30px;
  left: 25px;
  color: orange;
}
``` 


The output in the browser: 

![logo.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619221341299/FZo-NuKeu.png)


Obviously, I could be more creative. You should be more creative too because HTML character entities are useful more than you think.

Thank you for reading.
Connect with me via my  [portfolio ](https://ksound22.github.io) or my Twitter account  [@koladechris](https://twitter.com/koladechris)  

HTML CHARACTER ENTITIES: USEFUL MORE THAN YOU THINK

Fullstack JavaScript React Node Courses on Udemy