Everyone who tried create websites in HTML faced this problem. Almost all HTML tags cut out extra spaces. And this time I will give you an example of this “cutting”, and also tell you how to make sure that the spaces are not cut out.
Let's start by writing a simple HTML code:
Some text Continued...
If you look at the result, you will see that all our spaces have been cut out and only one remains. And almost every tag does this.
There are three options display extra spaces in HTML. The first way is to use a tag<pre>:
Some text Continued...
As a result, you will see that the gaps remain, and this is exactly what we wanted.
But there is another way that I use regularly - the "" entity. This entity simply replaces the space character:
Some text Continued...
As a result, you will also see a whole series of spaces. For me, this method is better because you don’t need to use extra tags. But this is a matter of taste. Where is it needed? extra space in HTML, just insert "" and enjoy the result.
And finally last method- This using CSS . To do this, you just need to add this style:
P(
white-space: pre;
}
This method the fastest and simplest, however, I don’t use it, since in my practice there are few cases in which I have to add many consecutive spaces. And if they do happen, then I use the " " entity several times. In addition, white-space property not supported by all browsers (in particular, IE6 And IE7 do not support), which already limits the scope of this method.
In general, to summarize:
1) If any part of your text contains a lot of spaces in different places, then use the tag<pre>.
2) If you encounter a single moment somewhere where you need several spaces in a row, then use the entity " ";
3) If your entire page is made up of a bunch of consecutive spaces (although this happens extremely rarely), then use the property white-space with meaning pre.
If you want to know more about HTML, then take a look at my free course with an example of creating a website at HTML:
HTML simply ignores spaces. When writing code, pressing the spacebar, Enter or Tab keys is ignored. HTML keystrokes are interpreted as whitespace characters, in simple words– means of formatting code (characters, words, text), which is why they are not displayed. Therefore, if you need to display spaces, you will have to implement them in code. Read this article to understand how in certain situations.
There are several methods for adding single spaces to text. They are not at all complicated and will only require the user to enter a couple of characters in the space provided. Let's take a closer look at each of these methods.
Method one. Paste the HTML code - Paste it in the place where we want to get a space. "nbsp" is an abbreviation for a certain English phrase - non breaking space, which in translation means non-breaking space.
This method should be used in cases where there is a need to insert one or two spaces between words or characters in the text for reasons of aesthetics and style.
For example, you are faced with the task of conveying a pause between words, for example: " Hello. How are you?". You will need to enter a code for each space, like this: " Hello. How are you?"
Method two. Inserting a paragraph in HTML.
You need to paste the following code snippet
before the text that needs to be presented as a paragraph.
Need to insert code
at the beginning of each paragraph.
At the end of each paragraph, you should insert a closing tag that looks like this - . Since the paragraph tag is a paired tag, it cannot be left unclosed.
Method three. Adding tabs when HTML help module.
It is necessary to use 4 or even 5 non-breaking spaces to add a tab. The code will be as follows: .
There is no separate element for tab stops in HTML. If you want to use tabs everywhere for ease of reading information, then it’s definitely worth taking a closer look at the CSS code.
Method four. Adding line breaks to HTML.
Where you want to create a line break, insert the code
.
If you place a couple of such tags in the text at once -
Then you can achieve a text shift down one line. In this situation, one tag shifts the next line, and the second skips it.
Method five. Displaying Text as Written Using HTML
Inserting before the tag text will display it as printed or in the specified format. Such text will contain all spaces that are not displayed in normal code. In printed format, the space looks exactly the same as if you put it in standard .
In this article, we looked at examples of ways to insert a space in HTML. We hope you don't have any difficulties with this in the future. Good luck!
As the title suggests, the article will focus on an integral part of any Russian-language (and not only) text - the space. We will touch on the history of white space, types of spaces, and issues of using white space in web typography.
Generally speaking, white space is any empty space in text that is handwritten, printed, or displayed in any other medium. So there are different spaces:
- descenders (large vertical gaps in the first page of the publication) and end spaces of the strip,
- paragraph indents and trailing paragraph spaces,
- line spaces (between lines of text),
- interword spaces (between words in one line),
- interletter spaces (between letters in a word).
History of word space
The word space is a relatively late invention in the history of human thought. The history of the gap is described in depth in Paul Saenger's book Space between Words: The Origins of Silent Reading, and also, somewhat less deeply, in Johannes Friedrich's book The History of Writing.There is also a good article by Anton Bizyaev about gaps and their history, “In the beginning there were no gaps,” which was published in 1997 in the Publish magazine.
In short, the gap appeared quite late, in those writings where the lack of delimitation of words led to difficulty reading (the so-called consonantal letter, where only consonant sounds are written). However, in Greek and Latin, which also recorded vowel sounds, the use of the space was lost. Paul Sanger attributes this to the fact that reading was done aloud, which made it easier to distinguish between words when perceiving the text.
The space began to be used again around the 7th-9th centuries. n. BC, and this tradition came from Ireland, where the scribes and readers had Old Irish as their native language, and religious literature was written in Latin. Apparently for this reason the monks had difficulty reading aloud. It is believed that the appearance of a gap is closely related to the gradual transition from reading aloud to reading silently. Examples of books in Latin with interword spaces are monuments of British literature: the Gospel of Durrow (VII century) and the Book of Kells (VIII-IX centuries).
In the Glagolitic and Cyrillic alphabet there was also no space, and in our usual sense it has been used only since the 17th century.
Before humanity invented typeface, there was no special classification of interword spaces - scribes put spaces by eye and placed them. Let me remind you (we wrote about this in the article) that manuscript and xylography are methods of creating texts without moving letters. Naturally, the spaces could be of different widths, since the gaps were made manually.
Gaps in manual typing
When the mobility of letters appeared (and this happened with the advent of typefaces), questions arose accordingly - how to put spaces so that the width is maintained?The technology of manual typing is such that the typed line is completely clamped in the typesetting board and in the galley, and, accordingly, must have a width almost exactly equal to the width of the strip (more details about the technology of manual typing can be found in the book of the same name by M. V. Shulmeister).
When typing by hand, a line was typed from letters (bars, at the end of which convex mirror copies of letters were made, imprinted on paper), and interword spaces were created using the so-called spacing - bars of varying thickness, which do not have a printing surface at the end. It looks something like this. Naturally, the spacing for each font size was produced differently and had different widths. For example, for a font size of 10 points (the standard size for most text publications), emps were produced in widths of 10, 5, 4, 3, 2 and 1 point.
The spatula, the width of a pin, was called pin or round. Half-kegel spatulas were called half-kegel or semi-circular. There is also the name “thin embed,” which refers to 1-2 point thick empaces for 8-12 point font size. That is, for a 10-point font, the fine empace is usually 2 points (respectively, 1⁄5 point). However, due to the lack of an exact definition of fine empacing, the publisher's, editor's and layout designer's manuals usually speak not of fine empacing, but of so many points (assuming that the font size is 10 points).
Thus, you need to understand that, depending on the font size, the share of round empress (a third, a quarter, etc.) may have a different width in points, and vice versa.
Traditional word space width
So, having figured out what round and semicircular emphases are, let’s move on to the width of the actual word space accepted in the Russian typesetting.Schulmeister writes (p. 94) that when typing a line, a semicircular line is placed between the words. When a line is typed to the end, in most cases its width is either less than or greater than the width of the typing bar. Therefore, the layout designer has to change the width of the spaces, reducing it to a minimum of 1⁄4 round and increasing it to a maximum of 3⁄4 round (accordingly, when typing with a font size of 10 points, the interword spaces can vary from 3 to 7 points). Naturally, there are nuances that depend on the format of the publication, but we will not touch on them.
However, Schulmeister stipulates that the half-circle interword space itself is too large, and using a standard 1⁄3-round space is both more economical in terms of paper consumption and often more beautiful. Also, using half-round interword space is not recommended for narrow fonts.
With the advent of line casting machines, spaces began to be made uniform in width within one line, and the width of the interword space began to vary about 1⁄3 round.
Desktop typesetting and web typography
Currently, we are limited by the capabilities of the fonts we use, and, naturally, by the Unicode character set. It must be remembered that not all fonts contain the majority of Unicode whitespace characters.When going to computer systems In the layout, a transition was made from indicating the width of the spacing in points to indicating the width of the spacing in fractions of a round, since fonts began to be easily scaled to any size, and whitespace elements had to remain proportional to the font size.
Space characters in Unicode
Unicode provides the following characters for spaces in Western typography.- Interword space, U+0020, - width from 1⁄5 to 1⁄2 round depending on the font. For medium fonts, the interword space has a width of about 1⁄4 round (for example, Times New Roman has just such a space), for wide fonts it is about 1⁄3 round (Microsoft Verdana - 0.35 round, Microsoft Tahoma - 0.31 round).
- Non-breaking word space, U+00A0, - has the same width as a regular word space, but a line break is prohibited in the place of a non-breaking space.
All other whitespace characters have a fixed width and are not stretched when lines are justified. However, according to the Unicode line break algorithm, all of them should be treated as a line break point.
- Round embed, U+2003, - as mentioned, has a width equal to the size of the point. Also called Em Space, possibly because the letter "M" in some old fonts had that width. However, now this is not done everywhere, and therefore the statement that Em Space always has the width of the letter “M” is a fallacy.
- Semicircular embed, U+2002, - half round. Also called En Space, possibly because the letter "N" in some old fonts had that width. However, now this is not done everywhere, and therefore the statement that En Space always has the width of the letter “N” is a misconception.
- Tretted spacing, U+2004, - a third of the round. In English it is called Three-per-Em Space.
- Quarter spacing, U+2005, - quarter round. In English it is called Four-per-Em Space.
- One sixth round, U+2006, . In English it is called Six-per-Em Space.
- Thin spacing, U+2009, - usually has a width of 1⁄5 round (less often - 1⁄6). Generally speaking, its width depends on the typesetting language and the font manufacturer, and in Cyrillic fonts the thin embed is usually 1⁄5 round wide. This emoticon is exactly the same proportion as a two-point emoticon when typed with a 10-point font. In English it is called Thin Space.
- Hair spacing, U+200A, is the narrowest embed, about 1⁄10-1⁄16 round wide. This type of emoticon is roughly equivalent in proportion to a one-point emoticon when typed with a 10-point font, or even looks narrower.
Using different spaces
Since the width of the interword space is fixed in the font and changes automatically when justified by width, the use of other whitespace characters as interword characters is justified only when typing printed publications, and only if there is a deep understanding of why this is being done.In regular web layout, to separate words, it is enough to use regular and non-breaking spaces between words.
At the same time, according to the rules of Russian-language typography, in a number of places thin empath should be used (more precisely, in the reference books it is written about two-point empathy, but we will use the term “thin empace” as the most appropriate both from the point of view of established terminology and from the point of view appearance lines when typing).
The basic rules for using spaces will be described below, but in general we recommend the following principle for use when coding for the web.
When preparing HTML documents for publication on the Internet, the whitespace elements should be space, non-breaking space, and emphase only. In the event that the author intends that the page should be viewed using agents that incorrectly process the character, then a regular or non-breaking space should be used instead of a thin space.
Using only a thin emoticon from the entire variety of whitespace elements allows, firstly, to preserve the harmonious appearance of the typed text, and secondly, not to overload the author of the publication with various rules for using emoticons of various fractional widths.
Handling of spaces by browsers and search engines
When preparing the article, we conducted a kind of experiment on a specially prepared page. Yandex and Google deal with non-standard characters well, replacing all non-standard whitespace elements with regular ones when searching (we believe that this is the correct behavior). That is, they do not make a difference between the texts “two words”, “two words”, “two words”, etc.As it turned out, rendering non-standard whitespace elements works very poorly in browsers. Only Firefox 3.0 on Windows XP and *nix, MSIE 7.0 and Safari on Windows XP cope with the task normally. There is no data on MSIE 8.0, but most likely everything is fine with it too.
- Firefox before version 3.0 does not break lines at all at non-standard spaces. In this case, the width of spaces is displayed correctly.
- Opera 9.26 and 9.50, FireFox 3.0 for Mac, Safari for Mac wrap the line, but all the spaces are the same width.
- MSIE 5.5 and 6.0 under Windows 2000 put squares instead of spaces (perhaps the corresponding characters are simply not in the system font).
Basic rules for using spaces
So, let us emphasize once again that in all the rules listed below, thin emplate is used only if the author rejects the risk of a site visitor using browsers that incorrectly display thin empace. These include some browsers on *nix (possibly due to built-in fonts), MSIE version 6.0 and earlier, browsers for Mac (they can be ignored, since the rendering error is only in the width of the spacing), perhaps some browsers for mobile phones and PDA.In the event that such browsers are likely to be used, we recommend using regular or non-breaking spaces instead of thin spacing.
As described above, according to Unicode guidelines, empace is a space where a line break is possible. In cases where the rules require the use of thin emphases and the prohibition of line breaks (for example, between digits when typing a number), it is necessary to use a construction like 250 000. The nobr HTML element is proprietary and is prohibited for use.
Next, we will describe those rules for spacing that, according to our observations, are most often violated when laying out texts. More detailed information You can learn about the rules of typing texts, for example, in the “Publisher and Author’s Handbook” by A. E. Milchin and L. K. Cheltsova.
Abbreviations and symbols
- In the abbreviations “and so on”, “and the like”, “since”, “that is”, “and others”, “BC”, “southern latitude” and the like, all elements of the abbreviation are separated by a non-breaking space.
etc. - etc.
etc. - etc.
because - because
i.e. - i.e.
etc. - etc.
BC e. - BC e.
Yu. w. - Yu. w. - The initials are separated from each other and from the surname by a continuous space.
A. S. Pushkin - A. S. Pushkin
J. R. R. Tolkien - J. R. R. Tolkien
It is also permissible to separate the initials from each other and from the surname following it with a thin emb, but transferring the initials or surname to the next line is prohibited. Regardless of the choice of initialing style, it is necessary to adhere to the unity of style throughout the entire document or site.
V. V. Putin - V. V. Putin
V. Putin - V. Putin
Putin V.V. - Putin V.V.
Putin V. - Putin V. - The abbreviated word is separated from the proper name by a non-breaking space.
st. Shchorsa - st. Shchorsa
Moscow - Moscow
metro named after Lenin - metro named after. Lenin - The number and the corresponding counting word are separated by a non-breaking space.
12 billion rubles - 12 billion rubles
Ch. IV - Ch. IV
pp. 3-6 - pp. 3-6
rice. 42 - fig. 42
XX century - XX century
1941-1945 - 1941-1945
ward No. 6 - ward No. 6
§ 22 - § 22
25 % - 25 %
97,5 ? - 97,5 ?
16¢ - 16¢. - The number and the corresponding unit of measurement (except for the signs of degrees, minutes and seconds) are stamped with a thin emboss; line breaks are prohibited.
400 m - 400 m
100 t - 100 t
451°F - 451°F
but 59°, 57′, 00″. - The degrees, minutes and seconds are marked off with a thin emboss from the subsequent digits.
59° 57′ 00″ - 59° 57′ 00″
Numbers and intervals
- The fractional and integer parts of the number are not separated by a space from the decimal point: 0.62, 345.5.
- The digits of the number are separated from each other by a thin empton, except for dates, numbers (for example, documents), designations of machines and mechanisms.
25 563,42 - 25 563,42
1 652 - 1 652
1 298 300 - 1 298 300
but 1999, GOST 20283, input. No. 982364 - When designating intervals numerically, the dash does not move away from the boundaries of the interval.
50-100 m - 50-100 m
1 500-2 000 - 1 500-2 000
1.5-2 thousand - 1.5-2 thousand
15-20 % - 15-20 % - The unary signs plus, minus and plus-minus are not separated from the following number: +20 °C, −42, ±0.1.
- Binary signs of mathematical operations and relations are embossed on both sides on a thin embed.
2 + 3 = 5 - 2 + 3 = 5
Punctuation marks
- Period, comma, colon, interrogative and exclamation marks, semicolons are not separated by a space from the preceding word, but are separated by a space from the subsequent one: Ha, ha. Ha? Ha!
- The ellipsis is not separated from the preceding word if it is at the end of a sentence or part of a sentence, and from the subsequent one if it is at the beginning of the sentence: Wow... What? …Nothing.
- Quotes are not separated by spaces from the text enclosed in them: battleship "Potemkin".
- Brackets are not separated by spaces from the text enclosed in them, and are separated by spaces outside (except when the closing bracket is adjacent to a punctuation mark to the right): The text in brackets is of no interest to anyone (usually).
- A dash is separated from the previous word by a non-breaking space, and from the next by a regular space (including if the interval is indicated in verbal rather than digital form).
Vitenka - well done!
Only a cucumber fifteen to twenty centimeters long will suit us
Molotov-Ribbentrop Pact. - If two numbers in verbal form do not form an interval, but mean “either one number or another,” then a hyphen is placed between them, which is not separated by spaces: drank two or three glasses.
Unwanted hyphens
- Short words and conjunctions ( A, And, But, I, You, and so on) it is better to separate the subsequent word with a non-breaking space, since a short word hanging at the end of the line impairs readability. In particular, it is very desirable to prevent line breaks between particles Not and the following verb.
- Particles or, would, whether It is advisable to separate the previous word with a non-breaking space: the same thing, I would say, if I thought.
- It is advisable not to separate prepositions at the beginning of a sentence from the words that follow them. (even longer than one- and two-letter ones)
Correctly adding a non-breaking space in HTML. Valid layout.
If you have tried to design websites, then you probably know that when you add several spaces in the text from the keyboard, they are not saved. Browsers treat them as a single space. Sometimes this leads to layout problems. Now we will show you how to add multiple spaces in a row.
Using special characters
In hypertext markup language, a special character is used that is interpreted by browsers as a space. Here he is:
You need to type it exactly in the form in which it is presented above. If you need to insert several spaces in a row, insert several of these characters.
What would our section of code look like if we wanted to add three spaces in a row.
Test code section
If we opened such a page in a browser, this is what we would get:
Test code section
Tag pre
It is not always possible to format text as needed using standard markup tags. At the same time, by typing it from the keyboard, you can achieve the desired result. But in the end, when viewing the page in a browser, all manual formatting will disappear, and you will get plain text. The same result will occur if you manually add several non-breaking spaces in a row, simply by clicking the key of the same name.
What to do in such a situation?
Here is an example of text with a long space. We achieved this by enclosing the text in a PRE tag
As you can see, several consecutive line breaks are also saved. This is exactly what this tag is used for. It leaves manual formatting to the text that is enclosed within it.
Video for the article:
Conclusion
Use these methods exclusively to insert special text formatting. You should not use these methods to achieve the arrangement of elements on the page. Like, say, adding several non-breaking spaces so that the next element is further to the right of the page. You should use style sheets for this.
Hello, dear readers of the blog site. A little earlier, we already managed to talk about that, and also learned about the design in it. Today we have in turn the concept of white space in HTML, as well as the associated code formatting 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 many additional characters to the web document code, like those already mentioned above . But first things first.
Spaces and whitespace characters in HTML
Before moving on to the issue of formatting text using tags specially designed for this (paragraph, headings, etc.), I want to dwell on how spaces, line breaks (Enter) and tabulation are interpreted in the HTML language, and how breaking is carried out 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 rather the tab and line break characters. There is such a rule - when you start writing a nested HTML tag, That indent using tabs(Tab key on the keyboard), and when you close this tag, remove the indentation (key combination Shift+Tab on the keyboard).
This must be done so that the opening and closing tags are at the same vertical level (at the same number of tabs from the right edge of the page in your Html editor, for example, Notepad++, which I wrote about). In addition, I advise you to immediately after writing the opening element make several line breaks and immediately write the closing one at the same level (number of tabs), so that you don’t forget to do this later.
Those. the opening and closing elements should be at the same level vertically, and the internal tags should be shifted by one tab character and the closing and opening elements should be placed again on the same level.
For simple web documents this may seem like overkill, but when creating more or less complex ones, they the code will become much more clear and readable due to the abundance of spaces, and it will also 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 ease of use of which I announced at the beginning of this article. Special characters are also sometimes called mnemonics or substitutions. They are intended to solve a problem that has arisen in hypertext markup language for a long time, related to the encodings used.
When you type text on 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) due to decoding.
There are a lot of encodings, but for the Html language the extended version of encodings was adopted by default.
In this text encoding it was possible to write only 256 characters - 128 from ASCII and another 128 for Russian letters. As a result, a problem arose with the use on sites of characters that are not included in ASCII and are not Russian letters included in Windows encodings 1251 (CP1251). Well, you decided to use a tilde or an apostrophe, but such a possibility was not initially included in the encoding used by the Html language.
It is for such cases that substitutions or, in other words, mnemonics were invented. Initially special characters had a digital form, but then for the most common ones their letter counterparts were added to make them easier to remember.
In general terms, a mnemonic is a character that begins with an ampersand “&” and ends with a semicolon “;”. It is based on these characteristics that the browser, when parsing HTML code, extracts special characters from it. The ampersand in the numeric wildcard code must be immediately followed by a pound sign "#", sometimes called a hash. And only then follows the digital code of 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 that support almost all Unicode characters, and there are options only with a certain set of characters.
The full list of special characters will be simply huge, but most commonly used mnemonics you can borrow for example from this table:
| Symbol | HTML code | Decimal code | 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 |
| … | … | … | ellipses |
| ‾ | ‾ | ‾ | 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 | |||
| ₽ | ₽ | Ruble. The ruble sign must be used in conjunction with the number. Unicode 7.0 standard. 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 | ||
| ○ | ○ | 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 | |
There is quite an interesting method of obtaining HTML code mnemonic for the sign you need. To do this, just open the Microsoft Word editor, 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 a similar 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 the majority of computers of your site visitors - Courier or Arial, for example).
Add from the list that opens to yours 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 all you have to do is open this web page in any HTML editor(the same Notepad++ will do) and you will see everything digital codes mnemonics you need:
The method is a little complicated, but if you want to use some rare special character on your website page, then it will be easier than searching on the Internet for tables like the one shown just above. You will need to paste the resulting special character code into 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 hyphen in examples
As I already mentioned above and as you can see from the table of special characters given just above, some mnemonics in Html received, in addition to digital, also a symbolic designation for easier memorization. Those. Instead of the hash sign “#” (hash), words are used in symbolic variants. For example, the same non-breaking space can be written either as (digital mnemonic) or as (character).
When writing articles, if you need to insert an ampersand (&) or open angle bracket (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.
That is, if you are writing an article in which you will need to insert, for example, a tag display into the text< 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 displaying the code of the mnemonics themselves, since they begin with an ampersand. You will need to insert the code into the text, replacing the ampersand sign with its substitution (special character):
This will need to be done to get on the page<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.
You will also most likely use a non-breaking space, which will look like a regular space on a web page, but the browser will not treat it as a space character at all and will not carry out transfers on it(for example, this will be appropriate for phrases such as 1400 GB, etc., which it would not be advisable to hyphenate across different lines):
1400 GB.
Sometimes the opposite situation may arise, when the text contains very long words and you want to make sure that, if necessary, the browser I could break these words with hyphenation. For such purposes, a special symbol “soft transfer” is provided -
Long, long word;
When it becomes necessary to move to another line, the browser will use a hyphen instead of the soft hyphen mnemonic and send the rest of the word to the next line. If there is enough space to place this entire word on one line, then the browser will not draw any line feed. It's that simple.
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 to send an Email 
Tags and attributes of headings H1-H6, horizontal line Hr, line break Br and paragraph P according to the Html 4.01 standard 
How to insert a link and a picture (photo) into HTML - IMG and A tags