.jpg)
В последнее время нередко при описании создания того или иного сайта упоминается, что используется семантическая верстка. Вместе с тем чрезвычайно много новых сайтов разрабатывается с полным игнорированием этого подхода, что вызывает огорчение. Так что же такое семантическая верстка, и какие достоинства ее использования? Для верстки веб-страниц используется язык HTML или его более современный вариант, XHTML. Семантика этого языка определяется смысловым значением его конструкций. Например, тег h1 означает заголовок наивысшего уровня, а тег li – элемент списка. Если при верстке все теги используются именно для тех целей, для которых они предназначены, значит, имеет место семантическая верстка.
Например, элементы меню правильно представить в виде элементов списка и неправильно – как строки таблицы. Если элементы разметки используются не так, как предусмотрено, значит, на сайте не применяется семантическая верстка. Самым распространенным примером отступления от правил семантической верстки является табличная верстка, при которой табличные теги служат не для формирования обычной таблицы, а исключительно для целей оформления. Так в чем же преимущества семантической верстки и почему рекомендуется использовать именно ее? В первую очередь, код HTML при применении такой верстки более прозрачен и логичен, с ним проще разобраться любому специалисту и, при необходимости, внести изменения. Каждый разработчик знает, для чего должны использоваться стандартные теги HTML, но далеко не всегда можно догадаться о назначении тех или иных элементов разметки, если не используется семантическая верстка, и верстальщик применяет теги не по назначению. Конечно, некоторые разработчики сайтов заинтересованы, чтобы в их детище не разобрался никто, кроме них, но таких горе-разработчиков не следует привлекать к созданию сайтов ни при каких условиях. Семантическая верстка тесно связана с разделением данных и представления.
.jpg)
В коде HTML хранятся только данные и их структура, а представление, то есть внешний вид, хранится отдельно, в файле стилей CSS. Такая структура позволяет легко менять внешний вид, не затрагивая код веб-страниц. Например, можно создать разные стили для вывода на экран и для печати, и не потребуется создавать отдельные страницы специально для распечатки. Кроме того, такое разделение позволяет разделить труд специалистов, когда версткой занимается верстальщик, а оформлением – дизайнер. И, наконец, разделение содержимого и внешнего вида позволяет делать сайты с меняющимся внешним видом. Посетитель может выбрать стиль сайта, подходящий именно ему, причем выбор будет запомнен и для следующих посещений.
Использование семантической верстки облегчает оформление всех однотипных элементов в едином стиле. Достаточно описать нужный стиль в файле CSS, и можно не беспокоиться о внешнем виде вновь добавляемых элементов. Кроме того, облегчается процедура добавления новых документов, созданных в текстовых редакторах. Часто материалы для сайта пишутся в текстовом редакторе Word. Есть простые средства, преобразующие заголовки, выделения, списки и прочие элементы в соответствующие элементы HTML. Если же применение тегов при верстке отличается от стандартного, преобразовывать документ Word в веб-страницу приходится вручную, если имеется желание сохранить исходное форматирование.
Семантическая верстка позволяет лучше структурировать код веб-страницы и избежать множества лишних конструкций. Хотя обычный пользователь не видит этот код, роботы поисковых систем работают именно с ним, и грамотный код помогает в продвижении сайта. Семантическая верстка существенно помогает внутренней поисковой оптимизации веб-страниц, что особенно важно для продвижения по среднечастотным и низкочастотным запросам. Да и при продвижении по высокочастотным запросам оптимизация позволяет несколько сэкономить средства на увеличение ссылочной массы.