Special characters. HTML Special Characters

Not all characters that you see on the keyboard are allowed to be used in the text of the HTML document. However, this is logical. If each tag begins with a (<) и заканчивается символом (>), then it’s quite logical that these characters cannot be specified inside plain text. These characters have special meaning in HTML documents. When the browser sees them, he thinks these are HTML tags and tries to interpret them as such.
  To solve the problem of adding characters that are forbidden to be entered in the text of an HTML document, a set of special characters has been developed - sequences that replace characters prohibited for entering from the keyboard. Characters that are not present on your keyboard can also be replaced with special characters. Each such sequence (reference-mnemonics) necessarily begins with an ampersand (&) and ends with a semicolon (;). Between (&) and (;) you can enter:

• special character name (& name;);
• the numeric code that is entered after the ‰ (& num;) sign, that is, when typing a special character by specifying its numeric code, use the following entry: (&& num; code;);

Non-breaking space

The main purpose of an inextricable space () (from non-breaking space) - separate words, but prohibit the transition to a new line at this point. Since the size of the browser window is inconsistent, the transition to a new line in the paragraph occurs automatically. In this case, the browser will break the line anywhere where there is a space or hyphen. According to the rules of spelling, there are language constructions that cannot be torn. Designs with an inextricable space, for example, include:

• surnames with initials;
• long dashes with the word preceding them;
• monosyllables with the next word;
• digits followed by units.

• 15 m / s
• 100 km / h

As you already know, in HTML, several consecutive regular spaces are replaced by a single space. If you write 10 spaces in the text, the browser will delete 9 of them. To add real spaces to the text, you can use a non-breaking space () .

Quotes.

In printing, there are three types of quotation marks: double angled quotation marks or "herringbone" (""), typographic quotation marks ("") and handwritten "paws" (""). When working with program codes, you will use double direct quotes ("") and single direct quotes ("").
   By tradition, in the Russian language, the main type of quotation marks are considered to be "herringbone". In the Christmas trees, the characters correspond to «   and » . In many publications, instead of "herringbone", typographic quotes and double straight quotes are also used.
  The left and right typographic quotes correspond to the characters “   and ”   respectively, and the bottom left quotation mark - „ .
  Direct double quotation marks correspond to a special character " .

The use of special quotation marks is shown in the following example:

Example: Using quotation marks

A hyphen and a dash.

In printing, there are three very similar characters: a long dash, a short dash and a hyphen. Of these, there is only one on the computer keyboard - this is a hyphen. It is it that is usually used in all cases when a hyphen or dash is required in the text. Nevertheless, certain punctuation rules should be followed regarding the use of these characters.
  So, a hyphen (-) applies only within words or between numbers. A long dash (-) is placed between words in a sentence and separated from these words by spaces. The long dash corresponds to the link-mnemonics — . A short dash (-) is placed between numbers without letters or between words that are capitalized, and is also used as a minus sign in mathematical formulas. There is no space between the short dash and the words. Short dash corresponds to a link-mnemonics - .

The hyphen and dash are shown in the following example:

Example: Special characters - and -

• Try it yourself "

  Time is money...

The web page has been opening for too long.
  It should load in 2-4 seconds.
  Time is money...

List of some popular HTML special characters

Varieties of special characters

On a regular keyboard, you will not find most of the mathematical, technical, geometric and other special characters.
  To use such characters in an HTML page, you can use the corresponding mnemonic names.

In the following example, you can see how the same character can be displayed using different codes.

Hello dear readers of the blog site. A little earlier we had already talked about how we also learned about the design in it. Today we have in turn the concept of a gap in HTML, and the formatting of the code associated with it 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 inextricable space and soft hyphenation, we will have to focus on the so-called special characters or mnemonics used in the Html language, which will allow you to add many additional characters to the web document code, like the one mentioned above . But first things first.

Spaces and whitespace in the HTML language

Before moving on to the question of formatting text using tags specially designed for this (paragraph, headings, etc.), I want to dwell on the moment in which HTML interprets spaces, line breaks (Enter) and tabulation, how breakdown is performed text in the browser window when you resize it.

True, for this kind of visual formatting (which will not be visible on the web page), it is most often not spaces that are used, namely tabs and line breaks. There is such a rule - when you start writing an embedded HTML tag, then indent with tab   (Tab key on the keyboard), and when you close this tag, then indent (Shift + Tab key combination on the keyboard).

You need to do this so that the opening and closing tags are at the same vertical level (the same number of tabs from the right edge of the page of your Html editor, for example, Notepad ++, about which I wrote). In addition, I advise you immediately after writing the opening element to make several line breaks and immediately register the closing one at the same level (the number of tabs), so as not to forget to do it later.

Those. the opening and closing elements should be at the same level vertically, and we shift the internal tags by one tab and place the closing and opening again at the same level.

For simple web documents, this may seem overkill, but when creating more or less complex ones, they the code will become much more visual   and readable due to the abundance of spaces, and also it will be much easier to notice errors due to the symmetric 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 sometimes called mnemonics or wildcards. They are designed to solve a problem that arose a long time ago in the language of hypertext markup associated with the encodings used.

When you type text from the keyboard, your language characters are encoded according to a predefined algorithm, and then they are displayed on the site using the fonts you use (where to find and how to install it for the site) by decoding.

There are a lot of encodings, but for Html, an extended version of encodings was adopted by default.

In this text encoding, it was possible to record only 256 characters - 128 from ASCII and another 128 for letters of the Russian language. As a result, there was a problem with the use of signs on sites that are not included in ASCII and are not letters of the Russian language that are part of the encoding Windows 1251 (CP1251). Well, you decided to use a tilde or an apostrophe, and the possibilities for such an encoding used by the Html language were not inherent.

It was for such cases that substitutions were invented, or, in other words, mnemonics. Originally special characters had a digital form of recording, but then for the most common of them, their letter counterparts were added for ease of memorization.

In general terms, mnemonics is a character that begins with the ampersand "&" and ends with a semicolon ";". It is precisely on these grounds that the browser, when parsing Html code, selects special characters from it. Immediately after the ampersand in the digital substitution code, the pound sign "#", which is sometimes called a hash, should follow. And only then follows the digital code of the desired Unicode character.

You can write more than 60,000 characters in Unicode - the main thing is that the mnemonic character you need is supported by the font used on your site. There are fonts that support almost all Unicode characters, and there are options with only a specific set of characters.

The full list of special characters will be huge, but most commonly used mnemonics   you can borrow, for example, from this table:

There is quite an interesting way to get HTML code mnemonics   for the sign you need. To do this, it will be enough to open the Microsoft Word editor, create a new document and select "Symbol" from the top menu (I use 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 obviously be present on most computers of visitors to your site - Courier or Arial, for example).

Add from the list that appears in your Word document all the special characters you need and save this Word document as a web page (select ".html" from the 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 it wants to use some rare special symbol on the page of your site, it will be easier than finding tables on the Internet like the one shown above. You will need to paste the received special character code into the right place and instead of it, on the web page, the browser will display the character you need (for example, an inextricable space).

Non-breaking space and soft transfer in examples

As I mentioned above, and as you can see from the table of special characters above, some mnemonics in Html received, in addition to digital, a symbol designation for their easier memorization. Those. instead of the pound sign "#" (hash) in symbolic variants, words are used. For example, the same inextricable space can be written either as (digital mnemonics) or as (symbolic).

When writing articles, if you need to insert an ampersand (&) or an opening angle bracket (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

That is, if you are writing an article in which you will need to insert in the text, for example, displaying a tag< body>   or you just need to insert a smaller sign (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Therefore, you will need to insert the following construction to solve this problem:

The same goes for displaying 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 with its substitution (special symbol):

This will need to be done to get to the page<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Also, you will most likely use an inextricable space, which on the web page will look like a regular space, but the browser will not perceive it as a white space at all and will not carry over it   (for example, this will be appropriate for phrases such as 1400 GB, etc., which it would not be desirable to carry by hyphenation across different lines):

1400 GB.

Sometimes the opposite situation may arise when very long words are present in the text and you want to make the browser appear when necessary could break these words by hyphenation. For such purposes, a special symbol "soft transfer" is provided -

Longline & nbsp;

When it becomes necessary to move to another line, the browser instead of a soft hyphen mnemonic will put a hyphen and send the rest of the word to the next line. If there is enough space to place all this word on one line, the browser will not draw any line feeds. This is how simple it is.

Good luck to you! See you soon on the blog pages site

you can watch more videos by going to

You may be interested

MailTo - what is it and how in Html to create a link for sending an Email
Tags and attributes for headings H1-H6, horizontal line Hr, line feed Br and paragraph P in accordance with Html 4.01
How to insert a link and a picture (photo) in HTML - IMG and A tags

Hello dear readers of the blog site! Those who at least superficially managed to get acquainted with, probably have already taken note, albeit in general terms. So, they have an idea of \u200b\u200bwhat kind of HTML characters are used in the document code.

In today's article, we will try to figure out what a gap is in HTML, in which cases you can apply whitespace when formatting the code itself for easy reading. We learn when it is necessary to use an inextricable 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 in HTML

An important point to make first. The computer keyboard has special keys that allow you to split text (a little more about this below). However, only the wide space bar provides a section 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, a well-known one that is blocky is used. That is, its content is located across the entire available width.

To wrap lines inside paragraph P, you need to use a single tag BR, with which this can be done. Let's say we need to insert into the text some lines from the poem that we write in a text editor:

Despite the fact that the lines of the verse are located 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 register BR at each line break point:

Now we have achieved the task and in the browser the poetic lines will be displayed correctly:

Thus, the necessary line breaks are completed. Here it is also worth noting such a feature that the web browser displays multiple spaces going one after another as one. You can make sure 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

In principle, with these whitespace   we get to know right away how we start working with text in the editor and format it in the right way. To implement this task, there are special keys, each of which corresponds to its own whitespace character:

• Space - the widest key on the computer keyboard (without an inscription);
• Tab - the left key with the inscription "Tab" and two arrows pointing in different directions;
• Line break - Enter key.

However, as I said above, the final desired result not only in a text editor, but also in the browser, we get only when using the first key. All three keys (including tabs and line breaks are useful for formatting HTML code. For example, let's look at a snippet of code in NotePad ++ (explanatory material about this editor) when displaying all whitespace characters:

We get code that is easy to read and understand thanks to spaces. The orange arrows indicate the indentation created using the Tab key, and the CR and LF characters line breaks performed using the Enter key.

You can see containers nested in one another, opening and closing tags stand out well. In this form, this code can be easily edited. Now compare it with the same code that doesn’t have a similar split of text:

In the same way, using whitespace characters, you can also write CSS rules that will visually look understandable and digestible:

After you bring all the styles to a common denominator and finish editing the style file completely, you can expose it 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 we will examine 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, have been introduced to solve the long-standing problem with encodings 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 of your choice as a result of the reverse decoding operation.

The fact is that there are a lot of similar encodings, now we do not have the goal of analyzing them in detail. It’s just that in each of them it may not get any symbols that, however, need to be displayed. Let’s say, it was up to you to write single quotes or an accent mark, and these icons are corny missing in the set.

In order to eliminate this problem, a system of special characters was introduced, which includes a huge number of very different mnemonics. They all begin with the ampersand “&” and usually end with a semicolon “;”. At first, each special character had its own digital code. For example, for an inextricable space, which will be discussed in more detail below, this entry will be valid:

But after some time, the most common characters were assigned alphabetic analogues (mnemonics) to make them easier to remember. Let's say for the same inextricable space, it looks like this:

As a result, the browser displays the corresponding character. The list of mnemonics is very voluminous, most commonly used HTML special characters   You can find from the following table below:

Cases of using some special characters, including inextricable space and soft hyphen

If you have already studied the table a little, you have received confirmation of the words I said above that to display all the special characters, a digital code () or its alphabetic analogue (symbolic mnemonics) is used, where letters () are written instead of a combination of lattices and numbers.

Now let's see when it is necessary to apply these codes. Let's say in the article you need to indicate some HTML tag for informative purposes, for example,