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

В этом разделе мы рассмотрим некоторые распространенные ошибки, о которых надо знать при разметке контента с помощью 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/

6