- •22. Базовые контейнеры — элементы div и span
- •Введение
- •Семантически нейтральный
- •Строковые или блочные
- •Объединение контента в группу
- •Дополнительная информация
- •Зацепки для JavaScript, а также для css
- •Div-itis
- •Неприемлемая семантика
- •Базовые "параграфы"
- •Презентационные элементы
- •Заключение
- •Контрольные вопросы
- •Об авторе
Объединение контента в группу
Просмотр исходного кода многих страниц в Интернет откроет множество элементов div, включая обычные метафоры в class и/или id элементов - например, верхний колонтитул, нижний колонтитул, контент, боковая панель, и т.д.
Имена class и id всегда должны быть семантические, что означает, что они должны указывать на значение/роль контента, вместо того чтобы просто указывать на визуальное представление. Поэтому, например, sidebar (боковая панель) и alertMessage (Предупреждающее сообщение) являются хорошими именами class, в то время как redLefthandColumn (красный левый столбец) и blueFlashingText (синий мигающий текст) такими не являются. Что если вы захотите изменить позже цвет боковой панели с красного на синий, или изменить ее позицию на сайте с левой на правую? Что если вы захотите, чтобы предупреждающие сигналы были не синие мигающие, а зеленые и немигающие?
Эти разделы обеспечивают предсказуемость при создании структур страниц, и, возможно более важно, при просмотре кода HTML в более позднее время, они дадут подсказку, в какой части страницы вы находитесь. Хорошее деление страницы почти всегда будет самодокументирующим, как в отношении назначения, так и контента.
С целью сделать это немного более понятным, давайте рассмотрим структуру div реального сайта - домашнюю страницу dev.opera.com, чтобы быть точным. Помните, что пример кода ниже вообще не содержит контента, помимо нескольких других элементов, которые были включены, так как они важны для структуры сайта. Я по большей части попытался воспроизвести только реальную структуру сайта, как определено с помощью элементов div. В представленном ниже коде прочтите внимательно комментарии HTML- я вставил их, чтобы объяснить структуру сайта. При просмотре кода откройте основную страницу dev.opera.com на новой вкладке или в новом окне браузера, чтобы можно было видеть внешний вид сайта при исследовании его структуры.
<body>
<!-- Прежде всего мы имеем wrap div, который охватывает всю страницу,
и обеспечивает более точный контроль ее в целом -->
<div id="wrap">
<!-- Этот неупорядоченный список содержит список ссылок
всех различных сайтов компании Opera,
который можно видеть по верхнему краю страницы -->
<ul id="sitenav" class="hidemobile">
...
</ul>
...
<!-- Это форма поиска - поле поиска, которое можно видеть вверху справа страницы -->
<form action="/search/" method="get" id="search">
<div>
...
</div>
</form>
<!-- Этот неупорядоченный список содержит основное навигационное меню сайта -
горизонтальное меню вкладок, которое можно видеть сразу под графикой основного заголовка -->
<ul id="menu">
...
</ul>
<!-- Эти вложенные div формируют структуру бокса регистрации,
где вводится имя пользователя и пароль для регистрации на сайте.
Вы увидите это только в том случае, если не зарегистрированы в данный момент на сайте. -->
<div id="loginbox">
<div id="login">
...
</div>
</div>
<!-- Эта последовательность вложенных div определяет место, где находится основной контент страницы -
все резюме статей, которые формируют основной материал контента страницы -->
<div id="content2">
<div id="main">
...
<div class="major">
...
</div>
<div class="major">
...
</div>
...
</div>
</div>
<!-- Этот div содержит боковую панель страницы - категории статей, tпоследние комментарии, и т.д. -->
<div id="side">
...
</div>
<!-- Этот div содержит нижний колонтитул страницы, где можно видеть уведомление об авторских правах,
и различные ссылки внизу страницы. -->
<div id="footer">
...
</div>
<!-- Конец страницы - это закрывающий тег для wrap div -->
Б.вшмЮ
Б.ищвнЮ
Пример 22.1. (htmlб txt)