HTML Symbols: How They Work [+ Reference Guide]

Jamie Juviler
Jamie Juviler

Updated:

Published:

When writing HTML, there might be times when you want to insert a character that you can’t simply type. Many common symbols, including currency symbols, mathematical operators, and legal symbols (like © and ®) aren’t included on a standard keyboard.

person using HTML symbols on a computer in an office

There’s also an issue if you want to put a character on your page that already has a use in HTML. For example, HTML will interpret angle brackets (< and >) as the start and end of a tag, so you can’t write one in HTML as you would a letter or number character. It won’t display and may cause problems with the page.

The solution to both of these issues is to use HTML entities. In this post, you’ll learn how to use HTML entities to insert special characters on your page. We’ll also list some common symbols and their entities so you can easily place them in your document.

Download Now: Free HTML & CSS Hacks

How to Write HTML Symbols

To add symbols in HTML, developers use HTML entities. An HTML entity is a special string (a series of characters) that starts with an ampersand (&), ends with a semicolon (;), and contains either the entity name or entity number for a particular symbol. Many symbols have reserved HTML entities.

For example, to insert the copyright symbol (©) in HTML, we can use the entity &copy; (the entity name) or &#169; (the entity number). Notice how an additional hash symbol (#) is placed before the entity number.

Using either one of these entities causes the symbol to render correctly on the page:

See the Pen HTML symbols: copyright by HubSpot (@hubspot) on CodePen.

Characters that have a double use as both a display character and a functional HTML character also have their own entities — for example, angle brackets, ampersand, and quotation marks:

See the Pen HTML symbols: more examples by HubSpot (@hubspot) on CodePen.

To place entities, you can type them in or paste them from a list (like the one below). For entities that have names, it’s easy to remember and type them in. However, some older browsers may not process the entity name. Use the entity number to guarantee that your entity displays properly on all browsers.

HTML Symbols List

Sometimes, you can remember an HTML entity from its name. Other times, you’ll have to look it up. To help you out, here’s a list of common symbols along with their HTML entities in name and number formats:

Punctuation and Grammatical Symbols

Symbol Entity Name Entity Number Known As
  &nbsp; &#160; non-breaking space
& &amp; &#38; ampersand
' &apos; &#39; apostrophe/single quotation mark
" &quot; &#34; double quotation mark
&ldquo; &#147; left double quotation mark
&rdquo; &#148; right double quotation mark
&lsquo; &#145; left single quotation mark
;&lsquo; &#146; right single quotation mark
&ndash; &#150; en dash
&mdash; &#151; em dash
~ &tilde; &#126; tilde
¿ &iquest; &#191; inverted question mark
¡ &iexcl; &#161; inverted exclamation mark

 

Currency Symbols

Symbol Entity Name Entity Number Known As
&euro; &#128; euro
£ &pound; &#163; pund sterling (British pound)
¥ &yen; &#165; yen
¢ &cent; &#162; cent
  &#8356; lira
  &#8355; franc

 

Mathematical Symbols

Symbol Entity Name Entity Number Known As
× &times; &#215; multiplication
÷ &divide; &#247; division
± &plusmn; &#177; plus or minus
< &lt; &#60; less than
> &gt; &#62; greater than
&le; &#8804; less than or equal to
&ge; &#8805; greater than or equal to
&radic; &#8730; square root
&sum; &#8721; sum
&infin; &#8734; infinity
ƒ &fnof; &#131; function
&int; &#8747; integral
  &#8710; increment
&part; &#8706; partial differential
&prod; &#8719; n-ary product
  &#8729; bullet operator
&forall; &#8704; for all
&exist; &#8707; there exists
&isin; &#8712; is an element of the set
&notin; &#8713; is not an element of the set
&empty; &#8709; empty set
&ni; &#8715; under the condition that

 

Other Common Symbols

Symbol Entity Name Entity Number Known As
® &reg; &#174; registered trademark
© &copy; &#169; copyright
&trade; &#153; trademark
&dagger; &#8224; dagger
&Dagger; &#8225; double dagger
  &#8592; left arrow
  &#8594; right arrow
  &#8593; up arrow
  &#8595; down arrow
  &#9733; black star
  &#9734; white star
  &#9873; black flag
  &#9872; white flag


&spades; &#9824; black spade
&clubs; &#9827; black club
&hearts; &#9829; black heart
&diams; &#9830; black diamond
  &#9831; white club
  &#9828; white spade
  &#9825; white heart
  &#9825; white diamond
  &#9744; empty ballot box
  &#9745; ballot box with a checkmark
  &#9746; ballot box with an X
  &#9787; black smiling face
  &#9786; white smiling face
  &#9785; frowning face
  &#9774; peace symbol
  &#9842; recycling symbol

Add symbols to your HTML.

Most of the time, you should be able to write blocks of text without an issue. On occasion, however, it helps to know how HTML entities work and how to work them into your pages. It’s another handy tool for web developers and content creators, and knowing it will get you one step closer to HTML mastery.

New Call-to-action

Topics: HTML

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Learn more about HTML and CSS and how to use them to improve your website.