Довідники HTML5 div

Що таке div в HTML5?

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>

Результат:

Це звичайний блок на сайті.
Тут є теги - курсир, жирний шрифт і таке інше. Також тут можуть бути інші блоки:

Якийсь текст тут.

Коментарі (1)