Notepad Tutorials for Web Page Development© 2010, 2016 Professor Floyd Jay Winters, Web Master, CIW and ACA Certified
HTML Special Characters and Symbols
There are times when you need to display special HTML characters or symbols on your Web page, such as the copyright symbol (©), a degree symbol (°), or a letter from a foreign alphabet such as an e with an "acute" accent (é). However, these
characters and symbols are not on the keyboard. There are other times when the character is on the keyboard, but if it were to be used on a Web page it would confuse the browser because it is part of an HTML tag or attribute structure, such as the less than symbol, also called a left angle bracket (<), the greater than symbol or right angle bracket (>), and the quotation mark ("). Another issue arises when it is necessary to insert two or more spaces into a page. HTML ignores multiple spaces, so non-breaking spaces ( ) are required. And finally there are foreign currency symbols such as the pound (£), the euro (€), or the yen (¥).
Below is the simple HTML code used to display: by Floyd Jay Winters © 2010
<p>by Floyd Jay Winters © 2010</p>
For another example of using special character, consider that you cannot display quotes within quotes. You will confuse the browser. For instance, perhaps you want to show a student what to type on the keyboard to display an image in a Web page. Below is the line code you would type in Notepad for the image to display:
<img src="images/monitor.png" alt="Monitor">
But to show the actual line of code to the viewer, without the code being rendered by the browser, you would type:
<img src="images/monitor.png" alt="Monitor">
Notice the use of the < for the < and the " for the " and > for the >.
These special HTML characters and symbols begin with an ampersand (&) and end with a semicolon (;). Below is a table displaying the most common HTML special characters and symbols. However, there are numerous other special characters, especially when you consider that the non-roman characters in international alphabets are extensive, such as ç or ñ or ö.
For a more extensive listing see:
wikipedia.org/Unicode_characters
and
webmonkey.com/special_characters/
| Symbol | Description of Common Special Characters | Html code |
| Ampersand | & | & |
| Cent sign | ¢ | ¢ |
| Copyright symbol | © | © |
| Registered symbol | ® | ® |
| Trademark | ™ | ™ |
| Rx | ℞ | ℞ |
| Degree sign | ° | ° |
| Infinity | ∞ | ∞ |
| Pi | π | π |
| Greater than | > | > |
| Less than | < | < |
| Greater or equal | ≥ | ≥ |
| Gamma | Γ | Γ |
| Lambda | Λ | Λ |
| Omega | Ω | Ω |
| Phi | Φ | Φ |
| Sigma | Σ | Σ |
| O Slash | Ø | Ø |
| Non-breaking space | will display three spaces | |
| Em Space | This is the equivalent of two spaces |   |
| Em Dash | Abc—Xyz | — |
| One half | ½ | ½ |
| One quarter | ¼ | ¼ |
| Divide | ÷ ÷ | ÷ ÷ |
| Quote | " | " |
| Apostrophe | ' | ' |
| Pound | £ | £ |
| Euro | € | € |
| Yen | ¥ | ¥ |
| Bullet | • | • |
| Club | ♣ | ♣ |
| Diamond | ♦ | ♦ |
| Heart | ♥ | ♥ |
| Spade | ♠ | ♠ |
| Dagger | † | † |
| Up Arrow | ↑ ⇧ ⇑ | ↑ ⇑ |
| Down Arrow | ↓ ⇩ ⇓ | ↓ ⇩ |
| Left Arrow | ← ⇦ | ← ⇦ |
| Right Arrow | → ⇨ | → ⇨ |
| Right Arrow 2 | ⇒ | ⇒ |
| Paragraph mark | ¶ | ¶ |
| Section symbol | § | § |
| Cedilla | ç Ç (a hook under a letter, in Spanish) | ç |
| Eñe | ñ Ñ (a tilde over a letter, in Spanish) | ñ |
| accent acute | é É (an apostrophe over a letter, in French) | é |
| Oumlat | ö Ö (a pair of dots above a vowel in Germanic languages) | ö |
| Pencil | ✏ will display different on some browsers | ✏ |
| Envelope | ✉ | ✉ |
| Phone | ☏ | ☏ |
| Scissors | ✂ | ✂ |
| Shamrock | ☘ | ☘ |
| Pointing Finger left | ☚ check on various browsers | ☚ |
| Pointing Finger right | ☛ check on various browsers | ☛ |
| Crown (white) | ♕ will display different on some browsers | ♕ |
| Crown (black) | ♚ will display different on some browsers | ♚ |
| Knight | ♞ will display different on some browsers | ♞ |
| Castle | ♜ will display different on some browsers | ♜ |
| Peace | ☮ | ☮ |
| Recycle | ♻ | ♻ |
| Wheelchair | ♿ | ♿ |
| Warning Sign | ⚠ | ⚠ |
| Radioactive | ☢ | ☢ |
| White Flag | ⚐ may not work on older browsers | ⚐ |
| Die face 3 | ⚂ may not work on older browsers | ⚂ |
| Die face 6 | ⚅ | ⚅ |
| Smiley Face | ☺ | ☺ |
| Frowny Face | ☹ | ☹ |
| Female | ♀ | ♀ |
| Male | ♂ | ♂ |
| Yin Yang | ☯ | ☯ |
| Music ¼ & ⅛ Notes | ♪ ♫ | ♪ ♫ |
| Right triangle/Play | ▶ may not work on older browsers | ▶ |
| Square/Stop | ◼ may not work on older browsers | ◼ |
| Circle | ⚪ ○ HTML5, test on various browsers | ⚪ ○ |
| Rectangle | ▭ ▭ HTML5, test on various browsers | ▭ ▭ |
| Pancake | ☰ | ☰ |
| Cross | ✟ | ✟ |
| Eye | 👁 check on various browsers | 👁 |
| Maltese | ✠ ✠ | ✠ ✠ |
| Check | ✓ ✓ | ✓ ✓ |
| Check Box | ☑ | ☑ |
| Star black | ★ ★ | ★ ★ |
| Star white | ☆ ☆ | ☆ ☆ |
| Sun | ☼ | ☼ |
| Moon | ☾ ☽ | ☾ ☽ |
| Key | ⚿ check on various browsers | ⚿ |
| Two way traffic | ⛗ check on various browsers | ⛗ |
| Soccer Ball | ⚽ | ⚽ |
| Base Ball | ⚾ may not work on older browsers | ⚾ |
| Water/Aquarius | ♒ may not work on older browsers | ♒ |
| Sailboat | ⛵ may not work on older browsers | ⛵ |
| Wheel | ☸ may display different on some browsers | ☸ |
| Anchor | ⚓ may not work on older browsers | ⚓ |
Experiment and become good at inserting special characters into Web pages.
For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate
Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements... your file, see: http://validator.w3.org
Review Assignment Learning Project: 10 Practice Review Steps
