Слово «семантика» в русском языке означает «смысл». Семантическая вёрстка — это вёрстка, основанная и построенная на смысловой структуре. Все элементы в ней подчинены определённой иерархии, где каждый блок имеет свое назначение для целого.
Изначально в HTML для выделения подзаголовков использовались теги b> или <strong>. С приходом семантики такие акценты для заголовков почти не используют. Вместо них ставят теги h1 и h2. И у них есть все необходимые функции для того, чтобы выделить названия разделов жирным увеличенным шрифтом. Такие теги дают больше информации при обработке страницы как веб-разработчику, так и роботам-поисковикам.
А также теги позволяют:
▪️ уменьшить количество кода;
▪️ быстро распознать код;
▪️ ускорить обработку и загрузку документа.
Код становится упорядоченным и понятным, если каждому структурному элементу сайта соответствует свой тег, а описание стилей элементов выводятся в отдельный css-файл.
Самые часто употребляемые теги HTML5 для семантической вёрстки ⬇️
✔ <header> — для шапки профиля, в него обычно включён заголовок, а также внутрь могут помещаться другие теги, соответствующие иерархии;
✔ <article> — заключает элементы статьи: текст, изображения, комментарии;
✔ <section> — разделяет веб-документ на смысловые секции;
✔ <footer> — подвал сайта, в котором содержится информацию о контактах, адреса, ссылки, авторство и т д;
✔ <nav> — для навигации по сайту, в него входят приоритетные ссылки;
✔ <aside> — блок неосновного контента: боковая панель, рекламные блоки, рубрики, метки и т.д.
Важно❗Семантическая вёрстка делает сайт доступным незрячим пользователям. Для того, чтобы распознать содержимое страницы, они используют специальный инструмент – скринридер, который зачитывает текст. В свою очередь семантическая структура помогает ему лучше определять, какой сейчас блок.
Было полезно? Не забудь поделиться постом и поставить нам лайк👍
#methed_про_ит