HTML Entities

Reserved characters in HTML must be replaced with character entities. If we use the less than < or greater than > signs in text, the browser will likely confuse them with tags. When we want to write in text form, the text will be displayed as the element we used. If we use entities, it looks like <span></span> and can be presented in text form. To display the < sign, we must use < or <. Not all browsers may support all entities, so it makes sense to check before uploading to the web. A frequently used entity in HTML is the non-breaking space  . A non-breaking space is a space that does not go into a new line. Two words separated by a non-breaking space will stick together (they will not break into a new line). This is handy when a line break is disruptive, and we want to avoid it.

If we write a sentence with multiple       spaces, the browser collapses them into one.

Without entities: If we write a sentence with multiple spaces, the browser collapses them into one.

If&nbsp;we write a sentence with multiple&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spaces, we get the actual spacing.

With entities: If we write a sentence with multiple spaces, we get the actual spacing.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML entities – example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
    <h1>HTML Entity Examples</h1>
    <p>Below is the "notation" (as code) and the "result" (as seen by the browser).</p>
    
    <h2>Symbols <code>&lt;</code>, <code>&gt;</code>, <code>&amp;</code></h2>
    <p><strong>Notation:</strong> <code>2 &amp;lt; 5 &amp;amp; 5 &amp;gt; 2</code><br>
    <strong>Result:</strong> 2 < 5 & 5 > 2</p>
    
    <h2>Quotation Marks</h2>
    <p><strong>Notation:</strong> <code>&amp;quot;word&amp;quot; and &amp;apos;letter&amp;apos;</code><br>
    <strong>Result:</strong> "word" and &apos;letter&apos;</p>
    
    <h2>Non-breaking Space</h2>
    <p><strong>Notation:</strong> <code>Name:&amp;nbsp;Borut&amp;nbsp;Kralj</code><br>
    <strong>Result:</strong> Name:&nbsp;Borut&nbsp;Kralj</p>
    
    <h2>Currencies and Legal Symbols</h2>
    <p><strong>Notation:</strong> <code>&amp;euro; &amp;copy; &amp;reg; &amp;trade;</code><br>
    <strong>Result:</strong> &euro; © ® ™</p>
    
    <h2>HTML code as a text example</h2>
    <p><strong>Notation:</strong></p>
    <pre>
&lt;ul&gt;
    &lt;li&gt;First&lt;/li&gt;
    &lt;li&gt;Second&lt;/li&gt;
&lt;/ul&gt;
    </pre>
    
    <span><strong>Result:</strong></span>
    
    <ul>
        <li>First</li>
        <li>Second</li>
    </ul>
    
    <h2>Numeric References</h2>
    <ul>
      <li>Decimal: <code>&amp;#169;</code> → &#169;</li>
      <li>Hex: <code>&amp;#x00A9;</code> → &#x00A9;</li>
    </ul>
</body>
</html>

RESULT

Commonly Used HTML Entities

A common use of the non-breaking space is to prevent browsers from collapsing spaces on HTML pages. If we want to add five or more spaces to the text, the browser will delete 4, so we can use the entity  . Since using entities is simple, I won't add an example for each one individually, but I will list them all in a table.

Result	Description	Entity Name	Entity Number
	Non-breaking space
<	Less than	<	<
>	Greater than	>	>
&	Ampersand	&	&
"	Double quotation mark	"	"
'	Single quotation mark	'	'
¢	Cent	¢	¢
£	Pound	£	£
¥	Yen	¥	¥
€	Euro	€	€
©	Copyright	©	©
®	Registered trademark	®	®
≤	Less than or equal to	≤	≤
≥	Greater than or equal to	≥	≥

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter. Some diacritical marks such as ( ̀ ) and ( ́ ) are called accents. Diacritical marks can appear above or below a letter, inside a letter, and between two letters, and can be used in combination with alphanumeric characters not present in the character set. Let's look at some examples:

To display è we type è
To display ó we type ó
To display a circumflex ̂ we type ̂ or for â we type â
To display a tilde ̃ we type ̃ or for õ we type õ

All that is required is to type the letter we want to apply the specific mark to before the diacritical mark.