← Back to HTML Course | Chapter 4: Semantics & Entities | Lesson 4 of 10

HTML Symbols

Imagine trying to write an online math textbook or a financial report, only to find that your keyboard doesn't have keys for mathematical symbols like infinity, arrows, or Greek letters. HTML symbols solve this problem. They are special codes that instruct the browser to display mathematical operators, technical arrows, and shapes that are not found on standard keyboards. These symbols are rendered as actual text characters, meaning they will scale cleanly to any size without pixelating like image files do.

In this page:

  1. Mathematical Symbols
  2. Displaying Greek Letters
  3. Interactive Directional Arrows
  4. Card Suit Shapes
  5. Numbered vs. Named Symbol Entities
Syntax
markup 
&entity_name;
&#number;
&#xhex;

Mathematical Symbols

HTML provides a wide range of entity codes to display complex mathematical operators, fractions, and relationships cleanly on your page.

Note: Using symbol codes is much better for search engine indexing than embedding image files of math equations.
Warning: Make sure you include the hash and x characters when writing hexadecimal symbol codes.

Example: Mathematical Symbols

markup 
<p>5 &times; 4 &divide; 2 = 10</p>

Displaying Greek Letters

Greek letters are commonly used in mathematics, physics, and science. HTML supports the entire Greek alphabet, allowing you to render lowercase and uppercase Greek characters cleanly using simple named entities.

Note: Start your named entity with a capital letter (like Α) to render the uppercase Greek character.
Warning: Double-check your spelling to make sure you do not confuse Greek characters (like χ) with standard Latin letters.

Example: Displaying Greek Letters

markup 
<p>&Alpha; &beta; &chi;</p>

Interactive Directional Arrows

Using arrow symbols is a great way to guide your visitors' eyes toward call-to-action buttons or to indicate sliding menus without needing to load heavy image files.

Note: Arrow symbols are actual text characters, so they will automatically match your paragraph's font size and color.
Warning: Make sure your arrow orientations match your user directions to prevent navigation confusion.

Example: Interactive Directional Arrows

markup 
<p>Next page &rarr;</p>

Card Suit Shapes

HTML includes built-in symbol codes for classic card suits (Spades, Hearts, Clubs, and Diamonds), allowing you to render these shapes cleanly on your page.

Note: You can style card suit shapes using CSS to change their colors and sizes dynamically.
Warning: Do not rely on card suits as navigation buttons; use standard, descriptive text links instead.

Example: Card Suit Shapes

markup 
<p>&spades; &hearts; &clubs; &diams;</p>

Numbered vs. Named Symbol Entities

Every HTML symbol can be written as either a named entity (like ∞) or a numbered entity (like ∞). While named entities are easier to memorize, numbered entities are more widely supported on older operating systems and legacy mobile devices.

Note: Use named entities for fast coding, but switch to numbered entities if your site supports older systems.
Warning: Always include the hash symbol (#) at the start of your numbered entity codes.

Example: Numbered vs. Named Symbol Entities

markup 
<p>&infin; is the same as &#8734;</p>
Live Example
Related Topics

HTML Entities · HTML Emojis · HTML Style Guide · HTML Charsets

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the closing semicolon (;) at the end of your symbol codes.
  2. Failing to write lowercase letters when typing named entities.
  3. Omitting the required hash symbol (#) at the start of your numbered entity codes.
Chapter Summary
  • HTML symbols allow you to display mathematical operators, technical arrows, and Greek letters cleanly without using image files.
  • Symbols behave like text, meaning you can easily style their color, size, and weight using standard CSS.
  • Write symbols using named entities for easy reading, or numbered entities for maximum browser support.
Browser Support

HTML symbols are natively supported by all modern and legacy web browsers.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Entities Next Lesson → HTML Emojis

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.