Appearance
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 ∞.
Example of displaying an infinity symbol:
Example of displaying an infinity symbol
html
<!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;) using HTML. Also, you can use this
version of the infinity symbol ∞ (&#8734;).
</p>
</body>
</html>To display an ampersand, use the following: & or &.
Example of displaying an ampersand:
Example of displaying an ampersand
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>To display an ampersand &, use the following entity: &amp;. Or, you can also use &#38; .</p>
</body>
</html>To display a caret character, use the following: ▲ or ▼.
Example of displaying a caret character:
Example of displaying a caret character
html
<!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 ▲ or ▼. Choose the one you need.</p>
</body>
</html>To display “less than” and “greater than” symbols, use < (<) and > (>), respectively.
Example of displaying “less than” and “greater than” symbols:
Example of displaying “less than” and “greater than” symbols
html
<!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" < and "more than" > symbols.</p>
</body>
</html>To display a “copyright” symbol, use the following: © or ©.
Example of displaying a “copyright” symbol:
Example of displaying “less than” and “greater than” symbols
html
<!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 &copy; or &#169;.</p>
</body>
</html>Use ‘ or ‘ to display a left single quotation mark, and ’ or ’ for the right single quotation mark.
Example of displaying left and right single quotation marks:
Example of displaying left and right single quotation marks
html
<!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 &lsquo; or &#8216; for the left and &rsquo; or &#8217;
for the right single quotation marks.
</p>
</body>
</html>Use “ or “ to display a left double quotation mark, and ” or ” for the right double quotation mark.
Example of displaying left and right double quotation marks:
Example of displaying left and right double quotation marks
html
<!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 &ldquo; or &#8220; for the left and &rdquo; or ” for t
he right double quotation marks.
</p>
</body>
</html>Use ← or ← to display left arrow, and → or → for the right arrow.
Example of displaying left and right arrows:
Example of displaying left and right arrows
html
<!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 &larr; or &#8592; for the left and &rarr; or &#8594;
for the right arrow.
</p>
</body>
</html>Use ↑ or ↑ to display the up arrow, and ↓ or ↓ for the down arrow.
Example of displaying left and right arrows
Example of displaying left and right arrows
html
<!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 &uarr; or &#8593; for the up arrow and &darr; or &#8595;
for the down arrow.
</p>
</body>
</html>To display a “trademark” symbol, use ™ or ™.
Example of displaying a “trademark” symbol:
Example of displaying a “trademark” symbol:
html
<!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 &trade; or &#8482;.
</p>
</body>
</html>To display a “registered trademark” symbol, use ® or ®.
Example of displaying a “registered trademark” symbol:
Example of displaying a “registered trademark” symbol:
html
<!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 &reg; or &#174;.
</p>
</body>
</html>To display a heart, use ♥ or ♥.
Example of displaying a heart:
Example of displaying a heart:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>
To display a heart, use &#9829; or &hearts;.
</p>
</body>
</html>To add a non-breaking space, use .
Example of displaying a non-breaking space:
Example of displaying a non-breaking space:
html
<!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 &nbsp;.
</p>
</body>
</html>See how to display many other symbols here.