Lesson 5.

In this tutorial, we:
1. Let's learn how to make the html code more convenient and easy to read for us.
2. Let us examine how to correctly carry out the wrapping of a text line.

We make the html code handy.

Now our code is clear and easy to read, since it contains little text and almost no tags. When we create a more complex page, there will be many tags, so it will be difficult to find the right one.

To avoid the mess of tags, you need to initially arrange the tags and lines so that they are visually perceived easier. When the browser reads information from the html page, it doesn't care how many spaces or how many empty lines there are in the code.

I've changed the text in the page code relative to the one we created, but it doesn't matter. The left and right pictures show the same code. Both options will be displayed by the browser on the monitor screen in exactly the same way. Agree, working with the code shown on the right will be much easier than with the one on the left.

The code we are reviewing is very simple, but even now there is a noticeable difference in visual perception. There are no specific rules for "putting things in order", each master decides for himself how it is more convenient for him to work.

Html line break. The & ltbr & gt tag.

Pay attention to the picture. In the first version, the text is written in one line, in the second version in two lines.

The browser will display both options the same way. The text will be written on one line:

Why is this so, you ask? Indeed, in one of the codes, part of the text has been transferred to another line. It would be logical if in the browser some of the text would also be transferred to another line, but html has its own logic in this regard. If we make a line break in the html code, then for the browser it is equivalent to one space (like a normal space between words in the text). If we move part of the text not one line down, but 2 or 3 (any number), then the browser will still count this distance as one ordinary space between words and when displayed on the screen, the text will be written in one line.

& Ltbr & gt tag

When we got acquainted with tags in the third lesson, I mentioned that there are tags that do not require closing. Tag & ltbr & gt one of them, it serves for line breaks.
Let's apply it in code:

We have inserted a tag & ltbr & gt into our html code and now when the file is run through the browser, part of the text will be transferred to the next line.
* Do not forget to save changes in Notepad (Ctrl + S) and refresh the page in the browser (F5).

This time we'll talk about HTML whitespace. At first glance, the topic does not seem important and it is not really necessary, but I can assure you that this is far from the case. Whitespace characters in HTML have, first, a clear and definite purpose, and second, a predefined behavior. I think that the assignment of whitespace characters in HTML is more or less clear: whitespace characters are mainly used for hTML formatting code, but not only for this. But with the behavior of whitespace characters, I think, not everything is clear. The point is that browsers handle whitespace in a special way, which is why I wrote that whitespace has a well-defined behavior.

Immediately, we note that HTML divides whitespace characters into types: HTML tab, space and line break. And the browser handles each of these types in a special way, in addition, HTML has special tags that tell the browser how to handle whitespace. In this post, you will learn about what whitespace is for in HTML, what types of whitespace in HTML are divided into, and how the browser handles them.

We will also consider in detail each of the whitespace characters separately. The post will describe the following question:

• how the browser handles gaps in HTML documente and what is the difference between regular space and non-breaking space;
• what is it used for tabs in HTML;
• how the browser treats line breaks, for which line breaks are needed in HTML and what does the line break character look like in HTML;
• how to force browser to force line break;
• and how to preserve all whitespace in HTML.

I hope that the verbal explanations and examples from the post will help you understand how the browser handles whitespace.

What are whitespace characters for in HTML

In HTML, as in any language in which we develop something, there are whitespace characters. So let's first deal with the question: what are whitespace characters for in HTML? The answer is actually very simple. Whitespace is used in HTML for two purposes. The first purpose or first purpose of whitespace in HTML is to format the HTML document.

We use whitespace characters to make HTML code readable and understandable for us and for other developers. Agree that a code without white space would not be very readable and would not be very convenient to edit. The HTML language standard is loyal to whitespace, which means that we can use them in the document as we like, or we can write continuous code.

The second purpose of whitespace characters in HTML is, one might say, logical, and we use whitespace characters to separate words from each other, since texts without spaces would be completely unreadable. There are situations when you accidentally put several spaces between words inside an HTML tag, in which case the browser will "compress" these spaces to one. In the future, we will be convinced of this and see an example.

Hopefully with assigning whitespace characters in HTML, we figured out and now we can move on. The whitespace topic is pretty simple but important. Basically, there are no complex topics in HTML, and nothing is irrelevant, since HTML is a standard to be followed.

Types of whitespace characters in HTML

Since everything is clear with the purpose of whitespace characters, it is worth understanding the types of whitespace characters. In HTML, and in general, whitespace can be separated as follows: space, tab and line break... It is good to describe whitespace characters in words, but I would like to see them with my own eyes, who has syntax highlighting, but now it is important for us that Notepad ++ can display whitespace characters.

Pay attention to the figure: this is a screenshot from Notepad ++, which is opened from the post in which we talked about. Orange arrow - this is a tab in an HTML document... Since I am working on Windows 10 OS, then line wrapping in HTML is displayed by two characters: CR and LF (this is a tradition coming from typewriters, in the Linux operating system, line breaks are denoted by one LF symbol). But the space in Notepad ++ is displayed as a red dot, if you look closely at the screen, you will notice it.

So, Notepad ++ helped us see whitespace in HTML document: tab, line break and space. However, we will not see most of these whitespace characters in HTML pagethat the browser will generate for us. We have already said that HTML is not sensitive to whitespace, and browsers discard all whitespace between tags.

We also want to draw your attention to the fact that each whitespace character takes up space on your hard drive, the size of the whitespace character in HTML depends on the encoding of the document. Therefore, if you are running and trying to reduce the loading speed of the site, then on the hosting you can try to remove all the whitespace characters in between, thereby reducing the size of the document.

Space and non-breaking space in HTML

Let's now take a look at each of the whitespace characters separately. We'll start with spaces in HTML... So, we already know that the browser ignores all whitespace between tags. But how the browser handles whitespace within tags is an important issue, since it affects how the text will be displayed on the page. Let's see this with an example. Open any editor convenient for you, you can even use a regular notepad, but I will recommend you, which has excellent capabilities for working with HTML, and type the following code:

Save the file with the .html extension to any folder convenient for you and open it in a browser, you will see the following picture:

We can see that in the first HTML paragraph, the browser has "converted" all extra spaces and non-whitespace characters into one space. And in the second paragraph we have a slightly different situation. Here we use a special character, which is often said to be non-breaking space in HTML... The point is that it is not entirely correct to say a non-breaking space in HTML, since this is a special encoding sequence.

Non-breaking spaces in HTML documents, as in any other documents, are used to tell the program that opens this document (in our case, the browser) that these words are inseparably connected by a space, in other words, if we write "Hello world!", then the browser will never transfer the word "world ! " without the word "Hello" on a new line, the transfer will be carried out only together. Plus everything else non-breaking space in HTML can be usedto put some spaces between words inside HTML tags.

Pay attention to the figure, which shows the browser window: the browser ignored all line breaks, despite the fact that we used a non-breaking space inside the HTML tag

Let's summarize: the browser ignores all whitespace outside the HTML tags, and the browser compresses all whitespace characters inside HTML tags up to one spaceif no non-breaking space is used inside the HTML tag.

HTML tab or another whitespace character

HTML tab is another whitespace character... The most common use of tabs in HTML is to format HTML code in the editor. Tabs should not be used inside an HTML tag

Which we will talk about next. The point is that tabulation does not have a fixed size. The tab stop size can be adjusted both in the editor and in the browser. Therefore, it is impossible to say exactly how the tabulation will be displayed for this or that user on.

Tabs in HTML can be customized (and not only in HTML)because it is multiple spaces combined together. To write a space tab, press the Tab key (I think this will work in any editor). Tabs in HTML can be used to format code (do not confuse code formatting with direct formatting of text in HTML), but it should not be used inside HTML tags, since each user will display it in accordance with his settings, and therefore in a different way. Perhaps we said everything there is to know about using tabs in HTML documents and editors.
HTML line break or third whitespace. Line break character
Line break in HTML, and not only in HTML, is done by pressing the Enter key. Line break character in operating systems Linux: LF... In operating rooms windows systems CR LF, in mac systems OS prior to version nine line feed was the sequence  CR... So we already know that browser ignores line breaks in HTML documentwherever they are located.
Line break in HTML used mainly for editing and formatting code to make it readable and easy to edit, do not neglect the option to put a line break to make it easier for yourself and the people who work with you to read the code.
How the browser does line breaks
So, we have already figured out how the browser interprets whitespace characters and, in principle, decided for ourselves the question of what whitespace characters are: tab, space, non-breaking space, line break, we need for code formattingto make it readable. But, we would not tell the whole truth if we did not talk about how the browser does line wrapping when it lacks the viewport.
The thing is that for the browser, space characters are landmarks by which it determines how lines will be wrapped in the event that it is not possible to fit them into the viewport. Let's try to implement a simple example. Let's create simple HTML document. Open any convenient editor, for example, and write the following code:
 
 








Text written without space characters will not be carried
The browser uses whitespace to wrap lines when there is not enough view to fit the entire line






 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
> Whitespace characters HTML<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
h1
> Text written without space characters will not be carried<
/
h1
>
<
p
> The browser uses space characters to wrap
strings in the case when the area is not enough to
fit in a line<
/
p
>
<
/
body
>
<
/
html
>


And then open the example in a browser and reduce the viewport to a minimum, you will see something like the picture below.

In the case of the HTML header, the browser didn't wrap anything and left the line as it is. But in the case of an HTML paragraph, the browser has an understanding that how to wrap lines due to the fact that in the text of the paragraph there are whitespace characters that the browser is guided by in order to carry out line breaks.
So we have already found three uses of whitespace in HTML: the first and foremost is that whitespace is used to format the code, the second is that the browser, focusing on whitespace, makes line breaks in the event that it lacks the viewport, and the third use of whitespaces in HTML is about separating words in text.
Force line break in HTML. HTML tag 


So, we found out that the browser sneezed at line breaks in HTML, but what should we do if there is a need to make a line break where we want, and not where the viewport ends in the browser? For example, we want to publish poems, but publishing them with a paragraph is not very correct and inconvenient. In such situations, the HTML tag saves us and, moreover, it saves us very much. 
.
BR is an HTML inline element and a single HTML tag. Executes HTML tag 
 one single simple, but important function – makes a forced line break... When the browser sees the HTML tag 
, it renders the HTML element that users see as line breaks. Let's make a forced line break using an example, open any editor convenient for you, in my opinion one of the most convenient editors is, and copy the following code:
 
 








White birch 
 Under my window 
 Covered with snow 
 Like silver.






 


 
<
!
DOCTYPE
html
>
<
html
lang
=
"ru-RU"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
> Whitespace characters HTML<
/
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"style.css"
/
>
<
/
head
>
<
body
>
<
p
> White birch<
br
> Podmoimoknom<
br
>
Covered in the snow<
br
> Precisely silver.<
/
p
>
<
/
body
>
<
/
html
>


The quatrain from Yesenin's work will be displayed as follows:

Each line of the poem is written with new line, in principle, this is what we achieved. So the tag 
 is used for forced line break in HTML... If you write two or more BR tags in a row, the browser will generate as many forced line breaks as there are tags 
 he will meet in the document.
An important feature of the tag 
 is that all whitespace characters that are located in the code before it and all characters that are located after it are ignored. Therefore, you can safely form a forced line break with this tag, without fear that an extra whitespace character will "come out" somewhere. It is worth noting that the tag 
 has one clear that tells the browser how to handle the next one 
 string if text wraps around a floating HTML element, but we'll talk about that in another post.
Preserving whitespace in HTML. HTML tag 

Now let's discuss the problem of Vladimir Mayakovsky ... Rather, his style, more precisely, how can we write Vladimir Mayakovsky's poems in an HTML document.
Do we really have to use special HTML characters, such as a non-breaking space and after each line a tag 
? The answer is of course not. The developers of the HTML standard took this moment into account and adopted a special HTML tag into the standard 
. Tag 
Or preformatted into Russian can be translated as author's formatting.

This tag allows preserve whitespace in HTML... When the browser encounters text inside the tag 
It displays it as it is, that is, with the preservation of all whitespace characters: line breaks, tabs and just a space will be saved inside the tag 
As you wrote them.

It's worth noting that the HTML tag 
It is paired and the PRE HTML element is block. Actually, the tag got the name of the author's formatting because of the reason we voiced above: the browser saves all whitespace characters of the text, inside this tag in the form in which the author wrote them. let's try keep all whitespace in HTMLusing the tag 
And let's see how the whitespace is shown in the browser.


The document code is very simple, the verse by V. Mayakovsky is placed in a container 
Now let's see how the browser will handle whitespace inside HTML element PRE.


We see that all the whitespace characters have been preserved as we wrote them. Now we have made sure that the tag 
Really preserves whitespace in HTML pages.

So, let's summarize all of the above.  There are three kinds of whitespace in HTML: tab, line break, and space. Tabs in HTML should only be used to format HTML code in the editor. HTML line breaks browsers ignore them, "compressing" them to a space, just like tabs. To create a newline character in HTML use the tag 
.
Spaces in HTML are needed for two purposes: the browser determines how to carry out line wrapping based on spaces, spaces are needed to make the text readable. HTML supports special encoding characters like non-breaking space character in HTML can be used when you want to write several spaces in a row (otherwise the browser will shorten them to one) or you want to tell the browser not to wrap words on new lines without each other.

Hello dear readers of the blog site. A little earlier, we already managed to talk about that, we also learned about the design in it. Today we have next in turn the concept of a space in HTML, and also the associated formatting of the code when writing it (for the convenience of its subsequent reading and perception).
Well, due to the fact that we will touch on the topic of non-breaking space and soft hyphenation, we will have to focus our attention on the so-called special characters or mnemonics used in the Html language, which will allow you to add web document a bunch of additional characters, like the one already mentioned above. But first things first.
Spaces and whitespace characters in Html language
Before moving on to the issue of text formatting using specially designed tags (paragraph, headings, etc.), I want to dwell on the point how spaces, line breaks (Enter) and tabs are interpreted in the CTML language, how the breakdown is done text in the browser window when it is resized.
True, for this kind of visual formatting (which will not be visible on the web page), most often it is not the spaces themselves that are used, but the tabulation and line break characters. There is such a rule - when you start writing nested Html tagthen indent with tabs (the Tab key on the keyboard), and when you close this tag, remove the indentation (the Shift + Tab key combination on the keyboard).
This should be done so that the opening and closing tags would be on the same vertical level (at the same number of tabs from the right edge of the page of your Html editor, for example, Notepad ++, which I wrote about). In addition, I advise you to make several line breaks immediately after writing the opening element and immediately write the closing one at the same level (number of tabs), so that you don't forget to do it later.
Those. the opening and closing elements should be at the same level vertically, and the inner tags should be shifted by one tab stop and the closing and opening elements should be positioned again at the same level.
For simple web documents this may seem overkill, but when creating more or less complex documents, they the code will become much more descriptive and readable due to the abundance of spaces, and it will be much easier to spot errors due to the symmetrical arrangement of tags.
Special characters or mnemonics in Html code
So, now let's talk about the so-called special characters, the usability of which I announced at the beginning of this article. Special characters are also sometimes called mnemonics or substitutions. They are designed to solve a problem that has arisen for a long time in the hypertext markup language, related to the encodings used.
When you type text from the keyboard, the characters of your language are encoded according to a predetermined algorithm, and then they are displayed on the site using the fonts you use (where to find and how to install for the site) by decoding.
There are a lot of encodings, but for the Html language, the extended version of encodings was adopted by default.
In this encoding of the text, it was possible to record only 256 characters - 128 from ASCII and 128 more for the letters of the Russian language. As a result, there was a problem with the use of characters on sites that are not in ASCII and are not Russian letters included in the Windows 1251 (CP1251) encoding. Well, you took it into your head to use a tilde or apostrophe, and such possibilities are originally in the used html language coding is not included.
It was for such cases that substitutions were invented, or, in other words, mnemonics. Initially special characters were digital, but then for the most common of them their letter counterparts were added for ease of memorization.
In general terms, a mnemonic is a character that begins with an ampersand "&" and ends with a semicolon ";". It is on these grounds that the browser, when parsing the Html code, extracts special characters from it. The ampersand in the numeric substitution code must be immediately followed by a pound sign "#", sometimes referred to as a hash. And only then follows the digital code the desired character in unicode encoding.
More than 60,000 characters can be written in Unicode - the main thing is that the mnemonic symbol you need is supported by the font used on your site. There are fonts with support for almost all Unicode characters, and there are options with only a certain set of characters.
The complete list of special characters will be huge, but most commonly used mnemonics you can borrow, for example, from this table:
Symbol
Html code
Decimal 
 the code
Description



non-breaking space
 

 
 
narrow space (en-letter-wide)
 

 
 
wide space (em-wide in the letter m)
–
-
–
narrow dash (en-dash)
-
—
—
wide dash (em -dash)
­
-
­
soft transfer
a

́
stress, placed after the "stressed" letter
©

©
copyright
®
®
®
registered trade mark
™
™
™
trademark mark
º
º
º
spear of mars
ª
ª
ª
mirror of venus
‰
‰
‰
ppm
π
π
π
pi (use Times New Roman)
¦
¦
¦
vertical dotted line
§
§
§
paragraph
°
°
°
degree
µ
µ
µ
micro sign
¶
¶
¶
paragraph mark
…
…
…
ellipsis
‾
‾
‾
overline
´
´
´
accent mark
№

№
number sign
🔍

🔍
Magnifier (tilted left)
🔎

🔎
Magnifier (tilted to the right)
signs of arithmetic and mathematical operations
×
×
×
multiply
÷
÷
÷
to split
<
<

less
>
>
>
more
±
±
±
plus / minus
¹
¹
¹
degree 1
²
²
²
degree 2
³
³
³
degree 3
¬
¬
¬
negation
¼
¼
¼
one quarter
½
½
½
a half
¾
¾
¾
three quarters
⁄
⁄
⁄
fractional bar
−
−
−
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 (visible only if in bold)
∃
∃
∃
exists
∅
∅
∅
empty set
Ø
Ø
Ø
diameter
∈
∈
∈
belongs
∉
∉
∉
not belong
∋
∋
∗
contains
⊂
⊂
⊂
is a subset
⊃
⊃
⊃
is a superset
⊄
⊄
⊄
is not a subset of
⊆
⊆
⊆
is a subset of or equal to
⊇
⊇
⊇
is a superset or equal to
⊕
⊕
⊕
plus in a circle
⊗
⊗
⊗
multiplication sign in a circle
⊥
⊥
⊥
perpendicular
∠
∠
∠
angle
∧
∧
∧
logical AND
∨
∨
∨
logical OR
∩
∩
∩
crossing
∪
∪
∪
union
currency signs
₽

₽
Ruble. The ruble sign must be used with a skip from the number. Unicode Standard 7.0. If you don't see the image, update your Unicode fonts.
€
€
€
Euro
¢
¢
¢
Cent
£
£
£
Lb
¤
¤
¤
Currency sign
¥
¥
¥
Yen and yuan sign
ƒ
ƒ
ƒ
Florin sign
markers

.

simple marker
○

○
a circle
·
·
·
midpoint
†

†
cross
‡

‡
double cross
♠
♠
♠
peaks
♣
♣
♣
clubs



hearts
♦
♦
♦
diamonds
◊
◊
◊
rhombus
✏

✏
pencil
✎

✎
pencil
✐

✐
pencil
✍

✍
arm
quotes
"
"
"
double quote
&
&
&
ampersand
«
«
«
left typographic quotation mark (herringbone quotation mark)
»
»
»
right typographic quotation mark (herringbone quotation mark)
‹

‹
single angle quotation mark opening
›

›
closing single angle quotation mark
′
′
′
stroke (minutes, feet)
″
″
″
double prime (seconds, inches)
‘
‘
‘
upper left single quotation mark
’
’
’
upper right single quotation mark
‚
‚
‚
bottom right single quote
“
“
“
quotation mark-foot left
”
”
”
quotation mark-foot upper right
„
„
„
quotation mark-foot right lower
❛

❛
single English opening quotation mark
❜

❜
single English closing quotation mark
❝

❝
double english quotation mark opening
❞

❞
english double quotation mark closing
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
▲

▲
triangular up arrow
▼

▼
triangular down arrow



triangular right arrow
◄

◄
triangular left arrow
stars, snowflakes
☃

☃
Snowman
❄

❄
Snowflake
❅

❅
Snowflake trapped by shamrocks
❆

❆
Bold pointed snowflake
★

★
Shaded star
☆

☆
Unpainted star
✪

✪
Unfilled star in filled circle
✫

✫
A filled star with an open circle inside
✯

✯
Spinning star
⚝

⚝
Traced white star
⚪

⚪
Middle open circle
⚫

⚫
Medium filled circle
⚹

⚹
Sextile (like a snowflake)
✵

✵
Eight-pointed rotating star
❉

❉
Spherical star
❋

❋
Bold eight-pointed teardrop-shaped propeller star
✺

✺
Sixteen-pointed asterisk
✹

✹
Twelve-pointed filled star
✸

✸
Bold eight-pointed rectilinear filled star
✶

✶
Six-pointed filled star
✷

✷
Eight-pointed rectilinear filled star
✴

✴
Eight-pointed filled star
✳

✳
Eight-pointed star
✲

✲
An asterisk with an open center
✱

✱
Bold star
✧

✧
Pointed four-pointed unpainted star
✦

✦
Pointed four-pointed shaded star
⍟

⍟
Star in a circle
⊛

⊛
Snowflake in a circle
clock, time
⏰

⏰
Clock
⌚

⌚
Clock
⌛

⌛
Hourglass
⏳

⏳
Hourglass
There is a rather interesting method of obtaining html code mnemonic for the sign you need. To do this, it will be enough to open the editor Microsoft Word, create a new document and select from top menu "Insert" - "Symbol" (I'm using the 2003 version, so I don't know how to do the same operation in later versions).
In the window that opens, you need to select a font, for example, Times New Roman (or any other that will certainly be present on most computers of your site visitors - Courier or Arial, for example).
Add from the list that opens to your word document all the special characters you need and save this Word document as a web page (selected from the ".html" drop-down list when saving). Well, then you just have to open this web page in any Html editor (the same Notepad ++ will do) and you will see all the digital codes of the mnemonics you need:
The method is a bit complicated, but if you feel the urge to use some rare special character on your site page, it will be easier than looking for tables like the one above on the Internet. You will need to paste the resulting special character code in the right place and instead of it on the web page the browser will display the character you need (for example, a non-breaking space).
Non-breaking space and soft hyphenation in examples
As I mentioned above and as you can see from the table of special characters given just above, some mnemonics in Html have received, in addition to digital, a symbolic designation for easier memorization. Those. instead of the pound sign "#" (hash), words are used in character variants. For example, the same non-breaking space can be written either as (numeric mnemonic) or as (symbolic).
When writing articles, if you need to insert an ampersand (&) or an open angle bracket (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.
That is, if you are writing an article in which you will need to insert into the text, for example, display the tag< body> or you just need to insert a less than sign (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.
Therefore, you will need to insert the following construction to solve a similar problem:
The same applies to the display of the code of the mnemonics themselves, because they begin with an ampersand. You will need to insert the code into the text with the replacement of the ampersand sign by its substitution (special character):
 
This will need to be done to get on the page<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.
Also, you will most likely use a non-breaking space, which on a web page will look like a regular space, but the browser will not perceive it as a space character at all and will not carry out a transfer on it (for example, it will be appropriate for such phrases as 1400 GB, etc., which would not be desirable to be carried by hyphenation on different lines):
1400 GB.
Sometimes the opposite situation may arise, when there are very long words in the text and you want to make sure that, if necessary, the browser could break these words with hyphenation... For such purposes, a special symbol "soft transfer" is provided -
Long pre-length & shy word;
If there is a need to jump to another line, the browser will hyphenate instead of soft hyphenation mnemonics and send the rest of the word to the next line. If there is enough space to place all this word on one line, then the browser will not draw any line feed. It's as simple as that.
 
Good luck to you! See you soon on the pages of the blog site
you can watch more videos by going to
");">
You might be interested
MailTo - what is it and how to create a link in Html for sending an Email 
Tags and attributes of H1-H6 headings, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard 
How to insert link and picture (photo) into HTML - IMG and A tags
Hello dear readers of the blog site! Those who at least superficially managed to get acquainted with, probably already took note, albeit in general terms. This means that they have an idea of \u200b\u200bwhat HTML characters are generally used in the document code.
In today's article, we will try to figure out what a space in HTML is, in which cases it is possible to use whitespace characters when formatting the code itself for easy perception. 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 the study of the 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
An important point needs to be made first. There are special keys on the computer keyboard that allow you to implement text separation (more on this below). However, only the wide spacebar provides a section between words not only in the editor, but also in the browser window. There are nuances with line breaks and margins.
As you know, the display of certain elements in a web browser is determined by tags. For text formatting, a well-known one is used, which is block. That is, its content is spread over 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 positioned correctly and the hyphenation is carried out 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 in each line break:

Now we have reached the completion of the task and in the browser the verse lines will be displayed absolutely correctly:

Thus, the required line breaks are completed. Here it is also necessary to note such a feature that multiple spaces, following one after another, are displayed by the web browser as one. You can be convinced of 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 acquainted immediately, as we start working with the text in the editor and format it in the desired form. To implement such a task, there are special keys, each of which corresponds to its own space character:
Space is the widest key on a computer keyboard (no label);
Tabulation - the key on the left with the "Tab" inscription and two arrows pointing in different directions;
Line break - "Enter" key.
However, as I said above, the final desired result not only in the text editor, but also in the browser, we get only when we use the first key. All three keys (including tabulation and line break are useful when formatting HTML code. For example, this is how a piece of code looks in NotePad ++ (there is a good deal of information about this editor) when all whitespace characters are displayed:


We get code that is easy to read and understand, thanks to the spaces. The orange arrows mark the indentation created with the Tab key, and the CR and LF line breaks, carried out with the Enter kavisha.
Containers nested inside one another are viewed, opening and closing tags are well distinguished. In this form, this code can be easily edited. Now compare it with the same code, which does not have such text splitting:
In the same way, using whitespace characters, you can write CSS rules that will visually look understandable and digestible:


After you bring all the styles to a common denominator and completely finish editing the style file, you can expose by removing all spaces from the code. This is necessary for promotion, which is very important when promoting a resource.
Special characters (or mnemonics) in HTML code
Now we will analyze in what cases it is necessary to use special characters, which I mentioned at the beginning of the article. HTML special characters, sometimes called mnemonics, were introduced to solve a long-standing problem with encodings in hypertext markup language.
When you type on the keyboard, the characters of the language you are using are encoded. In the web browser, the typed text will be displayed in the fonts of your choice as a result of the reverse decoding operation.
The fact is that there are many such encodings, now we have no goal to parse them in detail. It's just that each of them may lack certain symbols, which, however, need to be displayed. For example, you have an urge to write single quotes or an accent mark, and these icons are trite to be absent from the set.
In order to eliminate this problem, a system of special characters was introduced, which includes a huge number of various mnemonics. They all begin 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 record will be valid:
But after a while, the most common symbols were assigned alphabetic counterparts (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, the most commonly used HTML special characters you can find from the following table below:
symbol
the code
mnemonics
description






non-breaking space
 


 

 

narrow space (en-letter-wide)
 


 

 

wide space (em-wide in the letter m)
–

-

–

narrow dash (en-dash)
-

—

—

wide dash (em -dash)
­

-

­

soft transfer
a


́

stress, placed after the "stressed" letter


©



©

copyright
®

®

®

registered trade mark
™

™

™

trademark mark
º

º

º

spear of mars
ª

ª

ª

mirror of venus
‰

‰

‰

ppm
π

π

π

pi (use Times New Roman)
¦

¦

¦

vertical dotted line
§

§

§

paragraph
°

°

°

degree
µ

µ

µ

micro sign
¶

¶

¶

paragraph mark
…

…

…

ellipsis
‾

‾

‾

overline
´

´

´

accent mark
№



№

number sign
🔍



🔍

Magnifier (tilted left)
🔎



🔎

Magnifier (tilted to the right)
signs of arithmetic and mathematical operations
×

×

×

multiply
÷

÷

÷

to split
<

<


less
>

>

>

more
±

±

±

plus / minus
¹

¹

¹

degree 1
²

²

²

degree 2
³

³

³

degree 3
¬

¬

¬

negation
¼

¼

¼

one quarter
½

½

½

a half
¾

¾

¾

three quarters
⁄

⁄

⁄

fractional bar
−

−

−

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 (visible only if in bold)
∃

∃

∃

exists
∅

∅

∅

empty set
Ø

Ø

Ø

diameter
∈

∈

∈

belongs
∉

∉

∉

not belong
∋

∋

∗

contains
⊂

⊂

⊂

is a subset
⊃

⊃

⊃

is a superset
⊄

⊄

⊄

is not a subset of
⊆

⊆

⊆

is a subset of or equal to
⊇

⊇

⊇

is a superset or equal to
⊕

⊕

⊕

plus in a circle
⊗

⊗

⊗

multiplication sign in a circle
⊥

⊥

⊥

perpendicular
∠

∠

∠

angle
∧

∧

∧

logical AND
∨

∨

∨

logical OR
∩

∩

∩

crossing
∪

∪

∪

union
currency signs
€

€

€

Euro
¢

¢

¢

Cent
£

£

£

Lb
¤

¤t;

¤

Currency sign
¥

¥

¥

Yen and yuan sign
ƒ

ƒ

ƒ

Florin sign
markers


.



simple marker
○



○

a circle
·

·

·

midpoint
†



†

cross
‡



‡

double cross
♠

♠

♠

peaks
♣

♣

♣

clubs






hearts
♦

♦

♦

diamonds
◊

◊

◊

rhombus
✏



✏

pencil
✎



✎

pencil
✐



✐

pencil
✍



✍

arm
quotes
"

"

"

double quote
&

&

&

ampersand
«

«

«

left typographic quotation mark (herringbone quotation mark)
»

»

»

right typographic quotation mark (herringbone quotation mark)
‹



‹

single opening angle quotation mark
›



›

closing single angle quotation mark
′

′

′

stroke (minutes, feet)
″

″

″

double prime (seconds, inches)
‘

‘

‘

upper left single quotation mark
’

’

’

upper right single quotation mark
‚

‚

‚

bottom right single quote
“

“

“

quotation mark-foot left
”

”

”

quotation mark-foot upper right
„

„

„

quotation mark-foot right lower
❛



❛

single English opening quotation mark
❜



❜

single English closing quotation mark
❝



❝

double english quotation mark opening
❞



❞

english double quotation mark closing
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
▲



▲

triangular up arrow
▼



▼

triangular down arrow






triangular right arrow
◄



◄

triangular left arrow
stars, snowflakes
☃



☃

Snowman
❄



❄

Snowflake
❅



❅

Snowflake trapped by shamrocks
❆



❆

Bold pointed snowflake
★



★

Shaded star
☆



☆

Unpainted star
✪



✪

Unfilled star in filled circle
✫



✫

A filled star with an open circle inside
✯



✯

Spinning star
⚝



⚝

Traced white star
⚪



⚪

Middle open circle
⚫



⚫

Medium filled circle
⚹



⚹

Sextile (like a snowflake)
✵



✵

Eight-pointed rotating star
❉



❉

Spherical star
❋



❋

Bold eight-pointed teardrop-shaped propeller star
✺



✺

Sixteen-pointed asterisk
✹



✹

Twelve-pointed filled star
✸



✸

Bold eight-pointed rectilinear filled star
✶



✶

Six-pointed filled star
✷



✷

Eight-pointed rectilinear filled star
✴



✴

Eight-pointed filled star
✳



✳

Eight-pointed star
✲



✲

An asterisk with an open center
✱



✱

Bold star
✧



✧

Pointed four-pointed unpainted star
✦



✦

Pointed four-pointed shaded star
⍟



⍟

Star in a circle
⊛



⊛

Snowflake in a circle
clock, time
⏰



⏰

Clock
⌚



⌚

Clock
⌛



⌛

Hourglass
⏳



⏳

Hourglass
Use cases for some special characters, including non-breaking space and soft hyphenation
If you have already studied the table a little, then you received confirmation of the words I said above that a digital code () or its alphabetic analogue (symbolic mnemonics) is used to display all special characters, where letters () are written instead of a combination of a lattice and numbers.
Now let's see when it is necessary to apply these codes. For example, in an article, you need to specify some HTML tag for informational purposes, for example,