Lesson 1.3. Special characters in HTML

Lesson 1.2 Summary Lesson 1.4

Syntaxe

When the browser analyses HTML code, each lower sign < is interpreted as the begining of a tag and is not displayed. It then becomes impossible to display the lower sign symbol on a web page. The developers encounter interpretation problems:

The solution to these problems is the use of a special syntax for displaying special characters. The name of the character is surrounded by an ampersand (at the beginning) and a semicolon (at the end):

&symbole_name;

Example

As an example, the following HTML code displays some of the most common special entities:

<!-- Non ordered list of special characters -->
<ul>
    <li>&amp; AMPERSAND</li>
    <li>&lt; LESS THAN</li>
    <li>&gt; GREATE THAN</li>
    <li>&ecirc; CIRCUMFLEX</li>
    <li>&eacute; ACUTE ACCENT</li>
    <li>&egrave; E GRAVE ACCENT</li>
    <li>&agrave; A GRAVE ACCENT</li>
</ul>

The previous code displays the following page when interpreted by the browser:

Try it online

You will find many sites listing the special characters in HTML. In the following of the course, accents will be deliberately omitted to keep example easy to understand.

Non-Breaking spaces

You may have already noticed that consecutive spaces are replaced by a single space when rendered in the browser. You can compel the browser not to delete a space and prohibit the line feed on this space. The special character & nbsp; displays a non-breakable space. & nbsp; stands for Non-Breaking SPace .

Exercice

Write a HTML code that displays the following HTML tags in the page. Tags must not be rendered as in the following example:

Try online
Solution
Lesson 1.2 Summary Lesson 1.4

See also

Last update : 03/10/2022
 Soutenez le blog de Lulu sur Tipee. Support Lulu's blog on Tipeee