Семантическая верстка и микроформаты

Многие элементы HTML имеет особый смысл — семантику. Например, элемент code означает программный код, strong – усиление текста, элементы div и span не имеют семантики. Интересная ситуация с элементами b и i: в старом (X)HTML они не имеют семантики, а лишь оформляют текст, а в (X)HTML5 они ее приобретают.

Семантика предназначена не для пользователей сайта, а для специализированных роботов, в основном — поисковиков. Например, для человека могут быть визуально неотличимыми содержание и оформление элементов code и p, но робот ожидает найти в элементе code программный код, а в p — обычный текст.

Когда нужен элемент, имеющий специальный смысл используются микроформаты. Микроформат является расширением для разметки в стандарте XHTML. По сути, он представляет собой специально размеченный элемент кода.

Для разметки микроформатами подходят любые элементы HTML, но особое значение придается элементам, которые не имеют семантического значения — div и span. Из атрибутов в настоящее время используются в основном class, rel, rev, title.

Разберем простой пример использования микроформатов¹. Предположим, что имеется контейнер с уже размеченной информацией о человеке:

<div>

<div>Василий Пупкин</div>

<div>Рога и Копыта</div>

<div>495-564-1234</div>

<a href="http://example.com/">Мой сайт</a>

</div>

С помощью микроформата hCard можно добавить семантическую значимость этому блоку кода:

<div class="vcard">

<div class="fn">Василий Пупкин</div>

<div class="org">Рога и Копыта</div>

<div class="tel">495-564-1234</div>

<a class="url" href="http://example.com/">Мой сайт</a>

</div>

Содержимое самих элементов не изменилось; к ним только были добавлены атрибуты, указывающие, где именно в блоке находится та или иная информация (имя, телефон и так далее). Весь блок при этом имеет атрибут class="vcard", который является родительским для микроформата hCard. Это означает, что данный элемент и все вложенные в него элементы вместе составляют микроформат hCard.

4. Оформление страниц при помощи css Оформление текста

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

Свойство font-family — гарнитура шрифта

Свойство font-family позволяет выбрать гарнитуру шрифта, или, по-простому, шрифт. Чтобы задать шрифт, сначала указывают его гарнитуру (название), а затем можно указать семейство, к которому она относится.

font-family: Tahoma, sans-serif;

Хотя указывать семейство не обязательно, это рекомендуется делать, чтобы текст мог быть отображен, даже если в системе не установлен указанный шрифт: в таких случаях подбирается шрифт из семейства.

Можно перечислить несколько гарнитур. Тогда браузер будет стремиться отобразить текст сначала с помощью первого шрифта, затем, если он не установлен, с помощью второго и т. д.

font-family: Verdana, Tahoma, Arial, sans-serif;

Если название гарнитуры состоит из нескольких слов, то его заключают в кавычки:

font-family: ‘Trebuchet MS’, sans-serif;

Свойство font-family наследуется. Поэтому достаточно указать список гарнитур для корневого элемента, чтобы все его потомки отображались с помощью одного набора.