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 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 acquainted as soon as we start working with the text in the editor and format it in in the right 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 you can easily edit. Now compare it with the same code, which does not have such text division:

In the same way, using whitespace characters, you can also write CSS rules, which 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 lack 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:

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,