Использование элемента 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).
