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

Опубликовано: 18.12.2017

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

Основы работы с NPM

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

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

HTML5 -- новые возможности для веб-разработчика

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

Это просто, главное делать все проще и стараться как можно больше все выносить в 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 блоков, этого достичь не сложно, при любой схеме шаблона. Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.

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

Новости

rss