НОУ ИНТУИТ | Введение в стандарты Web. Лекция 22: Базовые контейнеры

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный

|

Вам нравится? Нравится 188 студентам

| Поделиться |

Поддержать программу

Аннотация: Дается объяснение, как и когда применять в HTML элементы span и div, которые не используются для описания контента, но являются базовым механизмом, позволяющим создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML

Введение

В этой статье я собираюсь объяснить, как и когда использовать в HTML два элемента, которые не используются для описания контента. Элементы span и div фактически не соответствуют никакому значению контента, который они охватывают; вместо этого они являются базовым механизмом, который позволяет создать специальную структуру или объединить в группы элементы, где не подходит в действительности никакой другой элемент HTML, и затем оформить это некоторым стилем с помощью CSS или выполнить манипуляции с помощью JavaScript. Хотя элементы div не добавляют никакого семантического значения, они могут рассматриваться, как представляющие структурное разбиение разметки, вместе с соответствующим семантическим классом или именем ID.

Они являются "тегом последней надежды" и должны использоваться только там, где не подходит никакой другой элемент HTML, так как они не имеют значения для вспомогательных технологий, поисковых систем, и т.д.

Статья имеет следующую структуру:

Семантически нейтральный
Строковые или блочные
Объединение контента в группу
Дополнительная информация
Зацепки для JavaScript, а также для CSS
div-itis
Неприемлемая семантика
- Базовые параграфы
- Презентационные элементы
Заключение
Контрольные упражнения

Семантически нейтральный

Большинство элементов в HTML существует для описания контента, такого как изображения, списки, заголовки, или помогают в настройке документа - head, body, link, meta, и т.д. Однако имеется два элемента, которые не имеют заданного значения. Из спецификации HTML:

Элементы div и span совместно с атрибутами id и class предлагают базовый механизм для добавления в документы структуры.

Эти два элемента можно считать некоторой несущей опорой HTML. Они предоставляют возможность сгруппировать контент, добавить дополнительную информацию вокруг контента и зацепки для добавления стилевого оформления и интерактивности. Они, однако, не добавляют документу никакого нового семантического значения.

Строковые или блочные

Как вы узнали раньше, блочные элементы являются элементами, которые помогают представить структуру документа. Элемент div, сокращение от division (деление), является базовым контейнером блочного уровня. Он обычно используется для создания оболочки вокруг других элементов блочного уровня, для объединения их в группу (смотрите в следующем разделе дополнительное пояснение этого вопроса). Его можно также использовать для объединения множества строковых элементов и/или текста, которые иначе логически не входят в другой элемент блочного уровня, но это должно использоваться в крайнем случае.

Элемент span является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но он используется для объединения в группу или создания оболочки вокруг других строковых элементов и/или текста, а не элементы блочного уровня.

Различие между двумя различными типами может показаться сначала достаточно произвольным. Различие, о котором необходимо помнить, состоит в типе контента, и как он будет представлен при записи без какого-либо стилевого оформления. Элемент div помещается вокруг группы элементов блочного уровня - например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню. Элемент span создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста. Ключевым словом является "группа": если div охватывает только один элемент блочного уровня, или span только один строковый элемент, то такое использование будет излишне. Например, посмотрите, как используются элементы div и span в следующем примере разметки:

<body>
  <div id="mainContent">
    <h1>Заголовок страницы </h1>
    <p>Это первый параграф контента примера страницы.</p>
    <img src="example.gif" alt="Это изображение только пример, ничего специального">
    <p>Это второй параграф контента примера страницы. Он очень похож на первый, 
     но здесь имеется <span id="specialAlert"> специальный сигнал, который 
      мы хотим выделить цветом и увеличить размер текста  с помощью CSS</span>.
    На самом деле это не стандартное выделение  - это по большей части просто стилевое оформление, 
     поэтому <em> и <strong> в действительности неприменимы.</p>
  </div>
</body>

Теперь можно было бы выделить контент внутри div и span с помощью их атрибутов id, и применить к ним специальное стилевое оформление и позиционирование с помощью CSS.

Объединение контента в группу

Просмотр исходного кода многих страниц в Интернет откроет множество элементов 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 содержит боковую панель страницы - категории статей, последние комментарии, и т.д. -->
    <div id="side">
      ...
    </div>
    <!-- Этот div содержит нижний колонтитул страницы, где можно видеть уведомление об авторских правах, 
     и различные ссылки внизу страницы. -->
    <div id="footer">
      ...
    </div>
  <!-- Конец страницы - это закрывающий тег для wrap div -->  
  </div>
</body>

22.1.

Дальше >>

Web-дизайн

Введение в стандарты Web

Базовые контейнеры — элементы div и span

Введение

Семантически нейтральный

Строковые или блочные

Объединение контента в группу

Вопросы и ответы

Авторизоваться

Web-дизайн

Введение в стандарты Web

Базовые контейнеры — элементы div и span

Введение

Семантически нейтральный

Строковые или блочные

Объединение контента в группу

Вопросы и ответы