html, css, jQuery, PHP, mySQL

« | »

HTML From Scratch. 9:2 Special Characters.

ampersand

HTML Character Encodings

HTML allows the use of characters Aa-Zz and 0-9, together with ! and ?. The only quotes available for use in text are straight quotes. All other characters are known as ‘Special Characters’. So how do you include Special Characters? HTML Character Encodings.

All HTML Character Encodings begin with an ampersand (&) and finish with a semi-colon (;). Two alternative notations are available – one uses letters and is based on the names of the characters, the other uses only a hash symbol (#) followed by numbers. These are equivalent, and there is an alpha and a numeric alternative for each Special Character. Full tables of the character encodings can be found at http://www.w3schools.com/tags/ref_entities.asp.

Why

The character encoding used for most HTML pages is ISO-8859-1, and the first 128 characters of that are those which appear by default in web pages (aA-zZ, 0-9, and a few others). These are the original ASCII character set. However, many of the remaining possible characters are reserved for use in programming (<>$%&, etc) or other use, or they cannot be easily expressed with the keyboard (♥).

The five essentials

HTML parsers are only required to recognise five special character encodings. As a matter of fact, Internet Explorer fails on one of these anyway.

&gt; < greater than

&lt; < less than

&amp; & ampersand

&quot; ” quote marks

&apos; ‘ apostrophe – does not work in IE.

Use other special characters at your peril: it is essential to test in all browsers and on a variety of machines to ensure that special characters used do indeed render.

How

Simply type the Character Encoding in to the source code of your HTML at the point in your text where you need a special character. One key use is to produce code examples on a website: use &lt; and &gt; instead of < and >. When placing code on a website it can also be useful to use the HTML tags <code> and <pre>. The <code> tag simply allows its content to be separately styled with CSS, and is a semantic use of HTML. The <pre> tag produces pre-formatted text: all line breaks and spaces are preserved, and the text is rendered in a fixed width (typewriter) font by default.

The non-breaking space

One extra special character which is invaluable to web designers is the non-breaking space (&nbsp;). This inserts a space character wherever it is used. Although it is often used to solve positioning problems in layouts, its semantic use is to prevent line breaks occurring within company names (or other proper names) which consist of multiple words:

Boy Scouts of America

Boy&nbsp;Scouts&nbsp;of&nbsp;America

Tags: , , , , , , , , , , , , , , ,

This entry was posted on Wednesday, August 17th, 2011 at 12:06 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply