Руководство по div - Большая энциклопедия инструкций и руководств

If you’re venturing into website design or development, you’ll likely encounter HTML divisions, or «divs», in your coding journey. These handy HTML divs allow developers to split their webpage into distinct sections, each capable of taking on unique styles through CSS.

Web pages can be considered as three primary chunks: the header, the footer, and the main body, which comprises various sections such as products, services, testimonials, team members, and more. These sections, which could feature different colors, fonts, backgrounds, or layouts, owe their versatility to the HTML ‘div’ element. This content division tool enables customization of each section with unique CSS properties, allowing a wide range of styling possibilities.

In this post, we’ll look at what this element is, what it does exactly, and why you’d want to use it on your own site. But first, here’s a video that can walk you through everything you need to know about divs.

What is the <div> tag in HTML?

In HTML, the <div> tag is a generic block-level container for other elements.

Let’s look at a few key terms in this definition.

First, a div is a “generic” container because it doesn’t describe the content it contains. Other elements like <nav>, <header>, <footer>, and <form> clearly describe the content they contain and are known as semantic HTML elements. You should always use a semantic element over a div when possible because it makes your code more accessible and easier to maintain.

Second, a div is a block-level container. To understand what that means, let’s compare a div to a span element, which is an inline container.

The are several key differences between a block-level and an inline container. For example, a div always starts on its own line, whereas a span stays in line (inline — get it?). A div also takes up the full width of the page, and a span does not. That means that if you have multiple divs in a row, they will appear stacked on top of each other on the front end. Spans, on the other hand, can exist side by side. The last major difference is that you can define the height and width of a div, but you can’t for a span.

Third, the elements that can be contained in a div are known more specifically as “palpable content” or “flow content.” Palpable content is basically any HTML element that contains text or embedded content, and flow content is basically any element used in the body of HTML docs. So the anchor, block quote, audio, image, paragraph, and heading elements are all considered palpable or flow content, and can be placed inside a div.

Where does a <div> tag go in HTML?

Divs go in the body section of an HTML file. This is clearly marked by <body></body> tags in an HTML file. (Note: these tags are often left out in code editors, like CodePen.)

To create a div element, you must use an opening and closing tag. You can place the elements you want to group together inside these tags. Often, these will appear indented, as shown below.

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

Now that we understand the definition and syntax of the div element in HTML, let’s take a closer look at what it does exactly.

What does div do?

The <div> tag doesn’t technically do anything. It can help organize an HTML file into sections on the back end, but that won’t affect how those sections display on the front end. It does, however, allow these sections to be easily styled with CSS.

To style these sections with CSS, you must add a class or ID attribute to the div element. You’ll then use a CSS selector to apply unique style properties to the elements contained within the div.

Before we dive into an example with CSS, let’s first look at an example of an unstyled div element.

Here’s the HTML and result:

See the Pen XWMWmYO by Christina Perricone (@hubspot) on CodePen.

Now that you know a div element doesn’t do anything on its own, you might be wondering why you’d even use one. We’ll look at a few use cases below.

Why use div in HTML?

Most commonly, you’ll use the div element to group sections of code that you want to target with CSS. You can style them to look different from other sections on the page, or to position them differently. You can also use a div and language attribute to change the language of a particular section on the page.

Below let’s take a closer look at these uses cases.

<Div> Tag Examples

The <div> tag is best used to add styling or to mark up semantics common to a group of consecutive elements. Here are some examples of styles or semantics you can add with the div element.

Example 1: <Div> Tag with Lang Attribute

Let’s start with the easiest example. Say the default language of the text on a web page is English, but a section is in another language. To mark this particular section on a web page, simply place the elements inside a div. Then, add a language attribute and set it to the language you want. For the sake of this demo, I’ll set it to French.

Here’s the HTML:

<p>The default language of the web page is in English. But below is a sentence in French, which is marked accordingly in the code.</p>

<p>Dans le numéro de novembre de Marie Claire, une erreur s’est glissée dans la rubrique Mode Actualités.</p>

</div>

<p>This is some text in English outside the div element. </p>

</article>

This would set the language of the heading and paragraph inside the div at once, so you don’t have to set the language of each element separately. The elements outside the div would remain set to the default language (English).

Now let’s look at an example of when you’d use a div to change the appearance of a section of your web page.

Example 2: <Div> Tag with Class Attribute

To change the style of the div, you’ll start in the same way as you did above, but instead of adding a language attribute, you’ll add an ID or class attribute. You’ll then use the corresponding selector to add the CSS you want.

Say you want to style a particular heading and paragraph on the page, and leave the rest unstyled. Then you’d wrap the individual heading and paragraph in a div element and give it a classname. For the sake of this demo, we’ll use “myDiv” as the class name.

Here’s the HTML:

<h2>This is a heading in a div element</h2>

<p>This is some text in a div element.</p>

</div>

<p>This is some text outside the div element.</p>

Then in the head section of your HTML doc or in an external stylesheet, you can use the class selector .myDiv and define whatever CSS properties you want. For this demo, we’ll use the border, background color, text-align, and color properties.

Here’s the CSS:

.myDiv {
font-family: ‘Arial’;
font-weight: bold;
  border: 5px outset #00A4BD;
  color: #2D3E50;
background-color: #EAF0F6;
  text-align: center;
}

Here’s the result:

See the Pen Styled div by Christina Perricone (@hubspot) on CodePen.

Example 3: <Div> Tag as Flexbox

Now let’s look at an example of when you’d use div to change the positioning or layout of a section of your web page.

Say, I want to create a flexbox grid with seven columns. I’d start by creating seven div elements and then placing them inside another div element. I’d add the .flex-container class to this parent div.

Here’s the HTML:

<code-block data-line-numbers=»true»>
<code-tab data-escaped=»true» data-language=»html» data-label=»HTML»>
<body>
<h1>Flexbox Container</h1>
<p>Notice how the flex items shrink and expand as the browser is resized, but do not fill the entire container once the viewport exands beyond a particular point.</p>
<div class=»flex-container»>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
</body>
</code-tab>
</code-block>

Then, in the head section of my doc or in an external stylesheet, I’d use the class selector .flex-container to make the container flexible. After setting the display property to flex, I’d specify the height of the container as well as the background color. To style the flex items within the container, I’d use the selector .flex-container > div.

Here’s the CSS:

.flex-container {
  display: flex;
  height: 200px;
  background-color: #00A4BD;
}
.flex-container > div {
  background-color: #EAF0F6;
  width: 90px;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
flex: 1 1 200px;
}

Here’s the result:

See the Pen <Div> Tag as Flexbox by Christina Perricone (@hubspot) on CodePen.

Take a look at how the flex container and items behave as the browser is resized:

You can find similar examples in the post Here’s the Difference Between Flexbox, CSS Grid, & Bootstrap.

Dividing Up Your HTML

Divs are one of the most commonly used elements in HTML. While it has multiple purposes, its primary one is grouping HTML elements so you can style them with CSS. This makes the div element instrumental in customizing your website to look exactly the way you want. The best part is it’s easy to use.

Источник

Элемент <div> (от англ. division — раздел, секция) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.

Как и при использовании других блочных элементов, содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.

Синтаксис

<div>...</div>

Атрибуты

Для этого элемента доступны универсальные атрибуты и события.

Устаревшие атрибуты

align: Задаёт выравнивание содержимого <div>.

Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты элементов HTML, которые были частью предыдущих версий HTML,
но больше не поддерживаются в последних версиях стандарта. Использование таких атрибутов не
рекомендуется, поскольку они противоречат современной идеологии HTML и могут не поддерживаться
последними версиями браузеров.

Добавлять к элементам HTML устаревшие атрибуты не надо, взамен применяются стили или другие элементы HTML.

Пример

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>DIV</title>
<style>
.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;
border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}
</style>
</head>
<body>
<div class=»block1″>Почвообразовательный процесс физически
иссушает монолит в полном соответствии с законом Дарси.
В лабораторных условиях было установлено, что сушильный шкаф
теоретически возможен. Выветривание, несмотря на внешние
воздействия, однократно.</div>
<div class=»block2″>Конкреция пространственно трансформирует
пирогенный псевдомицелий, хотя этот факт нуждается в
дальнейшей тщательной экспериментальной проверке.</div>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид блоков, оформленных с помощью стилей

Спецификация

Спецификация	Статус
HTML Living Standard	Живой стандарт
HTML 4.01 Specification	Заменённая рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


6	12	1	6	1	1

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Практика

Источник

Тег <div> (от англ. division — раздел) является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.

Демо¶

Текстовые блоки

blockquote
dd
div
dl
dt
hr
li
ol
p
pre
ul

Синтаксис¶

Закрывающий тег обязателен.

Атрибуты¶

Для этого элемента доступны универсальные атрибуты.

Спецификации¶

WHATWG HTML Living Standard
HTML 5
HTML 4.01 Specification

Описание и примеры¶

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>DIV</title>
        <style>
            .block1 {
                width: 200px;
                background: #ccc;
                padding: 5px;
                padding-right: 20px;
                border: solid 1px black;
                float: left;
            }
            .block2 {
                width: 200px;
                background: #fc0;
                padding: 5px;
                border: solid 1px black;
                float: left;
                position: relative;
                top: 40px;
                left: -70px;
            }
        </style>
    </head>
    <body>
        <div class="block1">
            Почвообразовательный процесс физически иссушает
            монолит в полном соответствии с законом Дарси. В
            лабораторных условиях было установлено, что
            сушильный шкаф теоретически возможен.
            Выветривание, несмотря на внешние воздействия,
            однократно.
        </div>
        <div class="block2">
            Конкреция пространственно трансформирует
            пирогенный псевдомицелий, хотя этот факт
            нуждается в дальнейшей тщательной
            экспериментальной проверке.
        </div>
    </body>
</html>

Ссылки¶

Тег <div> ^{MDN (рус.)}

Источник

The HTML division tag, called «div» for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.

The div tag is one of the most used tags and doesn’t seem to be going anywhere despite the introduction of semantic elements (these elements let you use several tags as a container).

In this tutorial, I will show you the various things you can do with the div tag, how you can use multiple divs the same HTML file without getting confused, and how to style it.

When to Use the `div` Tag

The div tag is multi-purpose – you can use it to do several things on a web page. You’ll mostly use it in web layouts and CSS art, but it’s super flexible.

Ultimately, you’ll almost always to use it to style whatever it contains or manipulate such things with JavaScript.

1. Use `div` in Web Layouts

You’ll primarily use the div tag to group similar content together so you can style it easily. A great example of this is using div to group different sections of a webpage together. You can put together the header, nav, sections, and footer of a page in an individual div tag so they can be styled together.

Later in this tutorial, I will take you through how to make a web layout with multiple div tags without getting confused.

Div itself does not have a direct effect on the presentation of the content unless you style it.

2. Use `div` in CSS Art

With the div tag, you can make various shapes and draw anything because it is easy to style.

How to make a square with the div tag

To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.

<div class="square"></div>

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }
.square {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
    }

square

How to make a circle with the div tag

You can make a circle with the div tag by coding an empty div in the HTML, setting an equal height and width for it in the CSS, then a border-radius of 50%.

<div class="circle"></div>

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

    .circle {
      background-color: #2ecc71;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

circle

How to make the Nigerian flag with CSS

Making the Nigerian flag with the div tag is not that hard. The flag is a rectangular shape with the colors green, white, and green.

To make it, define 3 div tags and attach different classes, then style them appropriately in the CSS.

<div class="naija-flag">
    <div class="first-green"></div>
    <div class="white"></div>
    <div class="second-green"></div>
</div>

.naija-flag {
  display: flex;
}
.first-green {
  height: 100px;
  width: 60px;
  background-color: green;
}
.white {
  height: 100px;
  width: 60px;
  background-color: white;
}
.second-green {
  height: 100px;
  width: 60px;
  background-color: green;
}

As we discussed above, the div tag is very easy to style. It’s one of the reasons why many developers use it to group similar content.

The div tag accepts almost all CSS properties without a problem. Let’s look at a few examples of that now.

1. How to Apply Font Properties with `div`

You can apply the CSS properties such as font-size, font-family, font-weight, and font-style on content grouped together with the div tag:

<div class="font-properties">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
        ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
      </p>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
        ipsam eaque rem dicta, quos quas ipsum.
      </p>
</div>

body {
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

.font-properties {
      font-family: cursive, sans-serif;
      font-size: 1.3rem;
      font-weight: bolder;
      font-style: italic;
    }

font

2. How to Apply Color with the Div Tag

You can apply the CSS color and background-color properties on content grouped together with the div tag:

<div class="color-properties">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
  </p>
</div>

.color-properties {
  color: white;
  background-color: #2ecc71;
}

color

3. How to Style Texts with the Div Tag

You can apply the CSS text-transform and text-decoration properties on a div tag like this:

<div class="text-properties">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate quo
    ullam modi alias assumenda, itaque libero? Quas quidem sint illo.
  </p>
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
    ipsam eaque rem dicta, quos quas ipsum.
   </p>
</div>

.text-properties {
    text-transform: uppercase;
    text-decoration: underline;
  }

text

4. How to Create a Shadow Effect with the Div Tag

You can create a shadow effect with the div tag with the box-shadow property:

<div class="box-shadow">
      <p>
        Before paying to learn programming, checkout freeCodeCamp.org
        <br />
        The HTML, CSS, and JavaScript curricula would take you from zero to hero
        in web development.
      </p>
      <p>
        There is a Python curriculum that will get you a considerable knowledge
        in Python <br />
        And an upcoming Data Science curriculum.
      </p>
</div>

.box-shadow {
      font-family: cursive, sans-serif;
      background-color: #2ecc71;
      color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 2px 2px 20px 23px #7fecad;
    }

What’s happening in the CSS above?

I was able to create the shadow effect with the CSS box-shadow property.

The first value (2px) represents the offset on the x-axis (offset-x)
The second (another 2px) represents the offset on the y-axis (offset-y)
The next 20px is for the blur-radius, that is, how blurry you want the shadow to be.
The 23px value is the spread radius (how far you want the shadow to spread)
The last value is the shadow color – in this case, #7fecad.

The output looks like this:

How to Use Multiple Div Elements without Getting Confused

Div tags are commonly used to group similar content together. In older and even some newer web pages, you’ll find divs all around, despite the fact that semantic tags are recommended for accessibility and better SEO.

Since div tags are still very common, I recommend applying class and id attributes to them so you can manipulate individual div elements with those attributes.

I will walk you through how to put this into practice by making a basic web layout.

The first section you’ll want to make is the header, containing the logo and navbar:

 <div class="header">
      <h2 class="logo">freeCodeCamp</h2>

      <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Serices</a></li>
        <li><a href="">Contact</a></li>
      </ul>
</div>

Before styling the navbar, I made some CSS resets to make things align correctly and display nicely:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

.hero,
.about,
.services,
.contact {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

In the code snippet above:

I removed the default margin and padding
I set a maximum width for the main sections so they don’t go all across for better UX
I set a margin at the bottom of each section to give them some space
I set a margin 0 at the top and bottom, auto on the left and right to center them.

To style the navbar appropriately, I will grab the container div tag with its class attribute, header. I’ll give it a display of flex, alongside some other properties to lay it out nicely. I will also grab the div wrapped around the navbar (ul element) by its class and lay it out with Flexbox.

.header {
      padding: 0 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.nav {
      display: flex;
      align-content: center;
      justify-content: center;
      gap: 60px;
      list-style-type: none;
    }

.nav li a {
      text-decoration: none;
      color: black;
      font-size: 1.2rem;
    }

For the remaining sections apart from the footer, the HTML and stylings are generic:

<div class="hero">
      <h1>Hero Section</h1>
</div>
<div class="about">
      <h1>About Us</h1>
</div>
<div class="services">
      <h1>Our Services</h1>
</div>
<div class="contact">
      <h1>Contact Us</h1>
</div>
<div class="footer">
      <p>&copy; 2021 All Rights Reserved</p>
</div>

.hero {
      background-color: #eee;
      height: 200px;
    }

.hero h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.about {
      background-color: #eee;
      height: 200px;
    }

.about h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.services {
      background-color: #eee;
      height: 200px;
    }

.services h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.contact {
      background-color: #eee;
      height: 200px;
    }

.contact h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.footer {
      background-color: #777;
      height: 40px;
    }

.footer p {
      margin: 0 auto;
      line-height: 1.7;
    }

I gave the individual sections a greyish background color and a height of 200px. I positioned the h1 tags inside in their centers with Flexbox and applied a line height of 1.5 to each of them.

Finally, I gave the footer a deeper grey background color to make it distinct, and centered the content in it with a line height of 1.7.

The resulting layout looks like this: layout

Conclusion

The HTML div tag is commonly used among web developers everywhere.

Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. This is because semantic tags are better for accessibility and SEO.

In short, the div tag remains useful and isn’t going anywhere anytime soon, so feel free to use it when necessary.

Thank you for reading and have a nice time.

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник

Тег <div> — пустой контейнер, который определяет разделение или раздел. Он не влияет на контент или макет и используется для группировки HTML-элементов, которые должны быть написаны с помощью CSS или с помощью скриптов.

Мы рекомендуем использовать тег <div> только в случае, когда нецелесообразно использовать семантические элементы HTML5, такие как <nav> , <main> или <article>.

Тег <div> является блочным элементом, поэтому разрыв строки помещается до и после него.

Вы можете поместить любой элемент HTML в тег <div>, включая другой тег <div>.

Тег <div> не может быть дочерним элементом <p>, так как параграф будет разорван в месте включения тега <div> .

Для применения стилей внутри параграфа используется тег <span>.

Синтакс

Тег <div> — парный, состоит из двух частей, открывающего (<div>) и закрывающего (</div>) тегов.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега &lt;div&gt;</title>
  </head>
  <body>
    <h1> Тег &lt;div&gt; </h1>
    <div style="background-color:#8ebf42">
      <p> Мы использовали тег &lt;div&gt;, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span style="color:#1c87c9"> этого слова</span> мы использовали тег &lt;span&gt;.</p>
      <p> Обратите внимание, что тег &lt;div&gt; является блочным элементом, до и после него добавляется разрыв строки.</p>
    </div>
  </body>
</html>

Результат

При верстке HTML страниц с помощью слоев тег <div> является ее базовым фундаментом, так как именно этот тег определяет многочисленные структурные блоки веб-страницы.

Для корректного отображения блоков на странице необходимо их правильно расположить. Различают несколько способов расположения блоков в зависимости от целей и контента страницы. Давайте рассмотрим несколько из них.

Флексбокс¶

Спецификация CSS Flexible Box успешно пришла на замену верстке float-ами. Flexbox позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .flex-container {
      display: flex;
      align-items: center; /* Подставьте другое значение и посмотрите результат */
      width: 90%;
      height: 300px;
      background-color: #1c87c9;
      }
      .flex-container > div {
      width: 25%;
      padding: 5px 0;
      margin: 5px;
      background-color: lightgrey;
      text-align: center;
      font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>
</html>

Результат

CSS свойство float ¶

CSS свойство float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. С помощью свойства float можно размещать элементы по горизонтали рядом друг с другом, что позволяет верстать типовые фрагменты веб-страниц, вроде врезок, горизонтальных меню, каталога товаров, колонок и др.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок страницы</title>
    <style>
      .content {
      overflow: auto;
      border: 3px solid #666666;
      }
      .content div {
      padding: 10px;
      }
      .content a {
      color: darkblue;
      }
      .blue {
      float: right;
      width: 45%;
      background: #1c87c9;
      }
      .green {
      float: left;
      width: 35%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Параграф в блоке div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Параграф в блоке div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 1</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат

Отрицательные отступы ¶

Использование отрицательных отступов (negative margins) открывает широкие возможности и позволяет сделать верстку более универсальной.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      .content div {
      padding: 2%;
      }
      .content a {
      color: darkblue;
      }
      .main-content {
      width: 30%;
      margin-left: 32%;
      }
      .blue {
      width: 25%;
      margin-top: -10%;
      background: #1c87c9;
      }
      .green {
      width: 20%;
      margin: -35% auto auto 70%;
      background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="main-content">
        <a href="#">Гиперссылка в теге div.</a>
      </div>
      <div class="blue">
        <p>Параграф в теге div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div class="green">
        <p>Параграф в теге div.</p>
        <ol>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ol>
      </div>
    </div>
  </body>
</html>

Результат

Позиционирование Relative + absolute positioning¶

Комбинация разных типов позиционирования для вложенных элементов — один из удобных и практичных приемов верстки. Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .content { position: relative; height: 400px; border: 1px solid #666666;}
      .content div { position: absolute; width: 35%; padding: 10px; }
      .blue { right: 20px; bottom: 0; background: #1c87c9; }
      .green { top: 10px; left: 15px; background: #8ebf42; }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="blue">
        <p>Параграф в теге div.</p>
      </div>
      <div class="green">
        <p>Параграф в теге div.</p>
      </div>
    </div>
  </body>
</html>

Результат

position: relative не влияет на позиционирование элементов в нормальном потоке, если вы не добавляете смещения.

Тег <div> поддерживает глобальные атрибуты и атрибуты событий.

Источник

What is the <div> tag in HTML?

Where does a <div> tag go in HTML?

What does div do?

Why use div in HTML?

<Div> Tag Examples

Example 1: <Div> Tag with Lang Attribute

Example 2: <Div> Tag with Class Attribute

Example 3: <Div> Tag as Flexbox

Dividing Up Your HTML

Синтаксис

Атрибуты

Устаревшие атрибуты

Пример

Спецификация

Браузеры

См. также

Практика

Демо¶

Синтаксис¶

Атрибуты¶

Спецификации¶

Описание и примеры¶

Ссылки¶

When to Use the div Tag

1. Use div in Web Layouts

2. Use div in CSS Art

1. How to Apply Font Properties with div

2. How to Apply Color with the Div Tag

3. How to Style Texts with the Div Tag

4. How to Create a Shadow Effect with the Div Tag

How to Use Multiple Div Elements without Getting Confused

Conclusion

Синтакс

Пример

Результат

Флексбокс¶

Пример

Результат

CSS свойство float ¶

Пример

Результат

Отрицательные отступы ¶

Пример

Результат

Позиционирование Relative + absolute positioning¶

Пример

Результат

When to Use the `div` Tag

1. Use `div` in Web Layouts

2. Use `div` in CSS Art

1. How to Apply Font Properties with `div`