Tag new paragraph. Basic tags (tags) html. Rules and order of writing tags

Tags defining paragraph, space, HTML block and paragraph

Let's look at it in detail HTML blocks and paragraphs as elements of a web page.

• HTML paragraph defined by tags.
• HTML paragraphs usually contain text, formatting tags, and images.
• HTML paragraph cannot contain block 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 and easy to manipulate.

Consider the code below:

Result:

We can see that HTML paragraphs have vertical indentations - this is a feature of tags. HTML blocks

Tags cannot contain other or

Tags and , in principle, are the same thing, but the W3C consortium recommends using small letters. In the new version of HTML, as in modern XHTML, the use of capital letters when writing tags is prohibited.

Block

HTML space from special characters table

HTML space allows you to increase the distance 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 may ask: Why are these encoded meanings of ordinary characters needed? - 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

Examples of paragraph output.

As a rule, blocks of text are separated by paragraphs (paragraphs). By default, there is a small vertical space between paragraphs, called a space. The syntax for creating paragraphs is as follows.

Paragraph 1

Paragraph 2

Each paragraph begins with a tag

And ends with an optional closing tag

In any book, the first line indentation, also called the “red line,” is used to highlight the next paragraph. This allows the reader to easily look for a new line and thus increases the readability of the text. On a web page, this technique is usually not used, but padding is used to separate paragraphs.

Example 7.1 shows the use of paragraphs to create indents between lines.

Example 7.1. Using Paragraphs

In some places it’s still February, in others it’s already April.

Time passes, eternal counting: year after year, century after century...

In everything - his unhurried pace, his pitch-black running.

There are twenty-five weeks of joy and sorrow in a year.

I'm twenty-five weeks into February, and twenty-five weeks into April.

For twenty-five weeks, centuries pass into the fog.

My sonorous farce is flying somewhere towards the clouds.

M. Shcherbakov

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

Rice. 7.1. Indentation on a web page when using paragraphs

As can be seen from the figure, when using the tag

There are too many spaces between paragraphs. You can get rid of them if you add a tag at line breaks:
. Unlike a paragraph, a line break tag
does not create additional vertical spaces between lines and can be used in almost any text.

Thus, the text of example 7.1, taking into account line breaks, will be transformed as follows (example 7.2).

Example 7.2. Tag

Almond trees are blooming in some gardens, while snowstorms are blowing in others.
In some places it’s still February, in others it’s already April.
Time passes, eternal counting: year after year, century after century...
In everything - his unhurried pace, his pitch-black running.
There are twenty-five weeks of joy and sorrow in a year.
I'm twenty-five weeks into February, and twenty-five weeks into April.
For twenty-five weeks, centuries pass into the fog.
My sonorous farce is flying somewhere towards the clouds.

M. Shcherbakov

The result of the example is shown in Fig. 7.2. It can be seen that the distance between the lines of text has decreased and it has acquired a more compact appearance.

Paragraphs and headings

The main way to present information on the Internet is text; it is text information that most people look for, and it is text words and phrases that are used by special search engines to carry out this search. Therefore, whether the visitor will linger on the site or go looking for a more convenient source of information will largely depend on how well and conveniently the text on the pages is structured. After all, you will agree that reading a continuous text is much more difficult than reading one divided into paragraphs and thematic subsections. In HTML, several tags are responsible for this text structuring, and we will talk about them in this lesson.

Tag

Or we break the page into paragraphs (paragraphs)

If you remember, then with the tag

You have already met in this textbook, well, now it’s time to study it completely. So the tag

Responsible for creating paragraphs in an HTML page and is block element. I hope that you have already remembered what block level tags are. Yes, but in addition to the fact that it creates line breaks in front of and after itself to the beginning, it also sets small margins (external indents) of empty space above and below itself, due to which the text is visually divided into paragraphs. The height of these fields is equal to one empty line.

Now the most important thing is the tag

Can only contain row-level (inline) elements and nothing else. Therefore, for example, it cannot contain another paragraph, since it itself

Is a block element. Well, we will return to this more than once. By the way, any text without tags is also considered an inline element.

Example of paragraphs in HTML

First paragraph.

Second paragraph.

Result in browser

First paragraph.

Second paragraph.

In general, the closing tag

At the tag

There is one optional attribute, align , which sets the position of the text within the block. that is, you can have each line of a paragraph centered on the page or pressed to the right side rather than to the left as usual. The only problem is that the align attribute is not in the strict version of HTML and, perhaps, modern browsers will no longer support it in the near future. So what should we do? And we will do the following: in one of the upcoming lessons I will show you a universal method with which you can change the position of content not only inside paragraphs, but also inside any block elements of an HTML page (headings, tables, lists, etc.). But the main thing is that all browsers understand it and will understand it.

Tags

-

or HTML page headers

Headings play a very important role in HTML; using them, you can divide the text of a page into logical parts, emphasizing the importance of each, which allows visitors to quickly find the information they need. In addition, search engines (Yandex, Google, etc.) give more “weight” to the text in headings. There are six types, where

the most important heading (first level, top), and

least significant (sixth level, lower). For example,

could be the page title,

- its sections,

- subsections, etc.

Heading tags are block elements and, like paragraphs, can only contain line-level tags and text. Browsers make heading text bold, different sizes (depending on the tag) and add white space margins at the top and bottom, again like paragraphs.

Syntax for writing headers in HTML

First level header

Second level heading

Third level heading

Fourth level heading

Level 5 heading

Level six heading

Title tags have two optional attributes - the familiar old-fashioned align and the title attribute, which displays a tooltip when you hover over the title. As with paragraphs, we won't use align , but will learn another way soon.

Example of using headers in HTML

First level header

Paragraph.

Second level heading

Paragraph.

Paragraph.

Result in browser

First level header

Paragraph.

Paragraph.

Paragraph.

Homework.

In this task you will need to create a page simulating a small article, write any text you like. You can immediately see the result of the example so that you have an idea of ​​what needs to be done.

1. Open the page from the previous lesson in an HTML editor.
2. Using Headings

   ,

   And

   create the title of the article, its two sections and three subsections in the second section.

3. Make sure that when you hover your mouse over the title of an article, the corresponding inscription is displayed.
4. Write one paragraph for each section and subsection.

– in the process of creating a website, we have to work a lot with text blocks, or text phrases. One day, I needed to add a text phrase in such a way that before this text phrase there is some indent text from edge html block in which this text was added.

So, the first method is the most natural and simple. To indent the text, add an html space code before the text - You can add an html space code in any html editor.

Here is an example of working code for setting indentation for text using the space code:

HTML left text indentation, use space code

We know that the space code is processed by any browser. Therefore, by adding the required number of spaces before the text, you can get the required indentation for the text.

This method is good because it is guaranteed to be processed by any browser.

But this method has a significant drawback. In order to indent the text long enough in the html code, you will have to add a large number of space characters before the text, which may not look beautiful, cumbersome and unprofessional.

One solution to this problem is the following method of setting the indentation.

HTML text indentation, method two - this method is based on the properties of the blockquote tag. This tag sets an indent of approximately 40 pixels on the left and right for the text placed in it. In addition, the indentation is specified at the top and bottom. An example of html code for using this method is given below:

on the left, use the tag blockquote

As you can see, this method of setting indentation for text is very easy to use, but this method also has a significant drawback. The indentation that the tag sets blockquote is fixed and is always equal to the same value – 40px.

To correct the situation, and when adding html indentation and for text to be able to set any value, we will use the third method.

HTML text indentation, method three.

Here we will use the text-indent property of CSS Cascading Style Sheets.

If we open the CSS reference book, on the page with a description of the properties of text-indent, we will see that using text-indent, we can set the indentation value of the first line or first paragraph, or any block of text.

We are considering an example with a short text block, so the text-indent properties are quite suitable for our case.

Below is the html code that indents text using text-indent. The example shows that by setting text-indent to different argument values, we can change the amount of text indentation:

HTMLindentationtext, CSS style works - text-indent

In my opinion, this method of setting an indent for text is the most optimal, but, nevertheless, let’s consider another way to set an indent, using images.

HTML text indentation, fourth method - here we will use an image to set the indentation.

As a working example, let’s immediately look at the html code that demonstrates how this method works:

From the above example it is clearly seen that by changing the width of the image, we can change the position of the text, that is, set the desired indent for the text.

As an image, you can use an image whose width and height are equal to one pixel. To prevent the image we are using from being visible on the page, we will set its color exactly the same as the background of the site page.

In my opinion, the above methods for setting indents for text are quite enough to organize the indentation you need in any situation when adding content to the page of your sites.