Семантический HTML код — рекомендация с большими выгодами

Дата публикации: 18.02.2010

Семантика (фр. sémantique от др.-греч. σημαντικός — обозначающий) — наука о понимании определенных знаков, последовательностей символов и других условных обозначений. Эта наука используется во многих отраслях: лингвистика, проксемика, прагматика, этимология и т.д. Ума не приложу, что эти слова означают и чем все эти науки занимаются. Да и не важно, меня интересует вопрос применения семантики при верстке сайтов.

Заметка

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

Семантическая верстка — что это?

В языке каждое слово имеет определенный смысл, назначение. Когда ты говоришь «колбаса», ты имеешь в виду пищевой продукт, представляющий собой фарш (как правило, мясной) в продолговатой оболочке. Короче говоря имеешь в виду колбасу, а не молоко или зеленый горошек.

HTML — это тоже язык, его «слова», именуемые тегами, тоже имеют определенный логический смысл и назначение. По этому в первую очередь семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов.

Например, тег <p> — это абзац, и не стоит им размечать строки веб форм. А <b> — это просто выделение текста жирным и это никак не заголовок.

Разметка страниц с учетом применения тегов по их назначению, получило название POSH (Plain Old Semantic HTML) — старый добрый семантический HTML. Термин POSH родился в апреле 2007 во время дискуссий на тему улучшения качества разметки между признанными авторитетами веб разработки: John Allsopp, Tantek Çelik, Jeremy Keith, Chris Messina. Они же и были одними из основателей сообщества microformats.org.

Кто устанавливает правила?

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

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

microformats.org — сообщество, которое работает над воплощением идеалистических идей Семантического веба в жизнь посредством приближения разметки страниц к тем самым семантическим идеалам.

Зачем и кому вообще нужна семантическая верстка?

Если у меня на сайте информация отображается так же как на дизайне, зачем себе еще ломать мозг и думать о какой-то семантике?! Это же дополнительная работа! Кому это нужно?! Кто это оценит кроме другого верстальщика?

Мне такие вопросы приходилось частенько слышать. Давай разберемся.

Семантический HTML для веб разработчиков

чистый код — семантический HTML код чище и меньше по объему, чем не семантический. А чем меньше кода, тем проще найти нужный участок или локализовать ошибку, с ним проще работать. Сравни:
пример несемантической разметки с помощью таблиц и кучей атрибутов

пример семантической разметки с минимумом «лишнего»
понятный (читаемый) код — осмысленные имена классов и идентификаторов дают представление о структуре кода тому кто его читает. Это имеет важное значение, когда над сайтом работает команда разработчиков. Это опять же сокращение времени разработки. Сравни:
О назначении этой секции остается только гадать — блочная верстка еще не означает семантическая

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

Семантический код для пользователей

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

семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным.
голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у Opera.

Семантический HTML для машин

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

Хороший контент плюс качественная семантическая верстка — это уже серьезная заявка на хорошие позиции в выдачах поисковиков.

Выводы

Семантическая верстка нынче это не требования, а рекомендация. Но рекомендация, которая уже сейчас несет в себе большие выгоды. Не за горами то время, когда семантический код, будет таким же требованием как дивная верстка. Поэтому лучше начинать себя приучать к «правильному» коду сегодня, чтобы не остаться «за бортом» завтра.

Как начать верстать семантически?

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

Наш раздел, посвященный семантическому HTML, тебе в помощь.

Материалы

Теги: семантический HTML

Ссылка с возможностями блока

Семантические теги на базе HTML 4.01