Семантическая верстка: понятие и примеры семантического кода

Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Понятие семантической верстки

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

Как достигнуть семантики кода?

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

• Заголовки должны выделяться тегами H1, H2, H3, H4, но никак не B и STRONG.
• При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
• Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
• Параграф блока текста создается с помощью P тега, но никак не DIV.
• Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
• То же самое по поводу JavaScript.
• Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
• Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.

Для большей ясности сути вопроса, смотрите схему семантической разметки текста:

Семантическая верстка на практике – примеры HTML + CSS кода

Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.

Удаляем ненужные div теги

Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.

Пример 1:

Пример ниже показывает, как вы можете убрать div тег и дописать тот же стиль к form селектору.

Пример 2:

Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h4, мы можем просто применить margin отступ к h4 селектору и убрать лишний div тег.

Используем семантическую разметку кода

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

Пример:

Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.

Минимизируем использование div тегов

Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.

Пример 1:

Вместо использования div для создания навигационного пути, можно использовать p тег.

Пример 2:

Пример ниже показывает, как можно использовать CSS, чтобы избавиться от двух лишних div тегов. Результат будет таким же.

Заключение

Пожалуй, это все. Если вы знаете еще техники, обязательно расскажите мне в комментариях. Если имеете вопросы по поводу семантической верстки, также задайте в комментариях ниже.

Дальше: Контент для людей, работает ли он для SEO?