CodeGym /Courses /Frontend SELF EN /Special Characters

Special Characters

Frontend SELF EN
Level 4 , Lesson 5
Available

5.1 Character Escaping

In HTML, special characters, also known as "character entities", are used to represent characters that would otherwise be interpreted as part of the HTML syntax. These characters include, for example, angle brackets, ampersand, spaces, and symbols from various languages and character sets.

Angle Brackets and Ampersand

To display characters that are used in HTML as part of a tag or syntax, you need to use special codes:

  • < : &lt;
  • > : &gt;
  • & : &amp;

Example of usage:

HTML
    
      <p>Use &lt; and &gt; for angle brackets, and &amp; for ampersand.</p>
    
  

Quotation Marks

For displaying double and single quotes within HTML attributes:

  • " : &quot;
  • ' : &apos;

Example of usage:

HTML
    
      <p>For quotes, use &quot;double&quot; and &apos;single&apos; quotes.</p>
    
  

5.2 Spaces and Non-breaking Spaces

In HTML multiple consecutive spaces always display as a single space. To preserve spaces or create non-breaking spaces, special characters are used:

  • Space : &nbsp;
  • Thin Space : &thinsp;
  • Full Space : &emsp;
  • En Space : &ensp;

Example of usage:

HTML
    
      <p>This&nbsp;text&nbsp;contains&nbsp;several&nbsp;non-breaking&nbsp;spaces.</p>
    
  

Special Characters and Diacritics

HTML supports a multitude of special characters for various languages and character sets. For example:

  • © : &copy;
  • ® : &reg;
  • ™ : &trade;
  • € : &euro;
  • £ : &pound;

Example of usage:

HTML
    
      <p>Copyright &copy; 2024. All rights reserved. Price: 50 &euro;</p>
    
  

Mathematical Symbols

HTML supports a wide set of mathematical symbols:

  • ± : &plusmn;
  • × : &times;
  • ÷: &divide;
  • ≤ : &le;
  • ≥: &ge;
  • ∞ : &infin;
  • √ : &radic;

Example of usage:

HTML
    
      <p>Equation: x &ge; 5 and x &le; 10. Use &radic; to denote a root.</p>
    
  

5.3 Arrows and Other Graphic Symbols

HTML also supports arrows and other graphic symbols:

  • ← : &larr;
  • ↑ : &uarr;
  • → : &rarr;
  • ↓ : &darr;
  • ↔ : &harr;
  • ♠ : &spades;
  • ♣ : &clubs;
  • ♥ : &hearts;
  • ♦ : &diams;

Example of usage:

HTML
    
      <p>Directions: &larr; left, &uarr; up, &rarr; right, &darr; down.</p>
      <p>Card suits: &spades; &hearts; &diams; &clubs;</p>
    
  

Full List of Special Characters

A full list of special characters can be found in HTML documentation or on specialized web resources like W3Schools or HTML Character Entities Reference.

5.4 Using Emojis

Emojis have become an essential part of modern digital communication. They're used to express emotions, ideas, and objects in text messages, social media, and on web pages. In HTML, emojis can be used in several ways.

Using Unicode

Emojis can be inserted into an HTML document using Unicode symbols. Each emoji has a unique code that can be used to display it.

Example of using Unicode:

HTML
    
      <p>Smiley face: 😀</p>
      <p>Heart: ❤️</p>
      <p>Thumbs up: 👍</p>

    
  

To insert an emoji using Unicode, you need to use its hexadecimal code, prefixed with &#x and closed with ;.

Example of using hexadecimal codes:

HTML
    
      <p>Smiley face: &#x1F600;</p>
      <p>Heart: &#x2764;&#xFE0F;</p>
      <p>Thumbs up: &#x1F44D;</p>

    
  

No need to memorize this stuff: just google them if necessary and don't freak out if you see them in someone else's code 😊

1
Task
Frontend SELF EN, level 4, lesson 5
Locked
Escaping Characters
Escaping Characters
1
Task
Frontend SELF EN, level 4, lesson 5
Locked
Mathematical Symbols
Mathematical Symbols
1
Опрос
Basic HTML Tags,  4 уровень,  5 лекция
недоступен
Basic HTML Tags
Basic HTML Tags
Comments
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION