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.

SymbolNumeric codeSymbol nameDescription
" " " 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

SymbolNumeric codeSymbol nameDescription
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:

  1. Giving the article completeness and aesthetics. Special signs help you quickly understand dimensional values ​​or read a historical name in Latin or Greek.
  2. 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.
  3. 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
alpha α α Α Α
beta β β Β Β
gamma γ γ Γ Γ
delta δ δ Δ Δ
epsilon ε ε Ε Ε
zeta ζ ζ Ζ Ζ
this η η Η Η
theta θ θ Θ Θ
iota ι ι Ι Ι
kappa κ κ Κ Κ
lambda λ λ Λ Λ
mu μ μ Μ Μ
nude ν ν Ν Ν
xi ξ ξ Ξ Ξ
omicron ο ο Ο Ο
pi π π Π Π
ro ρ ρ Ρ Ρ
sigma σ σ Σ Σ
final sigma ς ς
tau τ τ Τ Τ
upsilon υ υ Υ Υ
fi φ φ Φ Φ
hee χ χ Χ Χ
psi ψ ψ Ψ Ψ
omega ω ω Ω Ω

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:

  1. copy the symbol image from the browser window to the window of your visual html editor
  2. copy the html code of the symbol directly into the code of the html document
Please understand that these are two different methods:
  1. insert visual into visual
  2. 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.

  1. "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.
  2. "Name"
    (only for important or unclear characters)
    Explanation of the purpose of the symbol, its scope, examples...
  3. "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.

  4. "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,

. If you type angle brackets from the keyboard (and there is such an option), the browser will perceive such a construction as an opening tag, and not as a simple fragment of text.

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.