demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML Entities and Unicode Characters

html / typography

Estimated reading time: 2 minutes, 11 seconds

There are two primary methods of generating a character with HTML entities: that is, two ways of generating characters that your keyboard and/or a word processor does not produce by default. Both methods start with an ampersand character (&) and end with a semi-colon. They are keyword and decimal entities.

Keyword entities

Keyword entities cover the most common characters, and are recognized by the majority of browsers. A few examples:

Keyword HTML entities
KeywordMeaningProduces
©copyright symbol©
™trademark symbol
°degree°
—a long dash – to separate two conjoined pieces of text
–a short dash or hyphen - to join words or dates (e.g. 1939-45)
“a leading quotation mark
”a closing quotation mark
″inches, seconds
′feet, minutes
¾three-quarters¾

Decimal entities

Not every character has a keyword entity: the number of possible characters and symbols from every language is simply too great. Every character is also given a decimal entity: a code written in numbers. Sometimes these have keyword entity equivalents, but often not. Successful glyph representation is often more sensitive to font, browser, and OS selection. A minute sampling:

Decimal HTML entities
CodeMeaningProduces
↺open circle clockwise arrow
⇨right white arrow
⅗vulgar fraction, three-fifths
№numero sign
Ωohm

A few oddities

There are a few characters that remain problematic. The first two are the greater and less than sign: when you use < or > in a web page, the browser will assume that you are starting about the start or end of a tag. Use the keyword entities &lt; and &gt; to create those.

The last is the ampersand character, for similar reasons: if you have an & in your document, the browser assumes you are about to start an HTML entity. You have a keyword entity for that too: &amp;

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.