If you’ve ever tried to add special characters – like a copyright symbol or a degree symbol - to the text on your HTML page, you may have noticed that it wasn't as easy as you had thought it should be. Not only are these symbols not readily available on your keyboard, but some, like the greater-than (>) and less-than (<) symbols, are reserved for HTML markup. If you add them to your text, chances are, they'll be mistaken for code. To avoid this and ensure the symbols show up on your page, you’ll need to use HTML entities, also known as HTML symbol codes.
If the idea of coding seems intimidating, don't worry. While this may seem complex at first, once you understand the basics, it will soon come as second nature. Here's a closer look at what you'll need to know.
First, it's important to understand that an HTML entity or code is simply a piece (or “string”) of text used to display characters that would otherwise be mistaken as code. These codes begin with an ampersand (&) and end with a semicolon (;). In addition to HTML symbols, entities can also be used for invisible characters such as non-breaking spaces.
HTML symbol codes are useful in web design for many reasons. Not only is it important to ensure the output is correct, but because they're text-based, HTML codes also allow for faster loading times. In addition, they're scalable according to font size and allow for changes to both the font color and sizing.
When adding HTML symbol codes, you can use either an entity name or an entity number. This means your coding could look like either of the examples below, and it would still create the same output.
For example, to display the less-than symbol (<), you could enter either:
In most cases, entity names and entity numbers are fairly interchangeable. However, while entity names are often easier to remember, you may find that some browsers don’t support all entity names. On the other hand, you'll generally find support for entity numbers across the board. If you decide to use entity names, it’s also important to note that these are case-sensitive.
The copyright symbol (©) is one you’ll often come across when building websites for businesses. To create a copyright © symbol using HTML symbol codes, type in:
It’s also easy to create an HTML degree symbol (°). To do this, you’ll want to enter:
To improve your coding efficiency, it’s a great idea to memorize the codes for some of the most commonly used symbols. Then, you can reference an HTML symbols code list for any others you may need.
Some of the most commonly used HTML symbol codes include:
Registered Trademark Symbol ®
Trademark Sign ( ™ )
At Symbol @
Ampersand ( &)
Euro Sign ( € )
If HTML coding and website design feel like a challenge, allow Fiverr’s experts to take this task off your hands. You’ll find that hiring our web designers and programmers to implement design features for you is an extremely cost-effective option. Not only will this help take your website to the next level, but it will also allow you to focus your time and energy on doing the things that you do best.