Семантическая разметка

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

Это достаточно важная часть при внутренней оптимизации.

Семантическая разметка - это контент с грамотно проставленными HTML-тегами форматирования.

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

Чтобы понять на примере, что же такое семантическая разметка, просмотрите созданные вами HTML-документы с отключенным внешним форматированием (CSS-стили, JavaScript и изображения).

Вы можете в тексте найти заголовки, абзацы, ссылки и важные фразы?

Если ответ положительный, то ваш документ придерживается семантики.

Как же правильно использовать HTML-элементы для разметки?

В первую очередь следует выделить заголовки <h1> - <h6>

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

Для одной страницы необходимо вычленить один общий заголовок и заключить его в <h1>. Подзаголовков может быть любое количество, но не рекомендуется перескакивать с одного уровня заголовков на другой – например, использовать <h3> после <h1>, пропуская <h2>. Это в том числе означает, что в хорошо структурированном документе не может быть заголовка второго уровня без заголовка первого.

Так же важны и другие HTML-элементы: теги абзаца <p>, списка <ul> и <ol>, логического выделения более важных слов и фраз в тексте (<strong> и <b> - полужирным, <em> - курсивом, <u> - подчеркиванием) и тег alt для описания изображений.

Советую использовать их для грамотного построения структуры текста.

Для семантической разметки используют 2 метода верстки: табличный и блочный (дивовый).

Табличная верстка – на основе основе таблиц. Текст находится в ячейках. В этом случае код очень трудно воспринимается поисковиками, особенно если используются вложенные таблицы. Этот метод считается устаревшим, т.к. в таблицах необходимо размещать только соответствующие табличные данные: какую-либо статистику, расписание, расчеты и прочее. Но по причине простоты использования табличная верстка встречается довольно часто.

При блочной верстке текст расположен в блоках <div> с присвоенными им css-стилями. Метод считается грамотным и современным!
Преимущества семантической разметки

Без сомнения, семантическая разметка необходима для веб-страниц. Вот несколько преимуществ такого подхода к оптимизации сайта: