Тег <div>

Описание

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

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

Синтаксис

<div>...</div>

Атрибуты

align

Выравнивание содержимого контейнера <div> по краю.

Вместо этого атрибута необходимо использовать стили - text-align

<div align="center | left | right | justify">...</div>

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
left: Значение по умолчанию. Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

title

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

<div title="текст">...</div>

текст - Любая текстовая строка. Строка должна заключаться в двойные или одинарные кавычки.

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

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

Обязателен.

Пример. Использование тега <div>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 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 class="block1">Lorem ipsum dolor sit amet, consectetuer
   adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
   dolore magna aliguam erat volutpat.</div>
  <div class="block2">Ut wisis enim ad minim veniam, quis nostrud
   exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
   ea commodo consequat.</div>
 </body>
</html>

Пример. Выравнивание текста

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIV, атрибут align</title>
  <style type="text/css">
   #layer1 {
   	background: #fc0;
    padding: 5px;
   }
   #layer2 {
  	background: #fff;
  	width: 60%;
  	padding: 10px;
   }
  </style>
 </head>
 <body>
  <div align="right" id="layer1">
  <div align="left" id="layer2">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
   sed diem nonummy nibh euismod tincidunt ut lacreet dolore
   magna aliguam erat volutpat.
  </div>
  </div>
 </body>
</html>

Пример. Подсказка к тексту

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег DIV, атрибут title</title>
 </head>
 <body>
  <div title="Каноническая рыба">Lorem
  ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
  nonummy nibh euismod tincidunt ut lacreet dolore magna
  aliguam erat volutpat.</div>
 </body>
</html>

Браузеры: Настольные Мобильные ?

Internet Explorer	Chrome	Opera	Safari	Firefox
4	1	3.5	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

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

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

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

Блочные элементы. | Форматирование.