Главная страница   /   9.3. Использование элемента div (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

9.3. Использование элемента div

Элемент div не имеет никакого специального значения. Вы можете использовать его для создания структуры и придания смысла содержанию, если все другие элементы являются недостаточными или не соответствуют поставленной задаче. Можно придать этот смысл и структуру, если применить глобальные атрибуты (описанные в главе 3), как правило, атрибуты class или id. В таблице 9-3 представлен элемент div.

Внимание

Вы должны использовать элемент div только в качестве последнего «оружия», когда те элементы, которые имеют семантическое значение, не подходят. Перед использованием элемента div рассмотрите возможность использования новых элементов HTML5, таких как article и section (описанных в главе 10). Нет ничего принципиально плохого в использовании элемента div, но вы должны стремиться включать семантическую составляющую везде, где возможно, в ваших документах HTML5.

Таблица 9-3: Элемент div
Элемент div
Тип элемента Потоковый
Разрешенные родительские элементы Любой элемент, который может содержать потоковые элементы
Локальные атрибуты Нет
Содержание Фразовый контент
Стиль тегов Открывающий и закрывающий теги
Новый в HTML5 Нет
Изменения в HTML5 Нет, хотя элементы, добавленные в HTML5, такие как article и section, должны иметь приоритет над этим элементом, и их использование предпочтительнее
Соглашение по стилям div { display: block; }

Элемент div является потоковым эквивалентом элемента span. Это элемент, который не имеет специального значения, и, следовательно, может быть использован, чтобы придать документу пользовательскую структуру. Проблема с созданием пользовательской структуры заключается в том, что ее значение специфично для вашей веб страницы или веб приложения, и эта структура и смысл не являются очевидными для других. Это может стать проблемой, когда ваш HTML обрабатывается или к нему применяются стили третьих лиц. В листинге 9-3 показано, как используется элемент div.

Листинг 9-3: Использование элемента div
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<style>
		.favorites {
			background: grey;
			color: white;
			border: thin solid black;
			padding: 0.2em;
		}
	</style>
</head>
<body>
	<div class="favorites">
	<p>
		I like apples and oranges.
	I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
	You can see other fruits I like <a href="fruitlist.html">here</a>.
	</p>
	<p>
		My favorite kind of orange is the mandarin, properly known
	as <i>citrus reticulata</i>.
	Oranges at my local store cost <s>$1 each</s> $2 for 3.
	</p>
	</div>
	<p><strong>Warning:</strong> Eating too many oranges can give you heart burn.</p>
	<p>
	The
	<abbr title="Florida Department of Citrus">FDOC</abbr>
	regulates the
	Florida citrus industry.
	</p>
	<p>
	I still remember the best apple I ever tasted.
	I bought it at <time datetime="15:00">3 o'clock</time>
	on <time datetime="1984-12-7">December 7th</time>.
	</p>
</body>
</html>

В этом примере я показал несколько иное использование элемента div, то есть сгруппировал несколько элементов разного типа таким образом, что они могут быть последовательно стилизованы. Я мог бы добавить к обоим элементам p, содержащимся в элементе div, атрибут class, но такой подход может быть проще, и он опирается на способ, которым наследуются стили (как описано в главе 4).