HTML entities are still useful

Html entities(Character entity references) on most cases are not needed if the editor you are using supports UTF-8 encoding but there are a few reasons why we still should use them:

• to escape(interpret as text) reserved characters that are used for composing HTML tags
• to make it easy to write characters / symbols that are not on the keyboard
• to use invisible characters like line break, space and hyphen characters
• writing letters with accents

Escaping reserved characters

Well this is a no-brainer. If a word is directly preceded by a < sign and followed by a > sign than it automatically will be taken as an HTML tag, unless we specify that it’s not a tag:

John is a <<really good>> soccer player!

This will be rendered as:

John is a <> soccer player!

So the solution is to use HTML entity names or HTML entity numbers(names are easier to remember though):

John is a <&lt;really good&gt;> soccer player!

Why is the & sign considered a reserved character?

The answer is, because it introduces an html entity ! HTML entity names and entity numbers start with the & character. The & sign is like an escape character for something else then HTML code. So we need to escape that escape character in order to use the & as just a plain ampersand character. Also if you run HTML validator it will signal that it’s not valid and should be used as &amp;

<p>The main currencies are dollar&euro; crypto currencies are also mentionable.</p>

The &euro; can be interpreted as the euro html entity but we just wanted to use it in the form: dollar and euro; In order to escape the html entity introducing character we rewrite it like this:

<p>The main currencies are dollar&amp;euro; crypto currencies are also mentionable.</p>

The invisible characters

First scenario

Let’s suppose you have a link text with an arrow at the end but you NEVER WANT THE ARROW TO WRAP TO THE NEXT LINE ALONE, but always should be preceded by a word on the same line. How would you solve this task?

This should never happen:

If you add a non-breaking-space between the animals word and the arrow they will never be appart:

By the way, &nbsp; is not correctly used for spacing out elements because that actually will add non-breaking space instead of normal space. For normal spacing you could use &ensp; that is equal to 2 normal spaces. Also you can add 4 normal spaces with &emsp; (=emphasized space). The 1/6th of a normal space would be represented by &thinsp; and there are other shades like &hairsp; Or you can just use &ensp; multiple times if you want more space then 4 regular spaces.

Second scenario

How would you add a newline in a textarea? The \n will render as text, so that’s not ok. But take a look at the solution below:

<textarea>
  Hello &#13; everybody
</textarea>  

Third scenario

You want to add indications where should words break, but only when there is not enough space, what html entity would you use? Did you hear about the soft hyphen?

<div>Sed facilisis sem a ipsum fi&shy;ni&shy;bus con&shy;di&shy;men&shy;tum. Nul&shy;lam at condimentum lectus.</div>

The result on a narrow screen is this:

Copyright, trademarks and currencies

¢ => ¢
£ => £
¥ => ¥
€ => €
© => ©  (=copyright)
® => ®   (=registered sign)
™ => ™ (=trademark)

Symbols

↔ => ↔   (=left right arrows - horizontal arrows)
↓ => ↓   (=downward arrow)
↑ => ↑   (=upwards arrow)
← => ←   (=leftwards arrow)
→ => →   (=rightwards arrow) 
♦ => ♦  (=black diamond)
♠ => ♠ (=black spades) 
♥ => ♥ (=black heart)
♣ => ♣  (=black club)
☎ => ☎ 

If you are interested to find more of this, just take a look at this w3schools awesome reference: https://www.w3schools.com/charsets/

Write out easily letters with accents that are not on your keyboard!

The letters with accents have ascii codes(if you like using the numpad numbers while pushing down the alt key). The Ascii(American Standard Code for Information Interchange) character set has 128 characters in total and the extended Ascii character set has 256 control and printable characters and the most important it has the letters with diacritics:

• é ascii character => ALT key + 130
• Ç ascii character => ALT key + 128
• â ascii character => ALT key + 131

Instead of using the numpad you could write numeric HTML entities:

Débrouillard
Garçon   
Un câlin  

It could be hard to memorize all these number codes by heart, but there is another way to do it; using expressive naming for those numbers:

Dèbrouillard
Garçon
Un câlin

If you understand notions like a line leaned to the right is called acute and a line leaned to the left is called grave then all this naming will make sense:

è - accent grave - è
é - accent acute - é
ê - circumflex - ê
ë - umlaut - ë
ñ - tilde - ñ
ç - cedilla - ç
æ - ligature - æ
œ - ligature -œ
ø - streg - ø
ð - eth - ð
å - bolle - å
ē - macron -  ē
č - háček - č
ŭ - crescent - ŭ
 

Anyway, if you want to search for a certain character with accent, I recommend this great website: https://www.compart.com/en/unicode/html

Mathematical characters are at arms length

∞ => ∞
+ => +
- => −
× => ×
÷ => ÷
= => =
≠ => ≠
± => ±
¬ => ¬
½ => ½ 

There is a nice reference about this here: https://www.toptal.com/designers/htmlarrows/math/

Of course you can also write mathematical representations also with MathML, an XML language that has defined XML tags for representing math.

Other characters

° => ° (=degree)
— => —  (=longer dash)
§ => §  (=section) 
• => •  (=bullet) 
… => … (=ellipsis)
« => «  (=left angle quote)
» => »  (=right angle quote)

Saving the best for last – emoticons

😀 => 😀
😂 => 😂
😈 => 😈
😉 => 😉

For a wider range of emoticons visit this website: https://www.science.co.il/internet/html/Smileys.php

Enjoy !

0