Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

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

Синтаксис

<div>...</div>

Атрибуты

align
Задает выравнивание содержимого тега <div>.
title
Добавляет всплывающую подсказку к содержимому.

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег DIV</title>
  <style type="text/css">
   .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>Lorem ipsum dolor sit amet, consectetuer 
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
   dolore magna aliguam erat volutpat.</div>
  <div>Ut wisis enim ad minim veniam, quis nostrud 
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex 
   ea commodo consequat.</div> 

 </body>
</html>

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

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

: Элемент разделения контента — HTML

Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Являясь «чистым» контейнером, элемент <div>, по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id, помечать раздел документа, написанный на разных языках (используя атрибут lang), и так далее.

К этому элементу применимы глобальные атрибуты.

Заметка: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов

<div> на странице.

  • Элемент <div> следует использовать только в том случае, если никакой другой семантический элемент (такой как <article> или <nav>) не подходит.

Простой пример

<div>
  <p>Любой тип контента. Например,
  &lt;p&gt;, &lt;table&gt;. Все что угодно!</p>
</div>

Результат будет выглядеть так:

Стилизованный пример

Этот пример создаёт прямоугольник с тенью, применяя стили к  <div> с помощью CSS. Заметьте, что использование атрибута class на элементе <div>

даёт применение стилей "shadowbox" (в дословном переводе означает «теневая коробка») к элементу.

HTML
<div>
  <p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.</p>
</div>
CSS
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
Результат

BCD tables only load in the browser

HTML тег

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

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

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

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

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

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

Синтакс

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега &lt;div&gt;</title>
  </head>
  <body>
    <h2> Тег &lt;div&gt; </h2>
    <div>
      <p> Мы использовали тег &lt;div&gt;, чтобы сгруппировать два параграфа и добавить фон к тексту, а для того, чтобы изменить цвет <span> этого слова</span> мы использовали тег &lt;span&gt;.</p>
      <p> Обратите внимание, что тег &lt;div&gt; является блочным элементом, до и после него добавляется разрыв строки.</p>
    </div>
  </body>
</html>
Попробуйте сами!

Результат¶

Расположение блоков <div>¶

При верстке 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>
      <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>
      <div>
        <p>Параграф в блоке div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div>
        <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>
      <div>
        <a href="#">Гиперссылка в теге div.</a>
      </div>
      <div>
        <p>Параграф в теге div.</p>
        <a href="#">Гиперссылка в теге div.</a>
        <ul>
          <li>Элемент списка 1</li>
          <li>Элемент списка 2</li>
        </ul>
      </div>
      <div>
        <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>
      <div>
        <p>Параграф в теге div.</p>
      </div>
      <div>
        <p>Параграф в теге div.</p>
      </div>
    </div>
  </body>
</html>
Попробуйте сами!

Результат¶

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

Атрибуты¶

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

Как добавить стиль к тегу <div> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <div>:

Цвет текста внутри тега <div>:

Стили форматирования текста для тега <div>:

Другие свойства для тега <div>:

Поддержка браузера


Тег div



Пример

Раздел документа, который будет иметь светло-голубой цвет фона:

<div>
  <h4>This is a heading</h4>
  <p>This is a paragraph.</p>
</div>

Определение и использование

Тег <div> определяет деление или раздел в документе HTML.

Элемент <div> часто используется в качестве контейнера для других элементов HTML для их стиля с помощью CSS или для выполнения определенных задач с помощью JavaScript.

Поддержка браузера

Элемент
<div>ДаДаДаДаДа

Советы и примечания

Совет: Элемент < div > очень часто используется вместе с CSS для компоновки веб-страницы.

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

Различия между HTML 4,01 и HTML5

Атрибут align не поддерживается в HTML5.

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
justify		Не поддерживается в HTML5.
Задает выравнивание содержимого внутри элемента <div>

Глобальные атрибуты

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

Атрибуты события

Тег <div> также поддерживает Атрибуты событий в HTML.

Похожие страницы

Учебник по HTML: HTML Blocks

Учебник по HTML: HTML Layout

Ссылка на HTML DOM: Div Object

Параметры CSS по умолчанию

MOST-браузеры будут отображать элемент <div> со следующими значениями по умолчанию:

Пример

div {
    display: block;
}

Span и Div

Все в HTML предназначено для того, чтобы придать контенту некое значение. В то время как большинство HTML тегов в полной мере выполняют это предназначение (тег <p> создает параграф, тег <h2> – заголовок и т.д.), тег <span> и тег <div> никакого значения не имеют, что может вызвать некоторые сомнения в необходимости их существования. Однако эти теги используются чрезвычайно активно совместно с технологией CSS.

Они используются для того, чтобы группировать области HTML кода и затем подключать к этой группе определенные стили CSS. Это осуществляется при помощи атрибутов class и id, ассоциирующих данные элементы с селекторами класса или идентификатора CSS.

Разница между тегом <span> и тегом <div> заключается в том, что элемент <span> является строчным и обычно используется для группирования небольших областей строчного HTML кода, а элемент <div> является блоковым (что, грубо говоря, выражается в наличие перевода строки до и после этого элемента) и используется для группирования более крупных областей кода.


<div>
   <p>Это <span>здорово</span></p>
</div>

Элементы <div> и особенно <span> не должны использоваться слишком часто. Если есть разумная альтернатива, то всегда следует использовать именно ее. Например, если вам нужно выделить слово «здорово» и шрифт в классе «paper» определен как жирный, то этот код может выглядеть следующим образом:


<div>
   <p>Это <strong>здорово</strong></p>
</div>

Если вы еще ничего не знаете о классах и идентификаторах, то не переживайте, все это описано в учебнике «CSS начального уровня». Все что вы сейчас должны запомнить, это то, что элементы <span> и <div> – теги «без значений».

Метатеги Вверх Промежуточные итоги

| lesson-web.ru

И последний урок в этом разделе, последний тег, который мы с вами изучим, —  это тег «div». На самом деле, этот тег самый важный из тех, что вы изучали до этого. Это самый-самый-самый важный тег. Вот без него – ну никуда. Сейчас всё ложится на плечи тега «div». 

Что такое тег «div» на самом деле, физически? Это блок, элемент, объект на странице, называйте его как хотите. Это такое бесформенное создание, которое на самом деле ничего не делает на странице, если вы его просто так написали. Это пустышка некоторая. Но в ней есть маленькое такое волшебство. На самом деле, представьте себе пластилин. Когда вы его достали из коробки он ничего собой не представляет. Это зелёный прямоугольник.

Вот «div» — это такое же бесформенное создание, как и пластилин. Это объект, который имеет ширину 100%, то есть ширину родительского блока и по высоте он 0px, то есть он по высоте ничего не значит. 

То есть «div» — этот такая заготовочка, с которой мы можем делать всё, что угодно с помощью CSS. Дальше, мы будем ставить «div-ы» на страницу и задавать им ширину, высоту, фон, рамки, тени и т. д. Это всё с помощью CSS. И постепенно этив  «div-ы» обрутут какое-то визуальное обличие. Он может стать кнопкой, он может стать формой, он может стать каким-нибудь текстом, точнее блоком, который будет содержать в себе текст. Всё, что угодно. Всё, что вы видите на страницах сайтов, по большей части сделано с помощью «div’ов». Если вы зайдёте на любой сайт, даже, допустим, на vk.com давайте зайдём, всем, я думаю, известный сайт.

Вот на любой блок кликаем, нажимаем «Посмотреть код», смотрим в исходник: и сразу же на «div» попали, естественно.

Всё «div’ы», «div’ы», «div’ы», всё заполонили «div’ы». И у каждого «div’а» есть свои CSS-свойства. И они обретают какую-то форму, какой-то оттенок с помощью CSS-ок.

Поэтому «div» — это такая заготовочка, которая изначально высотой 0px, а шириной 100%, которая не имеет ни цвета, ни запаха, ни ширины, ни высоты. И дальше этот блок с помощью CSS он начинает обрастать какими-то свойствами. Поэтому в следующем курсе по CSS мы постоянно будем писать «div’ы», «div’ы», «div’ы» и задавать им разные CSS-свойства и понимать, как они работают, поэтому с «div’ом» вы будете работать постоянно, всю жизнь. Ничего сложного, страшного в этом теге нет, просто это такая болваночка, с которой мы можем дальше работать и делать с ней абсолютно всё, что вашей душе захочется. Поэтому доканчивайте этот курс, переходите к CSS и давайте учится задавать свойства нашим «div’чикам».

Изучаем теги div и span


Здравствуй, уважаемый читатель.

Это двенадцатый заключительный урок изучения html, в котором вы узнаете про очень полезные блоки на странице, без которых было бы невозможно работать и верстать шаблоны для сайтов, про теги DIV и SPAN.


Перед прочтением данного урока рекомендую пройти предыдущие уроки:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста Урок 9. Формы. Часть 1 Урок 9. Формы. Часть 2 Урок 10. Метатеги Урок 11. Комментарии

Теория и практика

В основном из данных двух тегов строится вся html страница. После того как вы поймете что можно делать с этими тегами, вы не будете знать как обходились раньше без них. По порядку о каждом из этих тегов.

Тег div

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

В коде html он выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div>
        <h2>Анкета</h2>
    </div>
    <div>
        <div>
            <ul>
                <li>Главная</li>
                <li>Об авторе</li>
                <li>Разное</li>
            </ul>
        </div>
        <p>Основной текст</p>
    </div>
    <div>Все права защищены.</div>
</body>
</html>

Вот так выглядит работа с тегом div. Он очень удобен. Сначала мы заключаем всё в блоки, а затем с помощью стилей(CSS) размещаем блоки как и где хотим.


Тег span

Тег span является строчным элементом, который предназначен для выделения фрагмента текста внутри других тегов, таких как <p>,<table> или <div>.

Пример кода с тегом span:

1
2
3
4
5
6
7
8
9
10

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <p>Оказывается, <span>древние предки</span> человека, как выяснили учёные, питались преимущественно фруктами.</p>
    <p>Поэтому наш организм изначально <span>приспособлен к употреблению фруктов</span>.</p>
</body>
</html>

Данный тег работает следующим образом: вы помещаете в него тот фрагмент текста, который хотите выделить и задаете ему стиль.

Дело в том, что если для данных тегов стили не заданы, то вы не увидите никаких изменений на html странице. Стили задаются для тега div и span через таблицу стилей(CSS). В коде html вы только привязываете определенный стиль в CSS через атрибуты или. Данные атрибуты называются селекторами. Вы поймете как они работают когда начнете проходить уроки по CSS.

Пробуйте всё прописать руками. Тогда вы лучше запомните и будете помнить где и как их применить.

Больше практикуйтесь!

Что такое «Div» в HTML?

Вы можете представить себе веб-страницу в трех основных частях. У вас есть верхний и нижний колонтитулы, а между ними — основная часть. Но, глядя на любую веб-страницу, вы можете увидеть, что тело также состоит из разделов. Скорее всего, там есть раздел для продуктов и услуг, отзывов, членов команды, контактной информации и т. Д.

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

Этот вариант стиля возможен из-за элемента разделения содержимого в HTML. Этот элемент, более известный как «div», может разделить вашу веб-страницу на разделы, чтобы вы могли настраивать их таргетинг с помощью уникальных свойств CSS.

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

Что такое тег div в HTML?

В HTML тег div является общим контейнером на уровне блока для других элементов.

Давайте посмотрим на несколько ключевых терминов в этом определении.

Во-первых, div — это «общий» контейнер, потому что он не описывает содержимое, которое он содержит. Другие элементы, такие как