Big plus sign. HTML special characters. Cases of using some special characters, including non-breaking space and soft hyphen
HTML special characters are special language constructs that refer to characters from the character set used in text files. The table shows a list of reserved and special characters that cannot be added to the source code of an HTML document using the keyboard:
- characters that cannot be entered using the keyboard (for example, a copyright symbol)
- characters intended for marking (for example, a greater than or less than sign)
Such characters are added using a numeric code or name.
Symbol | Numeric code | Symbol name | Description |
---|---|---|---|
" | " | " | quotation mark |
" | " | " | apostrophe |
& | & | & | ampersand |
< | < | less than sign | |
> | > | > | more sign |
non-breaking space (A non-breaking space is a space that appears inside a line as a regular space, but does not allow display and printing programs to break the line at this point.) | |||
¡ | ¡ | ¡ | inverted exclamation point |
¢ | ¢ | ¢ | cent |
£ | £ | £ | lb. |
¤ | ¤ | ¤ | currencies |
¥ | ¥ | ¥ | yen |
¦ | ¦ | ¦ | broken vertical bar |
§ | § | § | section |
¨ | ¨ | ¨ | interval (Cyrillic) |
© | copyright sign | ||
ª | ª | ª | female ordinal exponent |
« | « | « | French quotes (herringbone) - left |
¬ | ¬ | ¬ | negation-expressions |
® | ® | ® | registered trademark |
¯ | ¯ | ¯ | macron interval |
° | ° | ° | degree |
± | ± | ± | plus or minus |
² | ² | ² | superscript 2 |
³ | ³ | ³ | superscript 3 |
´ | ´ | ´ | acute interval |
µ | µ | µ | micro |
¶ | ¶ | ¶ | paragraph |
· | · | · | midpoint |
¸ | ¸ | ¸ | cedilla interval |
¹ | ¹ | ¹ | superscript 1 |
º | º | º | male ordinal exponent |
» | » | » | French quotes (herringbone) - right |
¼ | ¼ | ¼ | 1/4 part |
½ | ½ | ½ | 1/2 part |
¾ | ¾ | ¾ | 3/4 parts |
¿ | ¿ | ¿ | inverted question mark |
× | × | × | multiplication |
÷ | ÷ | ÷ | division |
́ | ́ | emphasis | |
Œ | Œ | Œ | capital ligature OE |
œ | œ | œ | lowercase ligature oe |
Š | Š | Š | S with crown |
š | š | š | lowercase S with crown |
Ÿ | Ÿ | Ÿ | capital Y with tiara |
ƒ | ƒ | ƒ | f with hook |
ˆ | ˆ | ˆ | dicriatic accent |
˜ | ˜ | ˜ | small tilde |
– | – | - | dash |
— | — | — | em dash |
‘ | ‘ | ‘ | left single quote |
’ | ’ | ’ | right single quote |
‚ | ‚ | ‚ | bottom single quote |
“ | “ | “ | left double quotes |
” | ” | ” | right double quotes |
„ | „ | „ | lower double quotes |
† | † | † | dagger |
‡ | ‡ | ‡ | double dagger |
. | bullet | ||
… | … | … | horizontal ellipsis |
‰ | ‰ | ‰ | ppm (thousandths) |
′ | ′ | ′ | minutes |
″ | ″ | ″ | seconds |
‹ | ‹ | ‹ | single left corner quote |
› | › | › | single right corner quote |
‾ | ‾ | ‾ | overlining |
€ | € | € | Euro |
™ | ™ or | ™ | trademark |
← | ← | ← | left arrow |
up arrow | |||
→ | → | → | right arrow |
↓ | ↓ | ↓ | arrow to down |
↔ | ↔ | ↔ | double arrow |
↵ | ↵ | ↵ | carriage return arrow |
⌈ | ⌈ | ⌈ | upper left corner |
⌉ | ⌉ | ⌉ | top right corner |
⌊ | ⌊ | ⌊ | lower left corner |
⌋ | ⌋ | ⌋ | bottom right corner |
◊ | ◊ | ◊ | rhombus |
♠ | ♠ | ♠ | peaks |
♣ | ♣ | ♣ | cross |
worms | |||
♦ | ♦ | ♦ | diamonds |
Mathematical symbols supported in HTML
Symbol | Numeric code | Symbol name | Description |
---|---|---|---|
∀ | ∀ | ∀ | for anyone, for everyone |
∂ | ∂ | ∂ | Part |
∃ | ∃ | ∃ | exists |
∅ | ∅ | ∅ | empty set |
∇ | ∇ | ∇ | Hamilton operator (nabla) |
∈ | ∈ | ∈ | belongs to the set |
∉ | ∉ | ∉ | does not belong to the set |
∋ | ∋ | ∋ | or |
∏ | ∏ | ∏ | work |
∑ | ∑ | ∑ | sum |
− | − | − | minus |
∗ | ∗ | ∗ | multiplication or operator conjugate to |
× | × | × | multiplication sign |
√ | √ | √ | Square root |
∝ | ∝ | ∝ | proportionality |
∞ | ∞ | ∞ | infinity |
⋮ | ⋮ | multiplicity | |
∠ | ∠ | ∠ | corner |
∧ | ∧ | ∧ | And |
∨ | ∨ | ∨ | or |
∩ | ∩ | ∩ | intersection |
∪ | ∪ | ∪ | Union |
∫ | ∫ | ∫ | integral |
∴ | ∴ | ∴ | That's why |
∼ | ∼ | ∼ | like |
≅ | ≅ | ≅ | comparable |
≈ | ≈ | ≈ | approximately equal |
≠ | ≠ | ≠ | not equal |
≡ | ≡ | ≡ | identically |
≤ | ≤ | ≤ | less or equal |
⩽ | ⩽ ⩽ |
⩽ ⩽ |
less or equal |
≥ | ≥ | ≥ | more or equal |
⩾ | ⩾ ⩾ |
⩾ ⩾ |
more or equal |
⊂ | ⊂ | ⊂ | subset |
⊃ | ⊃ | ⊃ | supersets |
⊄ | ⊄ | ⊄ | not a subset |
⊆ | ⊆ | ⊆ | subset |
⊇ | ⊇ | ⊇ | superset |
⊕ | ⊕ | ⊕ | direct amount |
⊗ | ⊗ | ⊗ | tenser product |
⊥ | ⊥ | ⊥ | perpendicular |
⋅ | ⋅ | ⋅ | dot operator |
Greek and Coptic alphabets
Symbol | Numeric code | Hex code | Symbol name |
---|---|---|---|
Ͱ | Ͱ | Ͱ | |
ͱ | ͱ | ͱ | |
Ͳ | Ͳ | Ͳ | |
ͳ | ͳ | ͳ | |
ʹ | ʹ | ʹ | |
͵ | ͵ | ͵ | |
Ͷ | Ͷ | Ͷ | |
ͷ | ͷ | ͷ | |
ͺ | ͺ | ͺ | |
ͻ | ͻ | ͻ | |
ͼ | ͼ | ͼ | |
ͽ | ͽ | ͽ | |
; | ; | ; | |
΄ | ΄ | ΄ | |
΅ | ΅ | ΅ | |
Ά | Ά | Ά | |
· | · | · | |
Έ | Έ | Έ | |
Ή | Ή | Ή | |
Ί | Ί | Ί | |
Ό | Ό | Ό | |
Ύ | Ύ | Ύ | |
Ώ | Ώ | Ώ | |
ΐ | ΐ | ΐ | |
Α | Α | Α | Α |
Β | Β | Β | Β |
Γ | Γ | Γ | Γ |
Δ | Δ | Δ | Δ |
Ε | Ε | Ε | Ε |
Ζ | Ζ | Ζ | Ζ |
Η | Η | Η | Η |
Θ | Θ | Θ | Θ |
Ι | Ι | Ι | Ι |
Κ | Κ | Κ | Κ |
Λ | Λ | Λ | Λ |
Μ | Μ | Μ | Μ |
Ν | Ν | Ν | Ν |
Ξ | Ξ | Ξ | Ξ |
Ο | Ο | Ο | Ο |
Π | Π | Π | Π |
Ρ | Ρ | Ρ | Ρ |
Σ | Σ | Σ | Σ |
Τ | Τ | Τ | Τ |
Υ | Υ | Υ | Υ |
Φ | Φ | Φ | Φ |
Χ | Χ | Χ | Χ |
Ψ | Ψ | Ψ | Ψ |
Ω | Ω | Ω | Ω |
Ϊ | Ϊ | Ϊ | |
Ϋ | Ϋ | Ϋ | |
ά | ά | ά | |
έ | έ | έ | |
ή | ή | ή | |
ί | ί | ί | |
ΰ | ΰ | ΰ | |
α | α | α | α |
β | β | β | β |
γ | γ | γ | γ |
δ | δ | δ | δ |
ε | ε | ε | ε |
ζ | ζ | ζ | ζ |
η | η | η | η |
θ | θ | θ | θ |
ι | ι | ι | ι |
κ | κ | κ | κ |
λ | λ | λ | λ |
μ | μ | μ | μ |
ν | ν | ν | ν |
ξ | ξ | ξ | ξ |
ο | ο | ο | ο |
π | π | π | π |
ρ | ρ | ρ | ρ |
ς | ς | ς | ς |
σ | σ | σ | σ |
τ | τ | τ | τ |
υ | υ | υ | υ |
φ | φ | φ | φ |
χ | χ | χ | χ |
ψ | ψ | ψ | ψ |
ω | ω | ω | ω |
ϊ | ϊ | ϊ | |
ϋ | ϋ | ϋ | |
ό | ό | ό | |
ύ | ύ | ύ | |
ώ | ώ | ώ | |
Ϗ | Ϗ | Ϗ | |
ϐ | ϐ | ϐ | |
ϑ | ϑ | ϑ | ϑ |
ϒ | ϒ | ϒ | ϒ |
ϓ | ϓ | ϓ | |
ϔ | ϔ | ϔ | |
ϕ | ϕ | ϕ | ϕ |
ϖ | ϖ | ϖ | ϖ |
ϗ | ϗ | ϗ | |
Ϙ | Ϙ | Ϙ | |
ϙ | ϙ | ϙ | |
Ϛ | Ϛ | Ϛ | |
ϛ | ϛ | ϛ | |
Ϝ | Ϝ | Ϝ | Ϝ |
ϝ | ϝ | ϝ | ϝ |
Ϟ | Ϟ | Ϟ | |
ϟ | ϟ | ϟ | |
Ϡ | Ϡ | Ϡ | |
ϡ | ϡ | ϡ | |
Ϣ | Ϣ | Ϣ | |
ϣ | ϣ | ϣ | |
Ϥ | Ϥ | Ϥ | |
ϥ | ϥ | ϥ | |
Ϧ | Ϧ | Ϧ | |
ϧ | ϧ | ϧ | |
Ϩ | Ϩ | Ϩ | |
ϩ | ϩ | ϩ | |
Ϫ | Ϫ | Ϫ | |
ϫ | ϫ | ϫ | |
Ϭ | Ϭ | Ϭ | |
ϭ | ϭ | ϭ | |
Ϯ | Ϯ | Ϯ | |
ϯ | ϯ | ϯ | |
ϰ | ϰ | ϰ | ϰ |
ϱ | ϱ | ϱ | ϱ |
ϲ | ϲ | ϲ | |
ϳ | ϳ | ϳ | |
ϴ | ϴ | ϴ | |
ϵ | ϵ | ϵ | ϵ |
϶ | ϶ | ϶ | ϶ |
Ϸ | Ϸ | Ϸ | |
ϸ | ϸ | ϸ | |
Ϲ | Ϲ | Ϲ | |
Ϻ | Ϻ | Ϻ | |
ϻ | ϻ | ϻ | |
ϼ | ϼ | ϼ | |
Ͻ | Ͻ | Ͻ | |
Ͼ | Ͼ | Ͼ | |
Ͽ | Ͽ | Ͽ |
Why are special characters needed and how to use them
Let's say you decide to describe some tag on your page, but since the browser uses characters< и >like the start and end of a tag, applying them inside the content of your html code can lead to problems. But HTML gives you an easy way to define these and other special characters using simple abbreviations called references to symbols.
Let's look at how this works. For each character that is considered special or that you want to use on your web page but that cannot be printed in your editor (for example, the copyright symbol), you find the abbreviation and print it in the html code instead of the desired character. For example, for the symbol ">" the abbreviation is > , and for the symbol "<" - < .
Let's say you wanted to print "Element very important" on his page. Instead, you will have to use references to the symbols you need to display the entry correctly, and in the end your entry in the code should look like this:
Element very important
Try »Another special character you need to know about is the & (ampersand) symbol. If you want it to appear on your HTML page, use the & link instead of the & symbol.
Special characters are technical characters that are not represented on the keyboard and are encoded using UNICODE or another metalanguage. Special characters are divided into groups: mathematical, Greek alphabet, ISO 8859-1 and others. Why they are needed and how to use them, read further in the article.
Using special characters when writing documents
Use is for the following purposes:
- Giving the article completeness and aesthetics. Special signs help you quickly understand dimensional values or read a historical name in Latin or Greek.
- Some elements ensure the correct layout of the document. For example, “” and “” are different, the first are transmitted by standard means, the others through special characters.
- Layout of mathematical documents cannot do without knowledge of the main groups of elements.
Basic signs
The material will allow you to find special characters in the appropriate encoding for quick insertion into text.
Appearance | Designation | HTML code | CSS code |
☃ | Snowman | ☃ | \2603 |
☦ | Orthodox cross | ☦ | \2626 |
⚓ | Anchor | ⚓ | \2693 |
✆ | Phone sign | ✆ | \2706 |
☎ | Telephone | ☎ | \260E |
☕ | Hot drinks | ☕ | \2615 |
✎ | Pencil pointing downwards | ✎ | \270E |
✏ | Pencil | ✏ | \270F |
✐ | Pencil pointing upwards to the right | ✐ | \2710 |
✑ | Blank nib | ✑ | \2711 |
✒ | Filled pen nib | ✒ | \2712 |
⚜ | fleur-de-lis | ⚜ | \269C |
⛑ | Helmet with white cross | ⛑ | \26D1 |
⚝ | Drawn white star | ⚝ | \269D |
❄ | Snowflake | ❄ | \2744 |
❤ | Shaded bold heart | ❤ | \2764 |
❅ | Snowflake sandwiched by shamrocks | ❅ | \2745 |
❆ | Fat sharp-angled snowflake | ❆ | \2746 |
★ | Shaded star | ★ | \2605 |
☆ | Blank star | ☆ | \2606 |
✪ | Unfilled star in a filled circle | ✪ | \272A |
✫ | Filled star with an open circle inside | ✫ | \272B |
✯ | Rotating star | ✯ | \272F |
❉ | Star with spherical ends | ❉ | \2749 |
❋ | Bold eight-pointed drop-shaped star-propeller | ❋ | \274B |
✲ | Star with blank center | ✲ | \2732 |
☀ | Painted sun with rays | ☀ | \2600 |
☁ | Clouds | ☁ | \2601 |
☂ | Umbrella | ☂ | \2602 |
☑ | Tick in a square | ☑ | \2611 |
☒ | Cross in a square | ☒ | \2612 |
☹ | Frowning emoticon | ☹ | \2639 |
☺ | Smiling emoticon | ☺ | \263A |
☻ | Shaded smiling emoticon | ☻ | \263B |
☭ | Hammer and sickle | ☭ | \262D |
⚑ | Filled Flag | ⚑ | \2691 |
⚐ | Blank flag | ⚐ | \2690 |
☰ | Trigram | ☰ | \2630 |
✿ | Painted flower | ✿ | \273f |
❀ | Blank flower | ❀ | \2740 |
✾ | Flower with six petals | ✾ | \273E |
❁ | Colored outlined flower | ❁ | \2741 |
❂ | Flower made of dots | ❂ | \2742 |
✉ | Envelope | ✉ | \2709 |
❦ | Heart in the form of a flower | ❦ | \2766 |
❶ | Number 1 | ❶ | \2776 |
❷ | Number 2 | ❷ | \2777 |
❸ | Number 3 | ❸ | \2778 |
❹ | Number 4 | ❹ | \2779 |
❺ | Number 5 | ❺ | \277A |
❻ | Number 6 | ❻ | \277B |
❼ | Number 7 | ❼ | \277C |
❽ | Number 8 | ❽ | \277D |
➒ | Number 9 | ➒ | \2792 |
➓ | Number 10 | ➓ | \2793 |
✖ | Bold multiplication sign | ✖ | \2716 |
✘ | Bold cross | ✘ | \2718 |
✔ | Bold check mark | ✔ | \2714 |
✚ | Fat cross | ✚ | \271A |
⚛ | Atom symbol | ⚛ | \269B |
♺ | Recycling symbol | ♺ | \267A |
❑ | Unfilled square with lower right shadow | ❑ | \2751 |
❒ | Unfilled square with top right shadow | ❒ | \2752 |
◈ | Diamond in a frame | ◈ | \25C8 |
◐ | Circle with left half filled in | ◐ | \25D0 |
◑ | Circle with the right half filled in | ◑ | \25D1 |
⁂ | Three stars | ⁂ | \2042 |
Punctuation marks
Appearance | Designation | HTML code | CSS code |
< | Less than sign (beginning of tag) | < | \003C |
> | Greater than sign (end of tag) | > | \003E |
« | Left double angle bracket | « | \00AB |
» | Right double angle bracket | » | \00BB |
‹ | Left corner single quote | ‹ | \2039 |
› | Right corner single quote | › | \203A |
« | Double quote | " | \0022 |
′ | Single stroke | ′ | \2032 |
″ | Double stroke | ″ | \2033 |
‘ | Left single quote | ‘ | \2018 |
’ | Right single quote | ’ | \2019 |
‚ | Bottom single quote | ‚ | \201A |
“ | Left double quote | “ | \201C |
” | Right double quote | ” | \201D |
„ | Bottom double quote | „ | \201E |
❜ | Bold single leading comma | ❜ | \275C |
❛ | Bold single rotated top comma | ❛ | \275B |
& | Ampersand | & | \0026 |
‘ | Apostrophe (single quote) | " | \0027 |
§ | Paragraph | § | \00A7 |
© | Copyright sign | \00A9 | |
¬ | Negation sign | ¬ | \00AC |
® | Registered trademark mark | ® | \00AE |
¯ | Macron | ¯ | \00AF |
° | Degree | ° | \00B0 |
± | Plus or minus | ± | \00B1 |
¹ | Superscript "1" | ¹ | \00B9 |
² | Superscript "2" | ² | \00B2 |
³ | Superscript "3" | ³ | \00B3 |
¼ | One quarter | ¼ | \00BC |
½ | A half | ½ | \00BD |
¾ | Three quarters | ¾ | \00BE |
´ | Accent mark | ´ | \00B4 |
µ | Micro | µ | \00B5 |
¶ | Paragraph mark | ¶ | \00B6 |
· | Multiplication sign | · | \00B7 |
¿ | Inverted question mark | ¿ | \00BF |
ƒ | Florin sign | ƒ | \0192 |
™ | Trademark sign | ™ | \2122 |
List marker | . | \2022 | |
… | Ellipsis | … | \2026 |
‾ | Overlining | ‾ | \203E |
– | Em dash | - | \2013 |
- | Em dash | — | \2014 |
‰ | ppm | ‰ | \2030 |
} | Right curly brace | } | \007D |
{ | Left curly brace | { | \007B |
= | Equal sign | = | \003D |
≠ | Inequality sign | ≠ | \2260 |
≅ | Congruence (geometric equality) | ≅ | \2245 |
≈ | Almost equal | ≈ | \2248 |
≤ | Less than or equal | ≤ | \2264 |
≥ | Greater than or equal | ≥ | \2265 |
∠ | Corner | ∠ | \2220 |
⊥ | Perpendicular (up button) | ⊥ | \22A5 |
√ | Square root | √ | \221A |
∑ | N-ary summation | ∑ | \2211 |
∫ | Integral | ∫ | \222B |
※ | Footnote sign | ※ | \203B |
÷ | Division sign | ÷ | \00F7 |
∞ | Infinity sign | ∞ | \221E |
@ | Dog symbol | @ | \0040 |
[ | Left square bracket | [ | \005B |
] | Right square bracket | ] | \005D |
Arrows
Appearance | Designation | HTML code | CSS code |
← | Left arrow | ← | \2190 |
Up arrow | \2191 | ||
→ | Right arrow | → | \2192 |
↓ | Arrow to down | ↓ | \2193 |
↔ | Left-right arrow | ↔ | \2194 |
↵ | Down and left arrow – carriage return sign | ↵ | \21B5 |
⇐ | Double left arrow | ⇐ | \21D0 |
⇑ | Double up arrow | ⇑ | \21D1 |
⇒ | Double arrow to the right | ⇒ | \21D2 |
⇓ | Double down arrow | ⇓ | \21D3 |
⇔ | Double left-right arrow | ⇔ | \21D4 |
➠ | Flying arrow | ➠ | \27A0 |
➤ | Arrowhead | ➤ | \27A4 |
➥ | Curved arrow pointing down and to the right | ➥ | \27A5 |
➦ | Curved arrow pointing up and to the right | ➦ | \27A6 |
➳ | Arrow to the right | ➳ | \27B3 |
↺ | ↺ | \21BA | |
↻ | Round arrow with counterclockwise tip | ↻ | \21BB |
⇧ | Thick hollow up arrow | ⇧ | \21E7 |
↩ | Left arrow with hook | ↩ | \21A9 |
➫ | Downward sloping arrow | ➫ | \27AB |
⬇ | Filled down arrow | ⬇ | \2B07 |
⬆ | Filled up arrow | ⬆ | \2B06 |
Card suits, zodiac signs and currency icons
Appearance | Designation | HTML code | CSS code |
♠ | "Spades" | ♠ | \2660 |
♣ | "Clubs" | ♣ | \2663 |
"Hearts" | \2665 | ||
♦ | "Diamonds" | ♦ | \2666 |
♡ | Contour "Hearts" | ♡ | \2661 |
♢ | Contour "Tambourines" | ♢ | \2662 |
♤ | Peaks Contour | ♤ | \2664 |
♧ | Outline "Clubs" | ♧ | \2667 |
¢ | Cent | ¢ | \FFE0 |
£ | GBP | £ | \FFE1 |
₽ | Russian ruble | ₽ | \20BD |
¥ | Yen or Yuan | ¥ | \00A5 |
€ | Euro | € | \20AC |
$ | Dollar | $ | \0024 |
₴ | Hryvnia sign | ₴ | \20B4 |
₹ | Indian Rupee | ₹ | \20B9 |
圓 | CNY | 圓 | \5713 |
₸ | Kazakhstani tenge | ₸ | \20B8 |
♈ | Aries | ♈ | \2648 |
♉ | Taurus | ♉ | \2649 |
♊ | Twins | ♊ | \264A |
♋ | Cancer | ♋ | \264B |
♌ | a lion | ♌ | \264C |
♍ | Virgo | ♍ | \264D |
♎ | Scales | ♎ | \264E |
♏ | Scorpion | ♏ | \264F |
♐ | Sagittarius | ♐ | \2650 |
♑ | Capricorn | ♑ | \2651 |
♒ | Aquarius | ♒ | \2652 |
♓ | Fish | ♓ | \2653 |
Greek alphabet
Letter | lowercase | capitals | ||
symbol | html code | symbol | html code | |
α | Α | |||
β | Β | |||
γ | Γ | |||
δ | Δ | |||
ε | Ε | |||
ζ | Ζ | |||
η | Η | |||
θ | Θ | |||
ι | Ι | |||
κ | Κ | |||
λ | Λ | |||
μ | Μ | |||
ν | Ν | |||
ξ | Ξ | |||
ο | Ο | |||
π | Π | |||
ρ | Ρ | |||
σ | Σ | |||
ς | ||||
τ | Τ | |||
υ | Υ | |||
φ | Φ | |||
χ | Χ | |||
ψ | Ψ | |||
ω | Ω |
How to use it in practice
Regardless of the CMS, adding an article is done using a visual editor and an HTML version. All special characters in the encoding can only be inserted in the second case. To use the tools correctly, it is recommended to take note of the tables that show the code and external representation.
Please note that if you insert a sign in the visual representation of an article, the element will be converted into the corresponding code in HTML. When manually entering information, consider the case, which affects the final result.
Typewritten text consists of printed characters - graphic symbols.
Graphic symbols are symbols that have a visible display in the text.
All graphic symbols are collected in a set of a single universal Unicode system.
Insert a Unicode graphic symbol into an html document
- the main and only purpose for this table.
You can insert a symbol into an HTML document in one of the following ways:
- copy the symbol image from the browser window to the window of your visual html editor
- copy the html code of the symbol directly into the code of the html document
- insert visual into visual
- insert code into code.
The font for a symbol, its size and color in HTML can be set with code like:
CHARACTER_CODE
Where,
Arial - font,
10px - font size in pixels,
#ff0000 - font color code (red)
For example:
☎ - character font size 30px,
☎ - symbol font size 30px, color - red
☎ - character font size 20px,
☎ - symbol font size 10px.
Note Recommended fonts for inserting special characters are Arial, Verdana and Tahoma. These fonts display Unicode characters correctly and are themselves correctly supported by web applications.
- "Symbol"
(visible symbol display)
From this column you can copy the symbol image and paste it into the html text editor window. The symbol will be copied with a font size of 20px. After copying is complete, it may be necessary to individually adjust the font size directly to the copied character. - "Name"
(only for important or unclear characters)
Explanation of the purpose of the symbol, its scope, examples... - "Mnemonics"
A mnemonics is an alphabetic construction of the form ", denoting the alphabetic code of a character in HTML. It is inserted directly into the html code of an html document. Mnemonics are very popular among professional layout designers. They are perfectly memorized by humans and are supported by all html applications. Each mnemonics contains an alphabetic name (designation ) of its symbol and a service sign (&), which serves as a signal for the browser to read the code and is not displayed on the monitor screen.The name of each mnemonic is unique and easy to read, because it is derived from the English word that characterizes the symbol.Mnemonics (Greek) - the art of remembering something. Mnemonics are used to facilitate the perception of difficult-to-memorize information when the object of memorization is brought into an associative state with something.
- "Code"
Code - the numeric decimal code of a character in HTML, like &. Inserted directly into the html code of an html document. The decimal code consists of a number indicating the serial number of the character in the Unicode system and several service characters (& and #), which serve as a signal for the browser to read the code and are not displayed on the monitor screen. The decimal code is widely used and used due to its versatility and ease of perception.
Control characters in HTML (XHTML)
Control characters in HTML (XHTML) are service characters of the HTML language that are used in the HTML layout of a web page. Any browser must support these characters, since without them it is impossible to display HTML text correctly. Control characters are not displayed in the text and, when entered directly from the keyboard, are interpreted by the browser as punctuation marks calling for some action to be performed when the page is drawn on the screen.
It is allowed to use control characters in ordinary texts, where they symbolize universal concepts and are interpreted by the browser as ordinary typographical characters. When using service symbols in HTML texts in this way, you need to enter not the value of the symbol itself, but its HTML code. Because, I repeat, otherwise the browser will perceive the service symbol as a call to action and will not correctly display the HTML text on the monitor screen.
Control symbols and their HTML code are known and understood by all browsers without exception, which cannot be said, alas, about other symbols that may be displayed incorrectly in different browsers or, even worse, not displayed at all.
Syntax and punctuation
space of length N (regular space) | |||||
space of length M (longspace) | |||||
- | soft hyphen (unprintable character) | - | | ||
‑ | hyphen | ‑ |
|||
---|---|---|---|---|---|
- | dash of length N (regular dash) | - | – | ||
— | dash of length M (em dash) | — | — | ||
. | dot | . | |||
, | comma | , | |||
… | ellipsis | … |
… |
||
: | colon | : | |||
; | semicolon | ; | |||
! | exclamation mark | ! ǃ |
|||
? | question mark | ? | |||
@ | "dog" | @ | |||
* | "star" | * | |||
# | "lattice" | # | |||
‘ | single upper left quote | ‘ | ‘ |
||
’ | single upper right quote | ’ | ’ |
||
‚ | single lower right quote | ‚ | ‚ |
||
“ | double top left quote | “ | “ |
||
” | double upper right quote | ” | ” |
||
„ | double lower right quote | &bdquo | „ |
||
« | double left corner quotation mark (Rus) | « | « | ||
» | double right corner quotation mark (Rus) | » | » | ||
́ | accent mark, example: Vasya | ́ | |||
" | apostrophe, example: You"I | " | |||
´ | acute, example: Vasya | ´ | ´ | ||
¶ | paragraph (unprintable character) | ¶ | ¶ | ||
§ | paragraph | § | § | ||
ˆ | accent (inverted bird) | ˆ | ˆ |
||
˜ | small tilde | ˜ | ˜ |
||
¦ | vertical dotted line | ¦ | ¦ | ||
( | left parenthesis | ( | |||
) | right parenthesis | ) | |||
〈 | left angle bracket | 〈 | 〈 | ||
〉 | right angle bracket | 〉 | 〉 | ||
‹ | left angle bracket, option | ‹ | ‹ | ||
› | right angle bracket, option | › | › | ||
[ | square bracket left | [ | |||
] | square bracket right | ] | |||
/ | slash - slash character | / | |||
\ | backslash | \ | |||
⁄ | slash (division sign) | ⁄ | ⁄ | ||
ǀ | vertical bar | ǀ | |||
ǁ | double vertical bar | ǁ | |||
‾ | overlining, example: Vasya‾vasya | ‾ | ‾ | ||
¯ | macron, example: Vasya¯vasya | ¯ | ¯ |
Trademarks and currency
+ | plus | + | + | ||
---|---|---|---|---|---|
− | minus | − | - − |
||
= | equals | = | |||
± | plus or minus | ± | ± | ||
× | multiplication sign | × | × | ||
÷ | division sign | ÷ | ÷ | ||
⋅ | dot operator (middle of line) | ⋅ | · ⋅ |
||
∗ | asterisk operator (middle of line) | ∗ | ∗ | ||
∼ | tilde operator | ∼ | ∼ | ||
. | list marker (middle of line) | . | |
||
¹ | superscript "1" | ¹ | ¹ | ||
² | superscript "2" | ² | ² | ||
³ | superscript "3" | ³ | ³ | ||
Superscript and subscript in HTML (XHTML) can be inserted using tags And , respectively: NUMBER Superscript→ NUMBER Superscript NUMBER Subscript→ NUMBER Subscript |
|||||
½ | fraction "one half" | ½ | ½ | ||
⅓ | fraction "one third" | ⅓ | |||
¼ | fraction "one-fourth" | ¼ | ¼ | ||
¾ | fraction "three quarters" | ¾ | ¾ | ||
№ | number sign | № | |||
% | percent | % | |||
‰ | ppm | ‰ | ‰ |
||
° | degrees | ° | ° | ||
′ | prime (minutes, feet) | ′ | ′ | ||
″ | double prime (seconds, inches) Example 1: 30° 25′ 12″ Example 2: 25′ 12 ″ |
″ | ″ | ||
µ | micro | µ | µ | ||
π | Pi | π | π | ||
ƒ | function sign (not to be confused with "integral") |
ƒ | ƒ |
||
∫ | integral | ∫ | ∫ | ||
∅ | crossed zero, empty set (not to be confused with "diameter") |
∅ | ∅ | ||
⌀ | diameter (not to be confused with the crossed out Latin “o”) | ⌀ | |||
ø | Latin "o" diagonally crossed out | ø | ø | ||
Ø | Latin capital "O" diagonally crossed out | Ø | Ø | ||
∏ | work mark | ∏ | ∏ | ||
∑ | summation sign | ∑ | ∑ | ||
√ | radical (square root or x root) |
√ | √ | ||
∝ | proportionally | ∝ | ∝ | ||
∞ | infinity | ∞ | ∞ | ||
∠ | corner | ∠ | ∠ | ||
⊥ | orthogonal (perpendicular) | ⊥ | ⊥ | ||
∴ | sign "therefore" | ∴ | ∴ | ||
≅ | approximately equal | ≅ | ≅ | ||
≈ | almost equal | ≈ | ≈ | ||
≠ | not equal | ≠ | ≠ | ||
≡ | identically | ≡ | ≡ | ||
≤ | less or equal | ≤ | ≤ | ||
≥ | more or equal | ≥ | ≥ | ||
∧ | logical AND | ∧ | ∧ | ||
∨ | logical OR | ∨ | ∨ | ||
⊕ | plus sign in a circle (direct amount) |
⊕ | ⊕ | ||
⊗ | multiplication sign in a circle (cross product, arrow from observer) |
⊗ | ⊗ | ||
ʘ | dot in a circle (arrow to observer) |
ʘ |
✵ ✵ |
|||||
Hello, dear readers of the blog site! Those who have at least superficially familiarized themselves with it have probably already taken note, albeit in general terms. This means they have an idea of what HTML symbols are generally used in the document code.
In today's article we will try to figure out what a space is in HTML and in what cases you can use whitespace characters when formatting the code itself for easy reading. We will find out when it is necessary to use a non-breaking space, and also get acquainted with other special characters (or, as they are also called, mnemonics).
In fact, I would advise you not to ignore the topic of using various special characters, since this is an important component that allows you to complete your study of hypertext markup language. In general, the information provided in this publication will definitely not be superfluous. Well, now to the point.
Spaces and whitespace characters in HTML
First there is an important note to make. There are special keys on a computer keyboard that allow you to separate text (more on this below). However, only a wide spacebar provides separation between words not only in the editor, but also in the browser window. There are nuances when breaking lines and indenting from edges.
As you know, the display of certain elements in a web browser is determined by tags. To format the text, the well-known , which is block-based, is used. That is, its content is located across the entire available width.
To wrap lines within paragraph P, you need to use a single BR tag, with which you can do this. Let's say we need to insert into the text some lines from a poem that we write in a text editor:
Despite the fact that the lines of the verse are located correctly and hyphens are made in the right places, everything will look different in the browser:
To achieve the same display in a web browser window, you need to write BR at each line break:
Now we have achieved the task and the poetic lines will be displayed completely correctly in the browser:
Thus, the necessary line breaks are completed. Another feature that needs to be noted here is that multiple spaces coming one after another are displayed by the web browser as one. You can verify this if in the same editor you try to put not one, but several spaces between two words and, by clicking on the “Save” button, look at the result in the browser.
Space, tab and line break
Basically, with these whitespace characters We get to know each other as soon as we start working with the text in the editor and format it in the required form. To implement such a task, there are special keys, each of which corresponds to its own space character:
- Spacebar is the widest key on a computer keyboard (without a label);
- Tab - a key on the left with the inscription “Tab” and two arrows pointing in different directions;
- Line break - "Enter" key.
However, as I said above, we get the final desired result not only in a text editor, but also in a browser, only when we use the first key. All three keys (including tab and line break are useful when formatting HTML code. Let’s say this is what a code fragment looks like in NotePad++ (there’s a lot of information about this editor) when displaying all whitespace characters:
We get code that is easy to read and understand thanks to spaces. Orange arrows indicate indentations created using the Tab key, and CR and LF symbols indicate line breaks created using the Enter key.
Containers nested within one another are viewed, and opening and closing tags are clearly visible. In this form, this code can be easily edited. Now compare it with the same code, which does not have such text division:
In the same way, using whitespace characters, you can write CSS rules that will visually look clear and digestible:
After you bring all the styles to a common denominator and completely finish editing the styles file, you can perform the editing by removing all spaces from the code. This is necessary to increase , which is very important when promoting a resource.
Special characters (or mnemonics) in HTML code
Now let's look at the cases in which it is necessary to use the special characters that I mentioned at the beginning of the article. HTML special characters, sometimes called mnemonics, were introduced to solve a long-standing problem with encodings that arose in hypertext markup language.
When you type text on the keyboard, the characters of the language you are using are encoded. In the web browser, the typed text will be displayed using the fonts you selected as a result of the reverse decoding operation.
The fact is that there are many such encodings; now we have no goal of analyzing them in detail. It’s just that each of them may be missing certain symbols, which, however, need to be displayed. Let's say you feel the urge to write single quotation marks or an accent mark, but these icons are simply not included in the set.
In order to eliminate this problem, a system of special symbols was introduced, which includes a huge number of different mnemonics. They all start with an ampersand "&" and usually end with a semicolon ";". At first, each special character had its own digital code. For example, for a non-breaking space, which we will consider in more detail below, the following entry will be valid:
But after some time, the most common symbols were assigned letter analogues (mnemonics) to make them easier to remember. Let's say for the same non-breaking space it looks like this:
As a result, the browser displays the corresponding symbol. The list of mnemonics is very voluminous, most commonly used special characters in HTML you can discover from below following table:
symbol | code | mnemonics | description |
---|---|---|---|
non-breaking space | |||
narrow space (en-width as letter n) | |||
wide space (em-width as letter m) | |||
– | - | – | en dash (en-dash) |
- | — | — | em dash (em dash) |
| - | | soft transfer |
A | ́ | stress is placed after the "stress" letter | |
© | © | copyright | |
® | ® | ® | registered trademark mark |
™ | ™ | ™ | trademark sign |
º | º | º | spear of Mars |
ª | ª | ª | mirror of Venus |
‰ | ‰ | ‰ | ppm |
π | π | π | pi (use Times New Roman) |
¦ | ¦ | ¦ | vertical dotted line |
§ | § | § | paragraph |
° | ° | ° | degree |
µ | µ | µ | micro sign |
¶ | ¶ | ¶ | paragraph mark |
… | … | … | ellipsis |
‾ | ‾ | ‾ | overlining |
´ | ´ | ´ | accent mark |
№ | № | number sign | |
🔍 | 🔍 | Magnifying glass (tilted to the left) | |
🔎 | 🔎 | Magnifying glass (tilted to the right) | |
signs of arithmetic and mathematical operations | |||
× | × | × | multiply |
÷ | ÷ | ÷ | divide |
< | < | less | |
> | > | > | more |
± | ± | ± | plus/minus |
¹ | ¹ | ¹ | degree 1 |
² | ² | ² | degree 2 |
³ | ³ | ³ | degree 3 |
¬ | ¬ | ¬ | negation |
¼ | ¼ | ¼ | one quarter |
½ | ½ | ½ | a half |
¾ | ¾ | ¾ | three quarters |
⁄ | ⁄ | ⁄ | decimal point |
− | − | − | minus |
≤ | ≤ | ≤ | less or equal |
≥ | ≥ | ≥ | more or equal |
≈ | ≈ | ≈ | approximately (almost) equal |
≠ | ≠ | ≠ | not equal |
≡ | ≡ | ≡ | identically |
√ | √ | √ | square root (radical) |
∞ | ∞ | ∞ | infinity |
∑ | ∑ | ∑ | summation sign |
∏ | ∏ | ∏ | work mark |
∂ | ∂ | ∂ | partial differential |
∫ | ∫ | ∫ | integral |
∀ | ∀ | ∀ | for everyone (only visible if in bold) |
∃ | ∃ | ∃ | exists |
∅ | ∅ | ∅ | empty set |
Ø | Ø | Ø | diameter |
∈ | ∈ | ∈ | belongs |
∉ | ∉ | ∉ | do not belong |
∋ | ∋ | ∗ | contains |
⊂ | ⊂ | ⊂ | is a subset |
⊃ | ⊃ | ⊃ | is a superset |
⊄ | ⊄ | ⊄ | is not a subset |
⊆ | ⊆ | ⊆ | is a subset or equal to |
⊇ | ⊇ | ⊇ | is a superset or equal |
⊕ | ⊕ | ⊕ | plus in a circle |
⊗ | ⊗ | ⊗ | multiplication sign in a circle |
⊥ | ⊥ | ⊥ | perpendicular |
∠ | ∠ | ∠ | corner |
∧ | ∧ | ∧ | logical AND |
∨ | ∨ | ∨ | logical OR |
∩ | ∩ | ∩ | intersection |
∪ | ∪ | ∪ | Union |
currency signs | |||
€ | € | € | Euro |
¢ | ¢ | ¢ | Cent |
£ | £ | £ | Lb |
¤ | ¤t; | ¤ | Currency sign |
¥ | ¥ | ¥ | Yen and Yuan sign |
ƒ | ƒ | ƒ | Florin sign |
markers | |||
. | simple marker | ||
○ | ○ | circle | |
· | · | · | midpoint |
† | † | cross | |
‡ | ‡ | double cross | |
♠ | ♠ | ♠ | peaks |
♣ | ♣ | ♣ | clubs |
hearts | |||
♦ | ♦ | ♦ | diamonds |
◊ | ◊ | ◊ | rhombus |
✏ | ✏ | pencil | |
✎ | ✎ | pencil | |
✐ | ✐ | pencil | |
✍ | ✍ | hand | |
quotes | |||
" | " | " | double quote |
& | & | & | ampersand |
« | « | « | left typographic quotation mark (herringbone quotation mark) |
» | » | » | right typographic quotation mark (herringbone quotation mark) |
‹ | ‹ | single corner quote opening | |
› | › | single corner quote closing | |
′ | ′ | ′ | prime (minutes, feet) |
″ | ″ | ″ | double prime (seconds, inches) |
‘ | ‘ | ‘ | top left single quote |
’ | ’ | ’ | top right single quote |
‚ | ‚ | ‚ | lower right single quote |
“ | “ | “ | quote-foot left |
” | ” | ” | quote foot upper right |
„ | „ | „ | quote foot lower right |
❛ | ❛ | single English opening quotation mark | |
❜ | ❜ | single English closing quotation mark | |
❝ | ❝ | opening double quotation mark | |
❞ | ❞ | closing double quotation mark | |
arrows | |||
← | ← | ← | left arrow |
up arrow | |||
→ | → | → | right arrow |
↓ | ↓ | ↓ | arrow to down |
↔ | ↔ | ↔ | left and right arrow |
↕ | ↕ | up and down arrow | |
↵ | ↵ | ↵ | carriage return |
⇐ | ⇐ | ⇐ | double left arrow |
⇑ | ⇑ | ⇑ | double up arrow |
⇒ | ⇒ | ⇒ | double right arrow |
⇓ | ⇓ | ⇓ | double down arrow |
⇔ | ⇔ | ⇔ | double arrow left and right |
⇕ | ⇕ | double up and down arrow | |
▲ | ▲ | triangle up arrow | |
▼ | ▼ | triangle down arrow | |
triangle right arrow | |||
◄ | ◄ | triangle left arrow | |
stars, snowflakes | |||
☃ | ☃ | Snowman | |
❄ | ❄ | Snowflake | |
❅ | ❅ | Snowflake sandwiched by shamrocks | |
❆ | ❆ | Fat sharp-angled snowflake | |
★ | ★ | Shaded star | |
☆ | ☆ | Blank star | |
✪ | ✪ | Unfilled star in a filled circle | |
✫ | ✫ | Filled star with an open circle inside | |
✯ | ✯ | Rotating star | |
⚝ | ⚝ | Drawn white star | |
⚪ | ⚪ | Middle open circle | |
⚫ | ⚫ | Middle filled circle | |
⚹ | ⚹ | Sextile (snowflake type) | |
✵ | ✵ | Eight-pointed rotating star | |
❉ | ❉ | Star with spherical ends | |
❋ | ❋ | Bold eight-pointed drop-shaped star-propeller | |
✺ | ✺ | Sixteen-pointed asterisk | |
✹ | ✹ | Twelve-pointed star | |
✸ | ✸ | Bold eight-pointed straight filled star | |
✶ | ✶ | Six-pointed filled star | |
✷ | ✷ | Eight-pointed straight filled star | |
✴ | ✴ | Eight-pointed star | |
✳ | ✳ | Eight-pointed star | |
✲ | ✲ | Star with blank center | |
✱ | ✱ | Fat star | |
✧ | ✧ | Pointed four-pointed open star | |
✦ | ✦ | Pointed four-pointed filled star | |
⍟ | ⍟ | Star in a circle | |
⊛ | ⊛ | Snowflake in a circle | |
clock, time | |||
⏰ | ⏰ | Watch | |
⌚ | ⌚ | Watch | |
⌛ | ⌛ | Hourglass | |
⏳ | ⏳ | Hourglass |
Cases of using some special characters, including non-breaking space and soft hyphen
If you have already studied the table a little, you have received confirmation of what I said above, that to display all special characters, a digital code () or its alphabetic analogue (symbolic mnemonics) is used, where instead of a set of hash marks and numbers, letters () are written.
Now let's see when to use these codes. Let's say in an article you need to indicate some HTML tag for informational purposes, for example,
Therefore, from the same HTML table of special characters we take the corresponding codes and the entire entry will look like this:
In addition, in order to display in the browser not the ampersand sign itself, but its designation in form , you need to add its code from the table:
footer
Then the browser will display exactly the record of the mnemonics that need to be applied to display the FOOTER tag. It’s a little confusing, but on this page you can practice this aspect by entering mnemonics for the corresponding characters in the “HTML” field and using the “Run” button, and in the “Result” area getting the result of their display in the browser:
Please note that I ensured that the text was wrapped using the already mentioned BR tag so that the characters themselves were displayed not in one line, but in a column for convenience.
Go ahead. Sometimes combinations appear in the text that are undesirable to be separated into different lines. Let's say, “1000 rubles.” It would be logical to either leave it on the top line, or if there is not enough space, move the entire structure to a line below.
This is especially true if users use devices with different screen widths, including mobile ones. Indeed, in this case, the web browser formats the text, adapting to new conditions. And if the text looks correct at standard monitor sizes, then if they change, everything can change.
For these cases it is provided HTML non-breaking space, which I already mentioned. Let me remind you that in this case the space code is as follows:
And it needs to be inserted between two sets of signs that need to be linked:
1000 rub.
Now the browser will under no circumstances separate them, even if text formatting is required to display it correctly.
There is also a situation when a very long word does not fit into the free space and you need to move part of it. How can I predefine a newline in this case if necessary? For this there is special soft hyphen character-, which needs to be placed in the place where the word needs to be broken:
Long long long long long word
If a situation arises when a word needs to be hyphenated, then a gap is formed at the location of the soft hyphen mnemonic, where a hyphen (hyphen) appears, and the rest of the word appears on the next line below.
However, again, it will be useful to see this whole thing, including examples of continuous and soft transfer, in practice:
In the window of this editor, you can change the size of the “Result” viewing field by grabbing the edge of this area with the left mouse button and, without releasing it, drag it to the left to reduce the width. Then a real situation arises when the browser begins to reformat the content to display it correctly.
And the transfer is carried out, which was provided for in the examples I described. However, you yourself can move the viewing window, expanding and narrowing it, and visually verify this.