Let's say a word about the div tag. How to make a block in HTML and skillfully learn how to place it on your web page Examples of web pages from div blocks

Layout begins its journey from the times when code was written in HTML and markup was done using tables. Over time, they moved away from this, and the markup was transferred to CSS. Now there are several layout methods. Modern ones include Flex-box, a set of Bootstrap tools, as well as the latest Grids, which provide enormous opportunities for creators. One of the transitional options in the development of the Web is block layout. Previously used to create entire page markup, it is now considered obsolete, but nevertheless still finds wide use in special cases.

What is block layout?

It replaced the outdated and imperfect tabular one. The page is made up of so-called layers, or blocks, and the closing tag serves as the building blocks

. This is a block tag that takes up the entire width of the parent element and the height to fit the content. Later, such layout began to be called “marvelous”. The basis for page orientation are so-called classes.

At the moment, this type of layout is significantly outdated, and the tag itself

must be used only for its intended purpose. A lot of semantically correct tags have appeared that make it easier to navigate the code. For example, there is a special tag for the navigation menu

For clarity, block layout can be represented as follows:

content

A div with class wrapper represents the parent container, or in other words, the wrapper. Elements with the element class are unique “building blocks” of our complex structure. Please note that the different margin from the edge compared to the parent element is used in the code for clarity, to make it easier to determine the structure and hierarchy of elements.

Using tables

Tabular website layout has long been a headache for all programmers. After the transition to the block model of websites, the use of tables at all, even for their intended purpose, was not encouraged for some time.

This approach is certainly inappropriate and even harmful. It forces simple things to be done in more complex and inconvenient ways. Now the table is used only to display relevant data. In other words - for its intended purpose.

Separation of roles

If previously all construction was done in HTML, block layout brought with it a complete separation of roles. Currently, HTML is used only for markup, logical formatting, and creating a page frame. The styles are completely removed and are included in a separate file that is included in the document. CSS is used to lay out elements and create an attractive and responsive design. To access a block, classes are used, which are given the name of the element. For example, for the header block we will assign the class header. This also makes the code easier to navigate. Now this is partly accomplished by specialized tags that appeared in HTML5.

Using Blocks

In block layout, the tag is actively used

. It is similar to brick when constructing a building. While constituting the basis and design of the site, it is, however, not the only one. Like doors, windows, ventilation, balconies and the like, other HTML elements are used for layout. These are links, forms, pictures, lists and tables.

Using a tag

allowed us to make the code more compact and clear. The transition to block layout made it possible to rid HTML of unnecessary things, namely styles. Made it possible to completely remove the overloaded and difficult to navigate table layout.

Actively uses CSS block layout. Using the available tools, you can create any page layout with pixel accuracy. This layout is called pixel perfect. It implies a perfect match between the site and the layout. The photo above shows that not everything is so simple with block layout. At first it was simply impossible to do without tables. These were used to create the main layout of the pages, and blocks were used for individual elements. This was the case until they learned how to set the height of blocks.

Advantages

Block website layout has the following advantages:

Further development

Currently, block div layout is deprecated and has only limited use, only as a special case for certain situations. It was replaced by positioning and flow in the layout. They had a lot of shortcomings, but on the whole they allowed more than block layout.

Next came construction using inline-block elements. This greatly facilitated the work of programmers. This method takes advantage of both types of blocks and allows you to create a more responsive and adaptive design. It is worth noting that all of these methods in one way or another consisted of a div element, which gave it the name “marvelous layout”.

Currently, Flex-box and bootstrap are used to build the page. They significantly reduce the code and make it faster and easier to create high-quality responsive design. They allow you to move blocks without breaking the entire page.

At the forefront of progress is a new technology - Grids. It allows you to create a design of any complexity very quickly and easily. And blocks, flow, positioning, as happened with tables at one time, are used only for their intended purpose.

Div layout is a current model for website creation.

New sites are constantly appearing on the Internet - news portals, blogs and personal pages. Almost every one of them is created on the basis of a block model, the basis of which is DIV blocks. Today we will understand this technology, consider the main nuances of div layout.

HTML Document Stream

If we remember that the HTML language allows you to structure hypertext information, it becomes clear that any site, at its core, is a set of blocks: pictures, text, links, etc. We're not talking specifically about DIVs right now, but they are closely related topics.

So, we have a certain stream of data from which the HTML page is assembled. At the moment, there are two types of structural elements: block and inline. Block blocks, in a normal HTML stream, are located one after the other in a vertical order. At the same time, by default, the block width takes up all the available space relative to the page or parent element. In turn, inline elements are arranged one after another in a horizontal order.

The main representatives of these two categories are div and span tags.

Accordingly, if we are talking about a normal HTML flow, all div blocks will be located under each other, and the span will be in a line.

As you understand, you won’t be able to create normal markup for a website using inline elements. Therefore, several years ago, to replace the table layout, they decided to use a layout based on DIV blocks.

DIV website layout

So, DIV blocks began to be used to mark up the site. Using them, it was possible to draw out the main layout and create additional blocks for all the necessary types of content.

Let's look at this process using the example of a standard page, which includes a header, a content block, a sidebar and a footer.

This is a classic option. The logo is most often located in the header of the site, and navigation links in the side block. The main block is used to display information - articles, company descriptions, photo archives, etc. In the lower block you can insert an address, contacts and other service information.

As you can see in the picture, we use the following main blocks to layout the layout:

header
content
footer

The Main block is used as a container for all content. Header - site header. Nav - navigation block. Content - basic information and content. Footer - site footer.

Each of these blocks is a DIV container. But based on theory, the blocks should follow each other. We need to get the layout discussed above so that the blocks have the following structure:

MAIN
- header
- content
- footer

And plus, they would be located on the page in the same way as we see on the template. How can we achieve this? For this purpose, we will use properties for the DIV blocks, which will allow us to position them in the desired way, relative to each other, and the page as a whole.

But first, let's create the HTML basis of our layout, and give the blocks names so that we can work with style sheets.

HTML framework

If we skip all the service tags, then the skeleton of our site will look like this.

Content

Navigation

For each block we have a class assigned. With its help, we will set styles for the block - this will help us achieve the desired location on the page.

It's time to get acquainted with the styles and properties that are used for div layout of the site.

CSS styles

If anyone doesn't already know, CSS style sheets have been used in website development for a long time. With their help, you can change any element on the page. This applies to both the visual design of the block and its location and scale.

Float

First, let's take a look at the property that allows you to position a DIV to the right or left of the page or relative to its parent container.

A small retreat. Whenever we assign a style to a block, it will change its properties (size, location) relative to the parent container.

The float property has four values: none, right, left, inherit.

We are interested in the meaning of "left" and "right".

The float value indicates which side our block will be displayed on. All other blocks will flow around it from the opposite side.

In our case, for the navigation block we must specify the value left , and for the main content the value right . This is what it will look like in the style file:

Nav ( float:left; ) .content ( float:right; )

By the way, you can set the property only for the navigation block. The content block will automatically be located to the right of the navigation. This will be achieved thanks to the float that is obtained by setting the float property.

Margins in CSS: margin and padding

Now let's understand two important properties used in div-based layout. They are responsible for indentation. The easiest way to understand the essence of their work is with an example.

Let's imagine what we need to do so that our main block MAIN has a slight indentation from the site header. This can be achieved by assigning a margin property to the div with the main class. It is responsible for the external padding of the block.

The margin property has the following values: [value | interest | auto] (1,4) | inherit.

Thus, you can specify the offset in pixels, in percentage, for each side in turn.

It is possible to set only a certain indent, for example on the top side. This is exactly our case. Here's how it will be implemented:

Main ( margin-top:10px; )

Now our main block will have a top padding of 10 pixels.

Now let's design a block with navigation and content. Imagine that we already have a ready-made website. All links in the navigation are located close to the left edge of the page. And the text in the content block, on the contrary, is closely adjacent to the right side. Quite an unpleasant design. We need to make internal padding.

The padding property is responsible for this, having the following values: [value | percent] (1, 4) | inherit

The principle here is the same as with the margin property - you can set the indent for each side separately.

Nav ( float:left; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )

Using these basic properties, you can achieve the desired layout of DIV blocks. As a result, you will receive a ready-made website layout, and all that remains is to fill it with the necessary information.

Video for the article:

Conclusion

We have considered only the basic properties. In reality there are many more of them. But in any case, the information provided will always be used in the div layout.

Why look for information on other sites if everything is collected here?

The author's series of articles dedicated to basics of block website layout. This is the first place to start studying the topic. website creation. The lessons will be useful for those who want to learn the basics HTML and CSS not only in theory, but in practice.

As we study the topic, we will create a website, a regular website, without any special bells and whistles, but quite nice.

In the lessons, I simply and clearly talk about block-based website layout and more. If you want to quickly understand the basics website layouts, then this series of articles will be exactly what you need.

What is block layout?

What's happened block website layout and what do you eat it with?

Previously, websites were designed using tables. Each element of the page, be it a title, text or image, was located in its own cell. These cells swarmed in other, larger cells, and those, in turn, lay in the main cell, that is, in the site page itself.

Tabular layout is now obsolete, although many webmasters continue to use it. Its big disadvantage is its heavy code. After all, every little cell needs to be designated with certain tags.

Block layout- a completely different song. Here, all page elements are located in special blocks called divs. At their core, they are somewhat similar to the same tables. A box is a box in Africa too. But blocks are much more convenient, simpler and more functional.

Block in website layout, this is a regular rectangular area that has a number of properties, such as: frame, margins and indents. The content of the block can be anything - a piece of text, a picture, a list, a form to fill out, a navigation menu, etc.

Frame- this is the outline of a block for which you can set such characteristics as thickness, color and type (dotted, solid, dotted).

Fields (padding)- separate the contents of the block from its frame so that the text, for example, is not “butt up” to the walls of the block.

Margins- this is the empty space between different blocks, allowing two blocks to be positioned relative to each other at a given distance.

Blocks, like tables, are always arranged vertically on the page. That is, if two blocks are written in a row in the page code, they will be displayed in the browser one below the other. If we need to arrange several blocks horizontally in one line, then in their properties we set a parameter such as “ flow around"(float). But more on that later.

Block layout of the site. Tags

Tag is a special construction of the HTML language. Distinguish opening And closing tags. Do not confuse them with hashtags from social networks, or tags on websites, these are different things!

In the simplest case, a tag is like a part of a children's construction set, which has its own strict purpose: a bar means a bar, a wheel means a wheel and nothing else. For example, a paragraph tag:

Paragraph text.

is always denoted by the letter p and nothing else. That's his name.

Tags are always enclosed in angle brackets. As you can see from the example, there is an opening and closing tag. The closing tag has a slash added before the name - a forward slash / .

Not all tags have a closing pair. For example, the img image tag does not have it at all. But in order to comply with modern standards and the requirements of the XHTML specification, they still add a space with a slash before the closing angle bracket. It looks something like this:

div tag

The div tag is the basis of block layout. These are the very cubes from which the entire site is built. This tag is neutral. Unlike standard HTML tags, which are strictly tied to their content (p - to paragraphs, a - to links, img - to images), the div tag can contain anything and as much of this stuff as you want. Consider it like a big box where all the toys are dumped.

The div tag is used to define functional areas on the page. For example, such as: “header”, navigation block, main content block, “footer” or footer in our opinion.

The div tag, like any other tag, has its own attributes.

Attribute- descriptive characteristics of the tag. That is, what he can do and how. For example, let's take an image tag:

In this case, src, width, height, alt are tag attributes. In quotation marks (and this is also a mandatory requirement of modern standards) are given values attributes.

It is not difficult to decipher such a recording. The tag indicates that in this place of the page you need to attach the image risunok.jpg from the images folder. The width of the image is 200 pixels, the height is 50 pixels. And to the heap, alternative text has been added that explains what is shown in the picture.

By the way, alternative text is not a whim, but also a necessary requirement. Not all netizens have good eyesight. Someone uses a text recognition and reading program. And some people simply turn off the display of images in the browser. That’s why there are alternative captions for drawings.

If there is no point in signing them (for example, a list marker or some kind of arrow), then the alt attribute is left with an empty space between the quotes.

div tag attributes

The div tag has only two attributes:

id - an attribute that allows you to assign unique value, that is, the one that is used on the page just one time. For example, header or footer.

This way, we can further set some settings in the style sheet for the div tag with the id attribute and the header value, and completely different ones for the footer. And the browser correctly recognizes that this piece of text belongs to the “header” and will be typed, for example, in large and red font, but this one belongs to the “footer” and will be typed in small and gray font. And no confusion!

class is an attribute that allows you to assign the same value to several elements. For example, add a frame of the same thickness and color to all images on the page. Since there are several images, the id attribute can no longer be used, so we use class .

For the first time, I think that's enough. If something is unclear about the block layout of websites, ask in the comments.

To be continued. Stay in touch!

Layout with div blocks has long become a standard and has a number of advantages over tabular layout. However, in reality, novice developers are confused about the behavior of these same blocks.

Let's look at the main points of block layout. Now we will not take into account the html5 standard, but will simply look at the basics of layout with div blocks, which is used when creating a layout or some individual page component.

What is considered a block element?

The area of such an element on the page is represented by a rectangle; by default, it occupies the entire available width and starts on a new line.
The most common element used in block layout is the universal element

So, from simple to complex. Let's see how divs appear by default without styles affecting their position. For clarity, we will add styles to elements inline, through the style attribute.

Block 1

Block 2

Block 3

Let's add a width value for each block:

Block 1

Block 2

Block 3

It can be seen that each block, according to the specification, is located on a new line. This is their normal behavior.

Now the question arises, how to position div blocks on one line, one after another?

For this purpose, there is a property that determines on which side the block will be forced to align. At the same time, from the other edge, it can flow around other elements.

The float property has the following meanings:

left - the block is aligned to the left edge, flowing to the right
right - the block is aligned to the right edge, flowing to the left
none - no wrapping is specified, the block behaves by default, as in the previous examples.

Let's add float:left to our blocks so that the blocks are aligned to the left:

Block 1

Block 2

Block 3

As a result, the blocks lined up on one line. Okay, let's say we wanted to add another div at the bottom, and we'll do it without specifying the float property:

Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Block 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Block 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit

Unit 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Why did this happen? In short, this happens because floated elements fall out of the flow of the document. However, this is a topic for a separate article. Here we will get acquainted with the new property, which controls the behavior of floating elements:

left - disables wrapping on the left side, all elements will be shown on a new line (under the element)
rigth - prevents the element from wrapping on the right side
both - prohibits wrapping an element on both sides; it is recommended to use it when you clearly need to show the element on a new line or it is unknown which side it is possible to wrap around other elements

Let's add the clear:left property to Block 4, which will prevent this element from flowing around other floating elements on the left side.