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

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

Показывать лекцию целиком

Введение

В этой статье я собираюсь объяснить, как и когда использовать в 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>

    Дополнительная информация

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

    Хорошим примером является другой язык, появляющийся внутри документа. Например:

    <p><q>Plus ca change, plus c'est la meme chose</q> she said.</p>

    Хотя язык основного документа будет английский, цитата дается на французском языке. Это можно указать с помощью атрибута lang следующим образом:

    <p><q lang='fr'>Plus ca change, plus c'est la meme chose</q> she said.</p>

    Сейчас в этом примере было легко пометить изменение языка, так как оно полностью происходит в цитате, поэтому элемент q прекрасно подходит для использования в качестве оболочки контента. Однако существуют ситуации, где нет легко доступного подходящего семантического элемента, поэтому вместо этого придется использовать span или div. Например:

    <p>A screen reader will read the French word chat (cat) as 
 chat (to talk informally) unless it is properly marked up.</p>
(<p>Считыватель экрана прочитает французское слово chat (кот)
 как chat (говорить неформально), если оно не будет правильно помечено.</p>)

    В этом примере первый экземпляр слова chat, являясь примером французского языка в английском документе, должен иметь указание на отличие, чтобы оно не интерпретировалось просто как английское слово chat. В этом случае span вокруг слова chat является правильным способом решения проблемы, так как в HTML нет другого подходящего элемента, чтобы создать оболочку французского слова (мы не хотим подчеркнуть слово, оно не является цитатой, или фрагментом кода, и т.д.). И являясь одним словом в предложении, оно находится на уровне строки. Этот пример будет поэтому лучше всего записан следующим образом:

    <p>A screen reader will read the French word <span lang='fr'>chat</span> 
  (cat) as chat (to talk informally) unless it is properly marked up.</p>

    Такая же техника используется в микроформатах для разметки обычных форматов данных на страницах Web. Можно найти значительно больше о микроформатах в некоторых более развитых статьях на сайте dev.opera.com.

    Зацепки для JavaScript, а также для CSS

    Я уже говорил о том, как можно использовать div и span вместе с атрибутами id и class для предоставления зацепок, с помощью которых можно применять стилевое оформление CSS и позиционирование для определенных частей контента. Такие же вещи можно сделать также для применения к документу JavaScript. Если данный элемент необходимо найти и обработать с помощью JavaScript, то обычно к нему применяют id, а затем используют функцию getElementById для ее поиска. Использование JavaScript будет рассмотрено подробнее в последней части курса.

    div-itis

    Необходимо знать об одном явлении, называемом "div-itis" в сообществе разработчиков Web.

    Хотя очень легко добавлять стилевое оформление с помощью множества вложенных элементов div или span, этого соблазна надо стараться насколько возможно избегать. В большинстве случаев можно соединить стилевое оформление или функции JavaScript с существующими в документе элементами. Базовый контейнер должен быть последней попыткой - лучше пытаться писать Web -страницы, начиная с использования только семантических элементов, и добавлять контейнеры только в случае крайней необходимости.

    Неприемлемая семантика

    В этом разделе мы рассмотрим некоторые распространенные ошибки, о которых надо знать при разметке контента с помощью HTML, и желательно избегать, если вообще возможно.

    Базовые "параграфы"

    Иногда возникает желание поместить элемент p (параграф) вокруг произвольного блока текста, но на самом деле это неправильно. Как говорилось в одной из предыдущих статей о разметке контента:

    Если это несколько слов и даже не полное предложение, то тогда это не должно, вероятно, помечаться как параграф.

    Более правильным будет использование элементов div или span (в зависимости от точной ситуации) для создания оболочки вокруг несвязного текстового контента, который не имеет других семантических отношений, охватываемых другими элементами HTML.

    Презентационные элементы

    Одним исключительно плохим советом иногда встречающимся в Интернет является практика использования коротких презентационных элементов, таких как b или i в качестве базовых контейнеров вместо span. В качестве оправдания обычно приводят один из следующих аргументов:

  • Элементы на три байта короче, и поэтому уменьшают трафик, как HTML, так и CSS.
  • Стилевое оформление требуется только для внешнего представления, поэтому использование "презентационных" элементов в действительности допустимо в этих ситуациях.
    •

    Первое справедливо, но уменьшение трафика фактически пренебрежимо мало (если только не создается невероятное количество презентационных эффектов), особенно с учетом современного сжатия, применяемого Web-серверами к документам, перед отправкой их в браузер через Интернет. Это делает документы значительно короче, чем можно добиться любым сокращением.

    Вторая причина выдает отсутствие понимания, что в действительности означает презентационный в контексте HTML. Презентационные элементы описывают, как должен выглядеть их контент ( b означает просто "жирный текст"). Они не представляют базовые зацепки для стилевого оформления того, что в них находится.

    Если небольшой раздел текста в параграфе необходимо оформить или обработать с помощью JavaScript, и не существует семантического элемента для создания вокруг него оболочки, то единственным правильным элементом в этой ситуации будет span.

    Заключение

    На этом завершается мое рассмотрение элементов span и div - вы должны теперь понимать их назначение значительно лучше, и сможете использовать их с уверенностью. Будущие статьи о CSS рассмотрят их значительно глубже с позиции использования для компоновки страницы и других применений.

    Контрольные вопросы

  • В чем различие между div и span?
  • Назовите два основные применения этих элементов на страницах Web.
  • Посмотрите исходный код одной из страниц своего любимого Web -сайта. Изучите ее структуру. Много ли элементов div и span она использует? Можете ли вы заметить что-то неправильное или неуместное в их применении? Как это можно было бы исправить?
    •

    Об авторе

    Марк Норман Френсис работает с Интернет с момента изобретения Web. Он работает в настоящее время в компании Yahoo! в качестве архитектора внешнего интерфейса для крупнейшего в мире Web -сайта, определяя лучшие методы, стандарты кодирования и качества разработки Web.

    До

    Источник: Andy Budd http://flickr.com/photos/andybudd/98405468/

     Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^