Layout begins its journey from the time when the code was written in HTML, and markup was performed using tables. Over time, they moved away from this, and the markup was shifted to CSS. Now there are several layout methods. Flex-box, Bootstrap toolkit, as well as the latest Grids, giving great opportunities to creators, can be considered modern. One of the transitional options in the development of the Web is a block layout. Previously used to create markup for the entire page, now it is considered obsolete, but nevertheless it is still widely used in special cases.
What is block layout?
It replaced the obsolete and imperfect tabular. A page is made up of so-called layers, or blocks, and the closing <div> tag serves as bricks for this. This is a block tag that takes up the entire width of the parent element and the height in size of the content. Later this layout was called "wondrous." The basis for page orientation are the so-called classes.
Currently, this type of layout is significantly outdated, and the <div> tag itself should be used only for its intended purpose. There is a mass of semantically correct tags that facilitate orientation in the code. For example, for the navigation menu, there is a special <nav> tag.
For clarity, block layout can be represented as follows:
<div class = "wrapper">
<div class = "element1"> content </div>
<div class = "element2"> content </div>
<div class = "element3"> content </div>
</div>
A div with a wrapper class is the parent container or, in other words, a wrapper. Elements with the element class are a kind of "bricks" of our complex structure. Please note that different indentation from the edge, in comparison with the parent element, is used in the code for clarity, so it is easier to determine the structure and hierarchy of elements.
Using tables
The table layout of sites has long been a headache for all programmers. After switching to the block model of sites for some time, the use of tables in general was not welcomed, even for its intended purpose.
This approach, of course, is impractical and even harmful. It forces simple things to do in more complex and inconvenient ways. Now the table is only used to display the corresponding data. In other words - for its intended purpose.
Separation of roles
If earlier all the construction was done in HTML, block layout brought with it a complete separation of roles. Now HTML is used only for layout, logical formatting and page frame building. Styles are completely made up and included in a separate file that is included in the document. CSS is used to place elements and create an attractive and responsive design. To access the block, classes are used that specify the name of the element. For example, for the header block, we will assign the header class. It also makes it easier to navigate the code. Now, this is partially done by specialized tags introduced in HTML5.
Using <div> Blocks
With block layout, the <div> tag is actively used. It is similar to a brick in the construction of a building. Forming the basis, the design of the site, it, however, is not the only one. Like doors, windows, ventilation, balconies and the like, other HTML elements are also used for layout. These are links, forms, pictures, lists and tables.
Using the <div> tag allowed us to make the code more compact and descriptive. The transition to block layout allowed to save html from unnecessary, namely from styles. It made it possible to completely remove the overloaded and difficult to orient table layout.
Actively uses CSS block layout. Using the available tools, you can create any page construction accurate to a pixel. This layout is called pixel perfect. It implies a perfect match of the site with the layout. In the photo presented above, it is clear that with block layout it is not so simple. At first, it was simply impossible to do without tables. They were used to create the basic construction of pages, and blocks were used for individual elements. That was until we learned how to set the blocks height.
Advantages
Block layout of the site has the following advantages:
- There are no transparent pixel-wide borders, as was the case with table layout.
- Blocks are easy to position relative to each other.
- Blocks can be resized to create responsive designs.
- The ability to overlap does not violate the construction of the page, but allows you to add interesting effects.
Further development
Currently, the block layout of the div is obsolete and finds only limited use, only as a special case for certain situations. Her layout was replaced by positioning and flow. They had a lot of flaws, but in general they allowed more than block layout.
Next came the construction using inline-block elements. This greatly facilitated the work of programmers. This method has the advantages of both types of blocks and allows you to create a more responsive and adaptive design. It is worth noting that all these methods somehow consisted of a div element, which gave the name "marvelous layout".
Currently, Flex-box and bootstrap are used to build the page. They significantly reduce the code and allow faster and easier to create high-quality responsive design. They make it possible to move blocks without breaking the entire page.
At the forefront of progress is a new technology - Grids. It allows you to quickly and easily create a design of any complexity. And blocks, flow, positioning, as happened with tables at one time, are used only for their intended purpose.