To give it a certain style, you need to place the text in the appropriate container.

All formatting tags can be divided into three groups:

1. Title tags ( h1-h6).

2. Design tags of the main text ( , , ,

, 
 etc.).
3. Grouping tags ( 

, 

, 

)

Title tags
Turn plain text into a heading of a certain level.  Tag 

 creates a first-level heading - the largest and most important (usually the title of the article on the page), 

 is responsible for the heading of the sixth level - the smallest and most inconspicuous.  These tags are important for both users and search engines - headings with subheadings are loved by both.  The hierarchy of levels must be observed, that is, for 

 have to go 

, and not vice versa.

To understand how this works, enter the following code in the html file:
 
First level heading
Second level heading
Third level heading
Level 4 heading
Level 5 heading
Level 6 heading

It will look like this in the browser:
Body text design tags
Allow formatting at the character level.  Let's see what you can do with them.
Bold font
Needed to focus on the text.  It is also important for search engines, they can highlight keywords.
Responsible for bold tags 
 and .

Superscript and subscript
They can be used in formulas, equations, notation of some quantities.
The tag is responsible for creating subscripts 
, for the top tag is used 
.
X 1=32 m 2
Reducing the size
If you need to make the text one less than the one set on the entire page, then you need to use the tag 

Plain text. Reduced text.
Underline
This type of highlighting can be used to indicate changes made to a document, or simply to emphasize text.
Plain text. Underlined text.
Strikethrough
You can cross out information if it has already lost its relevance.  Designed for this tag 
.
Italics
Needed to focus attention on the text, and can be created with a tag 
 or 
.

Computer text input
It happens that you need to add the source code of the program and the results of its work to a web page.  To make it easy to distinguish visually different parts of the text from each other, HTML developers introduced the tags of this group.
To container 
 the program code is concluded, while its variables are highlighted with a tag 
, and the execution result is 
.  Container 
 contains text that the user must enter from the keyboard when working with the program, and everything that is enclosed in tags 
, retains the original format, including extra spaces and line breaks.

  thus a, b, c, here program execution result , and this is user-entered text 
displayed like this
.

Quotes and definitions
The code will look like 
 thus 
, the variables are denoted as follows: 
 a, b, c 
, here 
 program execution result 
, and this is 
 user-entered text 
.  Keep original formatting 
 displayed like this 

.

 
Quote in blockquote tag.
A quote inside a cite container.Short quote with q tag.Dedicated definition.Abbreviation (NGO, IP).

General example
To better understand what a tag is responsible for and how it works, see the following code and the result of its execution.
 
Fatty text can be tagged strong and b.  Behind italics meet em and i.
tags sub and sup used to create lower(x 1…x n) and upper (42=16) indices. Del strikes out, ins - emphasizes.
tags code, kbd, var and samp rarely used and needed to display program listings
 abbr needed for abbreviations ( HTML).  The blockquote, cite and q tags are used for quoting ( Already the sky was breathing in autumn)
The pre tag retains the original formatting of the text without stripping spaces or line breaks.

The browser interprets this code like this:

Grouping tags
It is necessary that the text does not go in one continuous line, but is divided into logical components.
The tags contain a paragraph.
 
First paragraph
Second paragraph


Tag 

 moves to the next line within a paragraph (there will be no indent before the line).

 allows you to draw a horizontal line.  You can use it to more visually separate the text.  Attributes width, size, color, align and noshade set the width, thickness, color, alignment, and absence of the 3D effect of the line, respectively.
 
Line above line. 
Line under line.

Any text has its own unique structure: books are divided into parts, sections and chapters, newspapers and magazines have separate headings and subheadings, which, in turn, include text fragments that also have their own structure: paragraphs, indents, etc.
 
The text placed on web pages is no exception, it must also have a logical structure understandable to every user.  After all, a lot depends on how convenient and simple the text on the page will be perceived: first of all, what impression the visitor will have about your site.
 
To create such structural units of text as paragraphs, the tag is used in HTML documents. 
, which separates text fragments with a vertical indent (an empty line is added before and after a paragraph).
Note: by default, the spacing between paragraphs is 1em (em is a unit of measure equal to the height of the font), that is, the spacing between paragraphs directly depends on the font size.
To change the indents between paragraphs without changing the font size, you can use the CSS margin property.
 
Don't forget the closing tag
 
Most browsers will render an HTML document correctly even if you forgot the end tag.

 
Paragraph 
Another paragraph
 
This code will work in most browsers, but don't rely on it.  A forgotten closing tag can lead to unexpected results or errors.
 
Red line
 
What is a red line?  By definition, this is the initial line of a paragraph, which used to be highlighted in red (hence the name).  Before printing was invented, books were written by hand - the chapter or part of the text, the first word or letter was written in red paint.  This is how the concept of “writing from the red line” appeared - this means the beginning of a new thought, chapter or part.
 
However, when creating web pages, the design of the red line is used quite rarely, despite the fact that it allows you to perceive the text visually with much greater convenience, which is quite important for the traditional reader - not everyone is comfortable reading the electronic version of the text.
 
To add a red line to your paragraphs, you need to use the text-indent CSS property, which allows you to indent the first sentence:

 
 
 
 
 
 
 




 Try »
In the example above, the first line of every paragraph on the page will start with a 25px indent.  The example below demonstrates how you can set the red line to only a specific paragraph on a page.

 
As in any real art, there are no trifles in good texts, to which some include the red line, believing that its use is not so important.  However, one must understand that any comma carries both an aesthetic and semantic load, and is not only a tribute to the rules of grammar - this also applies to formatting.
 Try »
Note: it is not necessary to set the indent to 25px, you can choose the optimal indent size yourself, it is also possible to make a line protruding above the rest of the text using the text-indent property, for this you need to set a negative value for the property (for example: -30px).
Tags defining paragraph, space, HTML block and paragraph
 
Consider in detail HTML blocks and paragraphs as elements of a web page.
 
HTML paragraph defined by tags.
 
HTML paragraphs usually contain text, formatting tags, images.
 
HTML paragraph cannot contain block-level elements such as headers 
 
 - 
, block 
 
 and other paragraphs.
 
HTML block defined by tags 
 
 .
 
HTML block can contain any elements of a web page, in any quantity.
 
HTML blocks great for web pages, they are easy to manipulate.
Consider the code below:
 
Result:
 
We can see that HTML paragraphs are indented vertically - this is a feature of tags. HTML blocks
 
 
 such spaces are not created, because they do not carry any load, but are simply containers.

 
Tags cannot contain other or 
 
.  Linear elements can be placed inside, such as or, for example, tags responsible for text formatting.

 
Tags and , in principle, are the same thing, but the W3C consortium recommended using small letters.  In the new version of HTML, as in modern XHTML, the use of capital letters when writing tags is prohibited.
 
Block 
 
 can contain any number of 
 
 and other elements HTML document.  It is ideal for layout, but more on that later in the CSS tutorial.

 
HTML space from special character table
 
HTML space allows you to increase the space between words and characters.
 
As for the spaces between words, no matter how many there are in Notepad, that is, in the source code, only one will be displayed on the web page.  If you need to increase the distance - use the space character from the symbol table.  You ask: Why do we need these encoded values ​​of ordinary characters?  - I will answer: They are needed to display, for example, such brackets< >.  In other words, to display tags on the screen, in my editor I write: .  tags  , as we remember, convert the text to monospace (typewritten).
 
Ways to display an HTML paragraph
 
Paragraph output examples.
In the case of HTML documents, tags work more to mark up content than to indicate how it should be presented.  More control over presentation is achieved with styles.  In this article, I will look at those styles that are related to paragraph formatting in HTML.
Tag 
In HTML, you can specify paragraphs, and the align attribute aligns them to the left, right, center, or justified.  In addition to them, we will use the global style attribute.
Paragraph alignment
You can align a paragraph using the align attribute with the following values:
text-align: left|right|center|justify|initial|inherit;
Copy the following code into an .html file.


This paragraph is center aligned
This paragraph is right-aligned
This paragraph is displayed in the browser window justified.  A well-spaced paragraph is right-justified and left-justified by adding extra spaces.  You can see that the edges of the justified paragraph match the edges of the left and right justified paragraphs.  In a left-aligned paragraph, the left margin is even, and in a right-aligned paragraph, it is right.  Can you see that this paragraph has both edges even?  This is achieved thanks to the text-align:justify style.

In the HTML browser window, the paragraph code looks like this.
Line spacing
You can control the line spacing of a paragraph with style=line-height .  Use the style attribute with the following values:
line-height: normal|number|length|initial|inherit;
The following is an example of HTML code that outputs paragraphs with varying line spacing:


This paragraph uses two values ​​for the style attribute.  The first line-height:1.5 specifies one and a half line spacing for the paragraph, and the second value text-align:justify specifies that the text of the paragraph should be justified in width.
This paragraph has double line spacing and is justified.  line-height:2 specifies double spacing.  The style attribute does not have to have two values.  But if you need to specify two values, you can do so by separating them with a semicolon.







Here are a few different ways to use the line-height value for the style attribute: 
: Sets line spacing to 13 pixels; 

: Sets the spacing between paragraphs in HTML to 200% of the current font size; 

: Sets the line height to 14 pixels.
Indentation
I used the term "indentation" to make it easier to understand.  But in HTML, we use spaces to create white space around an object.  You can use the style attribute with a value of padding to set the left or right indentation of a paragraph.
The following is an example of left and right indented paragraphs:



This paragraph is not indented, it is just justified.  Look at the style attribute of the P element for this paragraph.
For this paragraph, I set the left indent to 30px using padding-left:30px .  This paragraph is also justified using the text-align:justify style.  As you already know, we can use multiple values ​​for the Style attribute by separating them with a semicolon.
And this paragraph has a right indent of 30 pixels, but no left indent.  It is also justified in width.  The 'padding-right' value of the style attribute sets the padding to the right.  If you don't see the effect, reduce the width of the browser window so that the justified HTML paragraph displays properly.

Indents between paragraphs (indent before and indent after a paragraph)
In HTML or CSS, we don't need this.  We can just style the padding on the element 
Padding-top and padding-bottom define white space before and after a paragraph, which works like a top or bottom padding.  Look at the tag example below 
I set the first HTML paragraph to 10px indent before the second and 50px after the second paragraph:



This paragraph is not indented before or after.  This is a regular paragraph justified.  As you already know, we can justify a paragraph using the style=”text-align:justify” code inside the tag.
This paragraph is lined up.  It also has a 10 px indent before the paragraph and 50 px after.  Inside the tag, I set 3 styles.
This is a normal paragraph with no indents and default alignment.





Things to Remember
An HTML paragraph can be aligned using the align attribute or the text-align style;
HTML will be rendered differently depending on screen sizes, browser window sizes;
Adding extra spaces or empty lines to the HTML code does not affect the output.  The browser removes all extra spaces;
Tags define what should be displayed, and styles define how it should be displayed;
Styles can be set in three different ways - inline (inside tags), internal ( inside the same HTML file with an element 
 
 
 
The Babylonian Pandemic, according to biblical tradition, is the failed attempt of King Nimrod to build a pillar in Babylon as high as the sky.  God, angry with people for their reckless desire, decided to punish the builders: he mixed their language so that they no longer understood each other, were forced to stop building and gradually scattered around the world.  From here, as the ancients explained, the difference in languages ​​\u200b\u200bwent.
 
In the usual concept, Babylonian pandemonium means disorder, confusion with a large crowd of people.
 





The result of this example is shown in Fig.  one.