Семантика вёрстки и HTML

Как должна выглядеть правильная семантичная вёрстка? Как употребить контейнеры, не нарушая законов логики, не перегружая каркас, и не жертвуя дизайном?

Кстати, о дизайне. Довольно часто встречаются страшные конструкции из таблиц, блоков, <center>, <font> и прочей нечисти с инлайн стилизацией. Естественно, в таком случае ни о какой логичности и семантичности в таком случае и речи быть не может.

Что такое семантика?

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

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

Звучит угрожающе, не так ли? На самом деле всё проще. Применительно к SEO вся семантичность и логичность вёрстки заключается в грамотной расстановке тегов и заключении контента в правильные контейнеры, которыми изобилуют языки HTML и xHTML.

Контейнеры и каркас

Каркас сайта — это его скелет и опора, который позволяет логически выделить основные участки сайта. Рассмотрим пример:

<div id="site-anatomy">
<div id="navigation">
<!-- Менюшка -->
</div>
<div id="content">
<h[x]>Заголовок</h[x]>
<p>Какой-то текст, например статья</p>
</div>
<div id="footer">
<ul class="footer-links">
<li>Главная</li>
<li>Форум</li>
<li>О проекте</li>
<li>Карта сайта</li>
</ul>
</div>
</div>

Что мы видим в данном случае? У нас есть один опорный блок с id="site-anatomy", внутри него еще 3 блока, которые логически делят сайт на меню нафигации id="navigation", контентid="content" и подвалid="footer".

В данном примере легко проследить и идентифицировать содержимое каждого контейнера т.к. всё обособлено своими блоками.

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

Вот простой пример:

<div id="content">
<h2>Заголовок</h2>
<p>Какой-то текст, например статья</p>
</div>

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

#content h2 {font-weight: bold; font-family: Georgia;}

Добавив такое правило в таблицу стилей, мы стилизуем только заголовки h2 в контейнере id="content".

Стоит также отметить, что применяя css, можно достичь более эффективной семантики ресурса. Здесь нам на помощь приходят такие свойства, как

• float
• position, top, bottom, left, right
• z-index

Они позволяют располагать элементы в более удобном для нас порядке. Чем выше контент логически — тем проще поисковой системе определить его значимость. Таким образом, всё, что не нужно индексировать или не представляет никакой ценности, можно разместить в самом низу, отдав приоритет важной информации.

Контент-контейнеры и визуально-логические теги

Теперь поговорим немного о самом контенте. В первую очередь, это текстовая информация.

Хороший тон — это применение списков, которые делятся на нумерованные, маркированные и списки определений.

Списки

Маркированный:

<ul>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>

Нумерованный:

<ol>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
</ol>

Список определений

<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
<dt>Термин 3</dt>
<dd>Определение 3</dd>
</dl>

Список определений или definition list идеально подходит для обвёрстывания парных конструкций т.е. может употребляться для реализации участков скелета сайта. Элемент dd в данном случае не является обязательным.

Спецификация также допускает наличие нескольких dd подряд.

<dl>
<dt>Subject</dt>
<dd>Описание 1</dd>
<dd>Описание 2</dd>
<dd>Описание 3</dd>
</dl>

Еще он примечателен тем, что позволяет включать во внутренние элементы списка различные теги разметки, будь то <div>, <p> или <form>.

Заголовки

Заголовки с точки зрения семантики обязательны, они не только выделяют текст визуально, но и по-другому индексируются. Есть несколько важных моментов.

Страница должна иметь только один заголовок первого уровня<h1>. Чем больше на странице заголовков, тем меньшее значение им уделяется. Поэтому важно продумывать структуру ресурса.

Параграфы

Тег <p> — это тег праграфа. Именно в него разумно помещать текст, а не в ячейки таблиц, блоки и span. Что критично тега <span>, так это то, что его значимость выделить вообще довольно трудно, но на основе экспериментального анализа установлено, что тег обладает достаточным весом, и поисковые системы отлично его улавливают при разборе исходника. Он может применяться для разбиения внутри заголовка, например, или списка.

Также стоит отметить, что span является очень важным элементом при вёрстке с использованием спецификации RDFa. В него прописываются атрибуты маркеры, позволяющие указать характер содержащейся информации внутри тега.

Цитаты, код, pre

Принято выделять цитаты тегом <blockquote cite="http://site-quoting-adress.ru">. Здесь атрибут cite принимает значение адреса квотируемого ресурса.

Код обособляют парным тегом <code></code>, а используя <pre></pre>, можно вывести информацию, сохраняя оригинальные отступы.

Выделение текста

Здесь стоит отметить, что существуют схожие по визуальному выделению теги, но отличные по логическому.

Визуальные: <b>, <i> — не несут никакой смысловой нагрузки, просто выделяют текст жирным и курсивом. Эти элементы любимы особо знатными непрофессионалами, умудряющимися повесить на них декоративную функцию оформления скелета.

Логически-визуальные: <strong></strong>, <em></em>, <ins></ins>, <del></del> — не только визуально выделяют текст, но и по другому индексируются поисковой системой. Например, содержимое тега <del></del> не будет проиндексировано, а визуально он выглядит, как зачёркнутый.

Акронимы и аббревеатуры

Применение этих тегов также помогает улучшить семантику ресурса. Вот пример:

<acronym title="Document Object Model, Объектная модель документа">DOM</acronym>
<abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>

В данном случае тошноты добавляет аттрибут title, который можно упаковать ключевиками.

Изображения

Изображения также принято укомплектовывать описаниями, прописывая аттрибут alt.

<img src="путь" alt="Альтернативное описание" />

На этом пока всё, но есть еще очень много мелочей, которые будут рассмотрены немного позже.