Sometimes you will need to use some less than ordinary characters in the content of your web pages. In Microsoft Word, we use the appropriate special characters and symbols and in HTML we use HTML entities.

Entities can be expressed using entity names or character codes.

In this post:

• Non-breaking spaces
• Non-breaking hyphens
• List of common entities

Non-breaking spaces

Let’s begin with the non-breaking space. In Microsoft Word, when you require 2 or more words should never be separated, you used a non-breaking space (CNTRL + SHIFT + SPACE). This “glues” the words together and prevents them from ever being split over 2 lines. The same can be achieved in HTML using the   entity.

Resize your browser, slowly making the page narrower, while watching the behaviour of the text below. Notice that when the page becomes too narrow for the word “Africa” to appear on the same line as the word”South” that in the sentence with the non‑breaking spaces between the words “South” and “Africa” the words do not become separated.

The above is produced with the following code:

<div style="border: thin solid #000;padding: 1em;font-family: Arial, sans-serif;">

<h3>Without non-breaking spaces</h3>
<p>Computer Applications Technology is an FET subject offered at many schools in South Africa.</p>

<h3>With non-breaking spaces</h3>
<p>Computer&nbsp;Applications&nbsp;Technology is an FET&nbsp;subject offered at many schools in South&nbsp;Africa.</p>

</div>

Non-breaking dashes

Non-breaking dashes work in the same way that non-breaking spaces do: they prevent hyphenated words from being split across 2 lines.

A list of common entities

You should use the following entities where appropriate in your HTML. Remember: there are a couple of extra marks in the PAT rubric for using HTML tags outside of the curriculum!

You can see the full set of symbols and entities at https://www.w3schools.com/charsets/ref_html_symbols.asp