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:
1. 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” 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 Applications Technology is an FET subject offered at many schools in South Africa.</p> </div>
2. 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.
3. 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 entity | Displays | Symbol |
---|---|---|
é | é | e acute |
ë | ë | e umlaut |
& | & | ampersand |
| non-breaking space | |
‑ | ‑ | non-breaking dash |
© | © | copyright symbol |
° | ° | degree |
> | > | greater-than symbol |
< | < | less-than symbol |
— | — | em-dash |
– | – | en-dash; |
¶ | ¶ | pilcrow |
» | » | right angle quote |
« | « | left angle quote |
⓪ | ⓪ | circled digit zero |
① | ① | circled digit one |
② | ② | circled digit two |
③ | ③ | circled digit three |
④ | ④ | circled digit four |
References: