HTML5 website coding

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

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.

Without non-breaking spaces

Computer Applications Technology is an FET subject offered at many schools in South Africa.

With non-breaking spaces

Computer Applications Technology is an FET subject offered at many schools in South Africa.

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!

HTML entityDisplaysSymbol
&eacute;ée acute
&euml;ëe umlaut
&amp;&ampersand
&nbsp;non-breaking space
&#8209;non-breaking dash
&copy;©copyright symbol
&deg;°degree
&gt;>greater-than symbol
&lt;<less-than symbol
&mdash;em-dash
&#182;pilcrow
&raquo;»right angle quote
&laquo;«left angle quote
&#9450;circled digit zero
&#9312;circled digit one
&#9313;circled digit two
&#9314;circled digit three
&#9315;circled digit four
HTML entities

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

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.