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

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

Некоторый контент имеет дополнительную информацию, которую используют агенты пользователя и другие синтаксические анализаторы, и эти данные можно передавать через атрибут. Элементы 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.

До Yahoo! он работал в Formula One Management, Purple Interactive и City University на различных должностях, включая разработку Web приложений, серверное программирование CGI и архитектура систем. Он приписывает себе блог по адресу http://marknormanfrancis.com

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

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.