HTML - Web CORS

HTML Entity

An HTML entity is a piece of text ("string") that starts with an ampersand (&) and ends with a semicolon (;). Entities are used to display reserved characters (which would otherwise be read as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are hard to type with a standard keyboard.

There are two main types of HTML entities:

Named Entity

A named entity has a name. For example, the named entity for the copyright symbol (©) is

Named Entity Example

©

These are case sensitive and end with a semicolon.

Numeric Entity

Numeric entities can be represented by a numeric value. There are two types:

  • Decimal: Decimal numeric entities are written as &#N;, where N is the ISO 10646 decimal number. For example, the numeric entity for the copyright symbol (©) is

Decimal Numeric Entity Example

©
  • Hexadecimal: Hexadecimal numeric entities are written as &#xN;, where N is the ISO 10646 hexadecimal number. For example, the numeric entity for the copyright symbol (©) is

Hexadecimal Numeric Entity Example

©

Using HTML entities is simple - you just need to know the entity name or number for the character you want to display. Entities can be used in your HTML document's text, as well as within attribute values.

Common HTML Symbols

HTML provides many symbols that you can use in web pages. Here are some common symbols and their corresponding HTML entities:

Currency Symbols

  • Euro: The HTML entity for the Euro symbol (€) is €.
  • Pound: The HTML entity for the Pound symbol (£) is £.
  • Yen: The HTML entity for the Yen symbol (¥) is ¥.
  • Cent: The HTML entity for the Cent symbol (¢) is ¢.

Punctuation Symbols

  • Ampersand: The HTML entity for the Ampersand symbol (&) is &.
  • Greater Than and Less Than: The HTML entities for Greater Than (>) and Less Than (<) symbols are &gt; and &lt;, respectively.
  • Quotation Marks: The HTML entities for Left Double Quotation Mark (“), Right Double Quotation Mark (”), Left Single Quotation Mark (‘), and Right Single Quotation Mark (‘’) are:
    • Left Double Quotation Mark (): “
    • Right Double Quotation Mark (): ”
    • Left Single Quotation Mark (): ‘
    • Right Single Quotation Mark (): ’

Mathematical Symbols

  • Plus and Minus: The HTML entities for Plus (+) and Minus (-) symbols are:

    • Plus (+): +
    • Minus (): -
  • Multiplication and Division

    • Multiplication (×): ×
    • Division (÷): ÷

Fraction

The following fractions have specific codes:

Example: One Quarter (¼)

&frac14;

Example: One Half (½)

&lt;&frac12&gt;;

Example: Three Quarter (¾)

&lt;&frac34&gt;;

Arrow Symbol

The following arrow directions have specific codes:

Up, Down, Left, Right Arrows

Example: Up Arrow (↑)

&lt;&uarr&gt;;

Example: Down Arrow (↓)

&lt;&darr&gt;;

Example: Left Arrow (←)

&lt;larr&gt;;

Example: Right Arrow (→)

&lt;rarr&gt;;

Double Arrows

Example: Left double arrow (⇐)

&amp;lArr;

Example: Up double arrow (⇑)

&amp:uArr;

Example: Right double arrow (⇒)

&amp:rArr;

Using HTML Symbols

There are two main ways to insert symbols in your HTML code:

Directly inserting symbols

You can directly insert some symbols in your HTML code using your keyboard. You can use the dollar sign ($), the plus sign (+), or the equals sign (=) directly in your code.

Example: Directly inserting symbols

<p>The price is $99.</p>
<p>2 + 2 = 4</p>

Using HTML entities

For symbols that are not available on your keyboard or that have special meaning in HTML (like < or >), you need to use HTML entities. You can use either named entities or numeric entities.

Example: Using HTML entities

<p>This is the copyright symbol: &copy;</p>
<p>This is the euro symbol: &euro;</p>
<p>This is the registered trademark symbol: &#174;</p>

When using symbols in your web pages, consider these best practices:

  • Use entities for reserved characters: Always use HTML entities for characters that are reserved in HTML, like < (&lt;), > (&gt;), and & (&amp;). Using the actual characters can mess up your HTML code.
  • Be consistent: Choose one method (named or numeric entities) and stick with it throughout your website for consistency and readability.
  • Test your page: Always test your web page in multiple browsers to make sure that the symbols show correctly.
  • Consider accessibility: Some screen readers might not read out all symbols correctly. Provide alternative text where necessary to make sure all users can access content.

Remember, while symbols can add visual interest and meaning to your web pages, they should be used sparingly and purposefully to improve user experience.

Browser Support

Most modern web browsers support HTML symbols and entities. Commonly used browsers, including Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Internet Explorer, can display most symbols without issues.

There are some known inconsistencies with certain symbols in specific browsers:

  • Older browser versions: Older versions of browsers, especially Internet Explorer (before version 9), may not display all symbols correctly. If your website needs to support older browsers, test your pages and consider providing alternative content if necessary.

  • Font support: Some symbols may not display correctly if the user's device doesn't have a font that includes that character. This is more likely with less common symbols. To minimize this issue, you can use web-safe fonts or provide fallback fonts.

  • Encoding issues: If your HTML document doesn't specify the correct character encoding (such as UTF-8), some symbols might not display correctly. Always set the appropriate character encoding in your HTML head section like this:

Example: Character Encoding

<meta charset="UTF-8">
  • Entity name inconsistencies: Some browsers might recognize entity names in lowercase (like &copy;), while others might require uppercase (&COPY;). To avoid this issue, always use lowercase entity names as they are more widely supported.

To provide a good experience for users, test your web pages that contain symbols on various browsers and devices. This will help you identify and address any browser-specific issues and inconsistencies.

If you are using less common symbols or if browser support is a concern for your website, consider providing alternative text or images to convey the same meaning. This will help ensure that all users can access your content regardless of their browser or device.