/ Справочники / HTML5 / div

Информация по поводу - div


HTML тег <div> используется для создания блоков на сайте. Эти блоки могут отвечать за любые объекты на сайте: шапка, новость, футер, какая-либо панель и так далее. Все эти блоки можно с легкостью подстроить под свои нужды при помощи CSS. Требует закрывающий тег </div>.

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

Атрибуты:
  • align - указывает каким образом будет расположен текст и все содержимое в блоке;
  • class - добавляет класс к объекту для добавления стилей к нему;
  • id - указывается идентификатор объекта, по которому можно обращаться к объекту;
  • title - добавляет подсказку при наведении и удержании мыши на любую точку блока.
CSS код для стилизации наших блоков:

#block-1 {
	float: left;
	width: 50%;
	background-color: #e4a7a7;
	margin-left: 25%;
	padding: 20px;
	box-sizing: padding-box;
	color: #fff;
}

#block-1>div {
	float: left;
	width: 100%;
	margin-top: 10px;
	text-align: center;
	background-color: #59b7c1;
}
HTML код создания блоков на сайте:
<div id="block-1">
	Это обычный блок на сайте.<br>
	Здесь есть теги - <em>курсир</em>, <b>жирный шрифт</b> и так далее.
	Также здесь могут быть другие блоки:
	<div>
		Какой-то текст здесь.
	</div>
</div>
Результат:
Это обычный блок на сайте.
Здесь есть теги - курсир, жирный шрифт и так далее. Также здесь могут быть другие блоки:
Какой-то текст здесь.