Using whitespace characters to format HTML code

Hello, dear readers! Those of you who have managed to get at least a superficial acquaintance with the lessons on the basics of the hypertext markup language have probably already taken note of what HTML is, even if only in general terms. And therefore, you have an idea of what HTML characters 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 whitespace characters can be used when formatting the code itself for easy readability. We will learn when it is necessary to use a non-breaking space, and we will also get acquainted with other special characters (or, as they are also called, entities).

Actually, I would advise 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 redundant. Well, now let’s get down to business.

Spaces and whitespace characters in HTML

First, it is necessary to make an important note. There are special keys on a computer keyboard that allow you to implement text separation (more on this below). However, only the wide spacebar provides a separation between words not only in the editor, but also in the browser window. When wrapping lines and indenting from the edge, there are nuances.

As you know, the display of certain elements in a web browser is determined by tags. For text formatting, the well-known paragraph tag P is used, which is block-level. That is, its content is located across the entire available width.

To break lines inside the P paragraph, you need to use the single BR tag, with which this can be accomplished. Let’s say we need to insert some lines of a poem into the text that we are writing in a text editor:

Despite the fact that the lines of the poem are located correctly and line breaks are made in the right places, everything will look different in the browser:

To achieve the same display in the web browser window, you need to add BR at each line break:

Now we have achieved the task and the lines of poetry will be displayed perfectly correctly in the browser:

Thus, the necessary line breaks are completed. It should also be noted here that multiple spaces following one another are displayed by the web browser as a single one. You can verify this if in the same WordPress admin editor you try to put not one, but several spaces between two words and, clicking on the “Save” button, look at the result in the browser.

Space, tab and line break

Basically, we get acquainted with these whitespace characters as soon as we start working with text in the editor and format it in the desired way. To implement such a task, there are special keys, each of which corresponds to its own whitespace character:

• Space – the widest key on the computer keyboard (unlabeled);
• Tab – the key on the left labeled “Tab” and with two arrows pointing in opposite directions;
• Line break – the “Enter” key.

However, as I said above, the final desired result not only in the text editor, but also in the browser, is obtained only when using the first key. All three keys (including tab and line break) are useful to use when formatting HTML code. Suppose, here is what a code fragment in NotePad++ looks like (here is a sensible article about this editor) when displaying all whitespace characters:

We get code that is easy to read and understand thanks to spaces. Orange arrows indicate indents created using the Tab key, and CR and LF characters indicate line breaks made using the Enter key.

Containers nested one inside the other are visible, opening and closing tags stand out well. In this form, this code can be easily edited. And now compare it with the same code that does not have such text separation:

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 compress the CSS by removing all spaces from the code. This is necessary to increase website loading speed, which is very important when promoting a resource.

Special characters (or entities) in HTML code

Now let’s look at the cases where it is necessary to use the special characters that I mentioned at the beginning of the article. HTML special characters, sometimes called entities, were introduced to solve a long-standing encoding problem that arose in the hypertext markup language.

When you type text from 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 thing is that there are quite a few such encodings, and it is not our goal to discuss them in detail right now. It’s just that each of them may lack certain characters that, however, need to be displayed. Say you really need to write single quotes or an accent mark, and these icons are simply missing from the set.

To eliminate this problem, a system of special characters was introduced, which includes a huge number of various entities. All of them begin with an ampersand “&” and usually end with a semicolon “;”. Initially, each special character corresponded to its own numeric code. For example, for a non-breaking space, which we will look at in more detail below, the following entry is valid:

But after some time, letter equivalents (entities) were assigned to the most common characters to make them easier to remember. For example, for the same non-breaking space, it looks like this:

As a result, the browser displays the corresponding character. The list of mnemonics is very extensive; you can find the most frequently used HTML special characters in the following table:

Use cases for certain special characters, including the non-breaking space and soft hyphen

If you have already studied the table a bit, you have received confirmation of what I said above, that to display all special characters, either a digital code ( ) or its letter equivalent (character entity) is used, where instead of a combination of a hash and numbers, letters are written ( ).

Now let’s look at when it is necessary to use these codes. Suppose in an article you need to indicate some HTML tag for informational purposes, for example, <footer>. If you type angle brackets from the keyboard (and such an opportunity exists), the browser will perceive such a construct as an opening tag, and not as a simple text fragment.

Therefore, from the same HTML special characters table, we take the corresponding codes, and the entire entry will look like this:

In addition, to display not the ampersand sign itself in the browser, but its designation in the form of &lt;footer&gt;, you need to add its code from the table:

Then the browser will output precisely the record of entities that need to be used to display the FOOTER tag. A bit confusing, but on this page you can practice this aspect by entering the entities for the corresponding characters in the “HTML” field and clicking the “Run” button, and in the “Result” area you will get the result of their display in the browser:

Please note that I ensured the text wrapping using the already mentioned BR tag so that the characters themselves are displayed not in one line, but in a column for convenience.

Let’s move on. Sometimes combinations appear in the text that are undesirable to split across different lines. Say, “1000 rub.” it will be logical either to leave it on the upper line or, if space is lacking, to move the entire structure to the line below.

This is especially true if users use devices with different screen widths, including mobile ones. After all, in this case, the web browser formats the text, adapting to new conditions. And if at standard monitor sizes the text looks correct, then when they change, everything can change.

For these cases, the HTML non-breaking space is provided, 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 characters that need to be linked:

Now the browser will under no circumstances separate them, even if text formatting is required for its correct display.

There is also a situation when a very long word does not fit into the available space and it is required to wrap a part of it. How to predetermine a wrap to a new line in this case if necessary? For this, there is a soft hyphen special character &shy;, which needs to be placed in the place where the word needs to be broken:

If a situation arises when a word needs to be wrapped, then at the location of the soft hyphen entity, a break is formed where a hyphen sign will appear, and the remaining part of this word will end up on the next line below.

However, again, it will be useful to track all this business, including examples of non-breaking and soft wraps, firsthand 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, dragging it to the left to reduce the width. Then a real situation arises when the browser begins to reformat the content for its correct display.

And the wrap is carried out, which was provided in the examples I described. However, you can move the viewing window yourself, expanding and narrowing it, and visually verify this.

Material provided by Goldbusinessnet.com