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

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