Any web page consists of elements located on it, and div block layout is almost always responsible for their placement. Of course, there is also a table layout using tags

, and there is even debate about which system is better to use - block or table-based. However, in reality, at present you will not find any of the modern, popular and convenient sites that use only tabular layout. At best, it is used only for what it is intended for - that is, to create tables, but not to form the site structure itself.

The fact is that the div layout of the site allows you to set many CSS properties that are not available for tables. Additionally, the biggest drawback of a table system is that the table will not be shown on the screen until it has been fully loaded by the browser. If the entire site is made in a table, then it will appear on the display only after the entire html code of the page has been completely loaded.

DIV tag and float property

The basis of the block system is the tag

, which is the container for the content. It may also contain other containers inside it

Using a DIV tag is no more difficult than . As a rule, the standard site structure is formed as follows: there is a main container

(often it is assigned a class called wrapper, container, main, etc.). Inside this container there are blocks of the menu, content part, and sidebar.

By default, each new block is placed on a new line. In order to position a block to the left or right of another (for example, to position a sidebar on the right), the float property is used. By default it has the value “none”, but you can also set the values “left” and “right”.

Let's look at this property using an example with two blocks.

Content block

Sidebar block

This code will give the following result:

clear property

It is important to consider that the float property applies not only to the block itself in which it is registered, but also to the subsequent element that will follow this block. That is, if we add another block to the two blocks described above without specifying any properties to it, then it will not be located on a new line, but will start to the right of the second block.

To avoid this, block div layout uses the clear property, which must be set for the block that we want to position on a new line. Most often, it is set to “both” for this, but we can also set it to “left” or “right” if we want to not only position the block on a new line, but also set its alignment.

Let's add a new element to the above example:

Content block

Sidebar block

New block located below

Result:

Indentation in block layout

In addition to the location of blocks, it is important to set indents both between blocks and within them. For this, the margin and padding properties are used, respectively.

Indents are set separately for the top, right, bottom and left parts of the element. They can be specified on one line by listing four values:

Margin: 20px 10px 0 40px

A block with these parameters will be positioned 20 pixels below the parent element, ten pixels from the right-hand element, will have zero padding at the bottom, and will have a margin of 40 pixels on the left.

If all the same indicators are specified in the padding property, then these will be the internal padding for the content in relation to the boundaries of the block in which it is located.

You can also set individual properties for individual edges using margin-top, margin-bottom, margin-left, margin-right (and similarly for padding). In this case, if any of the edges is not specified, then the indent on its side will be zero or will be determined by the general css properties specified for blocks on the page.

Element

is a block element and is intended to highlight a fragment of a document in order to change the appearance of the content.

Typically, the appearance of a block is controlled using styles. In order not to describe the style inside the tag each time, you can separate the style into an external style sheet, and add a class or id parameter to the tag with the name of the selector.

As with other block elements, the content of the tag

always starts on a new line. A line break is also added after it.

...

Syntax

Options

align Sets the alignment of the tag contents

.

title Adds a tooltip to the content.

Closing tag

Required.

Example 1: Using a tag

DIV tag

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

ALIGN parameter

HTML:

3.2

XHTML:

1.0

1.1

Description

Aligning container contents

on the edge.

always starts on a new line. A line break is also added after it.

...

Arguments

center Aligns text to the center. The text is placed horizontally in the browser window or container where the text block is located. Lines of text seem to be strung on an invisible axis that runs down the center of the web page. This alignment method is actively used in headings and various signatures, such as captions; it gives an official and solid look to the text design.

In all other cases, center alignment is rarely used for the reason that it is inconvenient to read a large amount of such text.

left Aligns text to the left. In this case, the lines of text are aligned to the left, and the right edge is arranged as a ladder. This alignment method is the most popular on websites, as it allows the user to easily look for a new line and comfortably read large text.

right Aligns text to the right. This alignment method acts as an antagonist to the previous type. Namely, the lines of text are aligned to the right edge, but the left remains “torn”. Because the left edge is not aligned, which is where new lines are read, this text is more difficult to read than if it were left aligned. Therefore, right alignment is usually used for short headings of no more than three lines.

We do not consider specific sites where the text has to be read from right to left, where perhaps a similar alignment method will be useful. But where in our country have you seen such sites?

justify Justified, which means aligned to the left and right at the same time. To perform this action, the browser in this case adds spaces between words.

Default value

HTML:

3.2

XHTML:

1.0

1.1

Description

Similar to CSS

Example 2: Text Alignment

always starts on a new line. A line break is also added after it.

...

Arguments

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

In all other cases, center alignment is rarely used for the reason that it is inconvenient to read a large amount of such text.

TITLE parameter

Adds explanatory text to the container

in the form of a tooltip that appears when the mouse cursor hovers over the content." !}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Today it is difficult to find a site where such a necessary and important tag is not used

. Look at the code of any site you find on the Internet and you will see that the tag

occurs more often than other tags in HTML document. The reason for this popularity is block layout. In other words, using a block tag

websites are being made up.

Thanks to this tag all HTML The document code has a clear and logically understandable structure. It is easy to understand not only for the layout designer, but also for other specialists working together on one project. However, the tag

without its “satellites” - selectors id And class worthless.

Classes and Identifiers

Classes (class) and identifiers (id) perform the same tasks. They set different styles for the tag

, as in external CSS file, and inside the document, through the tag style. Here it is necessary to clarify that they work in conjunction not only with the tag

, but also with many other tags.

Consider the following HTML markup code as an example:

It's never too late to learn!

Repetition is the mother of teaching

Let's set the appearance HTML document using CSS style file:

/* # sign before the name - id designation */

#content (
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}

/* (.) before the name denotes class */

Content (
padding: 20px;
font-size: 20px;
color: black;
background: #ddd;
border: 1px solid black;
width: 250px;
}

Names id And class is set by the developer himself arbitrarily, based on the semantic load. We simply named them content. You cannot give names in Russian letters, you can use numbers and the hyphen symbol (-) and underscores (_) .

We see two absolutely identical blocks. A selector is applied to the top block id, and the selector will be applied to the bottom block class. You may ask where is the difference between divs id and class? Purely externally, no difference yet, as long as we apply one at a time id And class on one page.

What then is the difference between class And id?

The difference lies in the name itself id, means identifier, that is, unique. The main difference from classes is that the selector id can only be used once on a page. Selector class, on the contrary, can be used on one page an infinite number of times.

For example:

Content /* can be applied to any tags */
div.content /* only applies to div tags with class .content */
div#content /* for id such an entry does not make sense, it is unique */

It is also worth noting that id properties have higher priority than class properties.

red text

This example clearly demonstrates that despite the fact that class with blue text is below, the text is still red. If id did not have priority, the text would be blue.

In addition, you can assign several classes to a specific tag, listing them separated by a space. This system allows you not to create unnecessary classes, but to use them more efficiently. U id Of course, there is no selector for this.

There is one more important difference, it concerns programmers. If you plan to access an element HTML document through language JavaScript, then you must definitely use id, implementing this through classes is much more difficult.

When is it best to use id, and when class?

If any of the elements on the page, for example, the site header, menu, button, is used only once, then you need to use id. Selector class applies to one tag or to different tags as many times as they appear on the page. For example, pictures, bulleted lists, paragraphs.

In conclusion, I want to give friendly advice to all those who want to learn how to create websites on their own. It is very time-consuming and ineffective to gain knowledge about website building from articles and lessons. Please pay attention to this topic. This is one of the best courses for beginners.

). One large table was created, which was then divided into several areas: header, left block, right block, center and bottom. With the advent of the tag

all webmasters began to use it to create the “skeleton” of the future site. For example, this is what the site page structure might look like:

Tag syntax

...

HTML tag

is a block element. Its most important attribute is class. Using it, you can create blocks with the desired CSS styles.

Example. Using a div block

Example of using a div block

Example of using a div block

This is a basic example of using the tag

. Its capabilities extend far beyond the scope of this example. For example, using this tag you can create beautiful menus (see how to make a drop-down menu in css ")

Now let's take a closer look at all the attributes of the div tag.

Tag Attributes and Properties

align="parameter" - sets the alignment. Can take the following values:
- center - align text to the center
- left - align text to the left
- right - align text to the right
- justify - left and right alignment
title="text" - всплывающая подсказка к тегу. Почти никогда не используется.!}
class="name" - defines class membership.
style="comma separated styles"- ability to set styles.

Practical use cases

Let's look at a couple of practical examples with the tag

Example. Centering content using divs

This text will be centered

Converts to the following on the page:

This text will be centered

Now instead of the tag

you can write

and the text will be centered. This complies with the requirements of the HTML standard (site validation).

Example. Beautiful frame with div

Displaying text in a beautiful block

Converts to the following on the page:

Displaying text in a beautiful block

Example. Implementation of teasers on the website

The convenience of the div tag is that it is placed block-wise relative to each other. A practical example is the output of consecutive blocks that will automatically wrap to a new line when the end is reached.

Sea

Mountains

There are many such elements that can be made. As a result, you get something like this.

Just ten years ago, the so-called table layout was most often used in RuNet. Due to the fact that the standards of some browsers differed significantly from each other, it was necessary to look for a solution that would allow the Internet document to be displayed correctly in all applications. But time passed, standards developed, and the rather rigid and inflexible tabular one was replaced by a well-changeable and responsive one. At the forefront of such technology is the principle of using elements

. HTML documents for the most part began to be built on the basis of individual blocks, which, unlike table layout, can be independent of each other.

Emergence

The increasing complexity of web pages and the development of computer technology led to the fact that the web document was divided into two parts - the framework (HTML code) and the design (style sheets). Thanks to this, it was possible to achieve unprecedented development of the web, the results of which we can now see on most modern sites. In addition to improving the development process

HTML made it possible to define its own design rules for each individual element. This helped improve the readability of the web page code and reduce document loading time. Now search engines are much faster and better at processing the information available on the site.

Standards and testing

Tag

HTML is used in strict accordance with W3C (World Wide Web Consortium) standards. The page code is checked by a special tool - a validator, which parses (scans and looks for) all kinds of errors on the page. A valid page means that all tags were used correctly and fully meet the requirements of the standards.

Using classes and identifiers

Block

HTML can be defined either by the id or by the identifier. The difference between the first and the second is that the id is used only once on the document page. That is, it is used to identify unique elements that are not repeated anywhere else in the page code. The class attribute allows the same to be applied to multiple elements. This approach greatly simplifies code development and maintenance. In addition, one object can have several classes at the same time. For correct recognition, they are simply separated by spaces.

Naturally, the block structure of a document does not imply the use of tags alone.

. There will always be other elements in the structure of any Internet page. Additionally, the block element itself

may have a completely different display. This is done using the display property. An element can have a line or even table display, which allows you to significantly increase the flexibility of using the block and create a site of any configuration.

Tag
. HTML properties

As mentioned above, this tag does not change the design of a page fragment, but is used to create a semantic structure with subsequent design using style sheets. The use of a closing tag for this element is required.

Although many modern browsers will be able to recognize such an error, in some cases an unclosed tag can cause the document structure to fall apart and display incorrectly.

Since this element is a block element, the content contained in it will start on a new line. To change this behavior, you need to change the block display parameters using the display property. In addition to grouping nested elements, the tag

allows you to format the layout of content within it. To do this, use the align attribute, which allows you to position text or an image to the left, right, or center of the parent element.

Block positioning

Using the position attribute allows you to change the positioning method of the selected element. So, there are three types of positioning:

Static - used by default. In this case, the element is positioned according to its position in the HTML code.
Relative. In this case, the object's position is calculated in the same way as in the case of static positioning, but this property allows you to change the position of child elements.
Its position is calculated relative to the element with relative positioning.

Other attributes

To change the position relative to the origin, the top and left attributes are used. Values can be either positive or negative. The width and height of a block element are specified by the width and height attributes, respectively. If they were not specified in style sheets, then the block will occupy the entire width of the parent element. If the content of the block does not fit across the entire width of the “parent”, then the behavior of the element is determined by the overflow attribute.

We hope this article has helped clarify the question of what is

in HTML.