How to Display Symbols with HTML

Solution with HTML entities

Many symbols can easily be displayed with HTML entities.

In this snippet, you can see examples of displaying infinity, ampersand, caret, less than and more than, as well as copyright, and other symbols.

To display an infinity symbol, use an HTML entity: ∞ or ∞.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of displaying an infinity symbol:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      This is an example, which is used to display an infinity 
      symbol &infin; (&amp;infin;) using HTML. Also, you can use this 
      version of the infinity symbol &infin; (&amp;#8734;).
    </p>
  </body>
</html>

To display an ampersand, use the following: &amp; or &#38;.

Example of displaying an ampersand:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>To display an ampersand &amp, use the following entity: &amp;amp;. Or, you can also use  &amp;#38; .</p>
  </body>
</html>

To display a caret character, use the following: &#9650; or &#9660;.

Example of displaying a caret character:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>To display a caret character, you can use &#9650; or &#9660. Choose the one you need.</p>
  </body>
</html>

To display “less than” and “greater than” symbols, use &lt; (&#60;) and &gt; (&#62;), respectively.

Example of displaying “less than” and “greater than” symbols:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>Example of using the "less than" &lt;  and "more than" &#62; symbols.</p>
  </body>
</html>

To display a “copyright” symbol, use the following: &copy; or &#169;.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p> Example of using the "copyright" symbol. To display it, use  &amp;copy; or &amp;#169;.</p>
  </body>
</html>

Use &lsquo; or &#8216; to display a left single quotation mark, and &rsquo; or &#8217; for the right single quotation mark.

Example of displaying left and right single quotation marks:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using left and right single quotation marks. To display them, 
      use &amp;lsquo; or &amp;#8216; for the left and &amp;rsquo; or &amp;#8217; 
      for the right single quotation marks.
    </p>
  </body>
</html>

Use &ldquo; or &#8220; to display a left double quotation mark, and &rdquo; or &#8221; for the right double quotation mark.

Example of displaying left and right double quotation marks:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using left and right double quotation marks. To display them,
      use &amp;ldquo; or &amp;#8220; for the left and &amp;rdquo; or &#8221; for t
      he right double quotation marks.
    </p>
  </body>
</html>

Use &larr; or &#8592; to display left arrow, and &rarr; or &#8594; for the right arrow.

Example of displaying left and right arrows:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using left and right arrows. To display them, 
      use &amp;larr; or &amp;#8592; for the left and &amp;rarr; or &amp;#8594; 
      for the right arrow.
    </p>
  </body>
</html>

Use &uarr; or &#8593; to display the up arrow, and &darr; or &#8595; for the down arrow.

Example of displaying left and right arrows

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using up and down arrows. To display them, 
      use &amp;uarr; or &amp;#8593; for the up arrow and &amp;darr; or &amp;#8595; 
      for the down arrow.
    </p>
  </body>
</html>

To display a “trademark” symbol, use &trade; or &#8482;.

Example of displaying a “trademark” symbol:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using a "trademark" symbol. To display it, use &amp;trade; or &amp;#8482;.
    </p>
  </body>
</html>

To display a “registered trademark” symbol, use &reg; or &#174;.

Example of displaying a “registered trademark” symbol:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      Example of using a "registered trademark" symbol. To display it, use &amp;reg; or &amp;#174;.
    </p>
  </body>
</html>

To display a heart, use &#9829; or &hearts;.

Example of displaying a heart:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      To display a heart, use &amp;#9829; or &amp;hearts;.
    </p>
  </body>
</html>

To add a non-breaking space, use &nbsp;.

Example of displaying a non-breaking space:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>
      To display a non-breaking space, use &amp;nbsp;.
    </p>
  </body>
</html>

See how to display many other symbols here.