The Internet, Web design

Block layout of div tags HTML

Still some ten years ago in runet most often used so-called table layout. In view of the fact that the standards of some browsers differed significantly from each other, it was necessary to search for a solution that would allow correctly displaying the Internet document in all applications. But time passed, standards evolved, and a rigid and inflexible tabular was replaced by a well-adjusted and responsive block layout. At the forefront of this technology lies the principle of using elements

. HTML-documents mostly began to be built on the basis of separate blocks, which, unlike table layout, can be independent of each other.

Occurrence

The complication of web pages and the development of computer technology led to the fact that the web document was divided into two parts - a skeleton (HTML-code) and design (style sheets). Thanks to this, we managed to achieve an 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 allowed us to define our design rules for each individual element. This helped improve the readability of the code of the web page and reduce the load time of the document. Now the search engines are much faster and better handle the information available on the site.

Standards and verification

The

tag in HTML is used in strict accordance with the W3C (World Wide Web Consortium) standards. The page code is checked by a special tool - the validator, which parsit (scans and searches) every possible error on the page. A valid page means that all tags have been used correctly and fully meet the requirements of the standards.

Tags

allow you to create blocks or, as they are called, containers. In this case, individual elements can be embedded into each other, creating structures of the necessary configuration and complexity. Using a
tag without an escort by a class or an identifier is almost never encountered. This is due to the "facelessness" of the element. If he does not assign a class, then in the end all containers will have the identical configuration.

In order to create a truly valid document, you must use the following structure of the

class = "some_name" tag. Referring to the class name, in the style sheets, you can determine the position, size, lead and other parameters of an individual block in the document.

Using classes and identifiers

The

HTML block can be defined either by id or class. 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 define unique elements that are not repeated anywhere else in the page code. The class attribute allows you to apply the same style rules to several elements. This approach greatly simplifies the development and support of code. 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 the document does not at all imply the use of only one

tag. In the structure of any Internet page there will always be other elements. In addition, the block
element itself can have a completely different kind of mapping. This is done using the display property. The element can have a line or even a table display, which allows you to significantly increase the flexibility of using the block and create a site of any configuration.

The
tag. HTML properties

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

Despite the fact that many modern browsers will be able to recognize this error, in some cases, an unclosed tag can cause the document structure to fall apart and not display correctly.

Since this element is block, the content contained in it will begin with a new line. To change this behavior, you must change the display settings of the block with the display property. In addition to grouping the nested elements, the

tag allows you to format the location of the content inside it. To do this, you use the align attribute, which allows you to place text or image on the left, right, or center of the parent element.

Positioning blocks

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

  • Static (static) - is used by default. In this case, the element is positioned according to the position in the HTML code.
  • Relative. In this case, the location of the object is calculated in the same way as in the case of static positioning, but this property allows you to change the position for the children.
  • Absolute (absolute). Its position is calculated relative to the element with relative positioning.

Other attributes

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

We hope that this article helped to understand the question of what is

in HTML.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 en.atomiyme.com. Theme powered by WordPress.