Структура и семантика XHTML

февраля 1, 2008

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок - используйте для него елементы Heading(h1-h6), если абзац/параграф - paragraph(p). Если у вас есть список - используйте элементы списков (ul/ol), если вы цитируете - используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS “с лету”, а некоторые только после создания HTML-макета).

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.

Есть два момента, которые нужно помнить всегда:

  • (X)HTML предназначен для разметки содержимого и только
  • CSS предназначен для визуального оформления содержимого

Почему семантика? Я приведу важные на мой взгляд аспекты:

  • Структурированый код гораздо лучше читается поисковиками
  • код будет понятен не только автору, но и тем, кто будет работать с ним после него
  • Работа с DOM’ом становится проще и доступнее.

Не стоит путать семантику и валидность. Если документ валиден, это еще не значит что он семантически корректен. Валидатор не знает, к примеру, что вы вместо заголовков использовали жирный шрифт, оформленный в CSS, или же что ваш список ссылок, совсем не список, а параграфы через перенос строки.

Кстати валидность, по моему мнению, относится к минимальным требованиям к коду и является обязательной. И это не дань моде, а порядок и инструмент самопроверки. Но это отдельная тема.

Некоторые основные элементы разметки

Заголовки

Используте элементы h1 - h6 для оформления заголовков документа. Не пытайтесь “подделать” заголовки визуально с помощью CSS, это черевато проблемами с поисковиками.

<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
Абзац/Параграф

Пользуйтесь элементом p для создания абзацев в тексте, не обрывайте строку с помощью br. (И помните, в HTML-документе, не может быть текста, не “обернутого” в теги).

Неверно:

Мама мыла раму<br/>
Папа курил Приму

Верно:

<p>Мама мыла раму</p>
<p>Папа курил приму</p>
Выделение текста
  • em
    Используйте элемент em для выделения текста из общего контекста. Если раньше вы использовали для этого элемент i, делающий текст наклонным, то прекратите это, так как в данном случае выделение будет сугубо визуальным, а в случае использования em, еще и логическим.
  • strong
    Элемент strong пришел на замену элементу b. Логика использования примерно та же, что и в em/i, с той лишь разницей, что в данном случае выделение текста будет жирным шрифтом.

Неверно:

Здесь есть <i>выделеное</i> слово

Верно:

Здесь есть <em>выделеное</em> слово</p>
Цитирование

Элемент cite хорош для выделения коротких цитат внутри текста, и является строчным элементом. Элемент blockquote также используется для цитирования, но будет полезен для больших цитат, вынесеных в отдельные блоки. Является блочным элементом.

Примеры:

<cite>Девелопер предлагающий крэки, подобен корове,
 рекламирующей говядину</cite> - Paradigm.ru

Дополнительно, можно использовать атрибут cite элемента blockquote для указания источника цитаты:

<blockquote cite="http://www.w3c.org">The value of this
attribute is a URI that designates a source
document or message. This attribute is intended to
give information about the source from which
the quotation was borrowed.</blockquote>

Списки

Если у вас есть списки (к примеру меню - это ничто иное как список ссылок) - используйте элементы списков ul/ol, ненумерованый и нумерованый список соответственно. Оформление списков в CSS позволяет добиться очень впечатлающих результатов.Неправильно:

<a href="about.html">Обо мне</a><br/>
<a href="services.html">Услуги</a><br/>
<a href="notes.html">Заметки</a><br/>
<a href="grandma.html">Бабушка</a>

Правильно:

<ul>
    <li><a href="about.html">Обо мне</a></li>
    <li><a href="services.html">Услуги</a></li>
    <li><a href="notes.html">Заметки</a></li>
    <li><a href="grandma.html">Бабушка</a></li>
</ul>
Определяющие списки

Определяющие списки (dl) созданы для определения чего-либо и его описания. В отличии от обычных списков, в dl изначально указывается dt(definition term) - термин, а затем его описание/я dd(definition description).Определяющие списки подходят для разметки диалогов, страниц ЧаВо, технической документации.

Пример:

<dl>
    <dt>Вася:</dt>
        <dd>А я все равно буду верстать таблицами!</dd>
    <dt>Петя:</dt>
        <dd>Ну и дурак!</dd>
</dl>

[Источник]