До внедрения стандартов HTML5 семантическая вёрстка была невозможна, то есть структура страниц
существовала только визуально, о доступности не было и речи. Поэтому разработчики верстали сайты
как придётся, из тегов в основном применяли <div> и <span>, для структурирования страницы применяли табличную
вёрстку.
После выхода HTML5 подход к разметке страниц изменился. Семантическая вёрстка помогает разметить сайт опираясь на его логическую структуру — каждый отдельный блок несёт смысловую нагрузку и находится в конкретном месте.
Это помогает пользователю проще воспринимать сайт, заранее зная где и какие элементы встречаются, а также делает страницу доступной для посетителей с ограниченными возможностями.
Почему важно соблюдать семантическую структуру сайта
Чтобы сайтом было проще пользоваться людям с инвалидностью и чтобы проект лучше воспринимался поисковиками.
Зрячие люди разберутся, где и какие элементы есть на странице и легко отличат заголовок от списка или изображения.
Незрячие же люди пользуются программами для просмотра страниц сайта — скринридерами. Эта программа «зачитывает» страницу вслух — семантическая структура помогает ей проще определять элементы сайта, а пользователь лучше понимает, где на странице он находится и с каким из элементов взаимодействует.
Например, заголовки помогают скринридерам проще «ходить» по сайту, так как у них есть функция постраничной навигации через заголовки.
Поисковики хранят факторы ранжирования в секрете, однако есть намёки на то, что сайты с семантически правильной разметкой страниц проще воспринимаются поисковыми ботами.
Семантика описана в html-стандартах — указаны теги для разметки конкретных элементов сайта или другого веб-приложения вместо общих <div> и <span>.
Спецификация определяет отдельную роль для каждого семантического тега — берите и используйте. Код с грамотной структурой более читаемый и проще интерпретируется браузерами и программами считывания данных с экранов.
Посмотрите на код ниже, даже при беглом осмотре сразу ясно где какие элементы и для чего они.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<meta name="description" content="Описание для страницы">
</head>
<body class="body">
<div class="page">
<header class="header">
Шапка страницы
</header>
<main class="main">
Главное содержимое страницы
</main>
<footer class="main-footer">
Подвал сайта
</footer>
</div>
</body>
</html>
Думаю, уже имея эту информацию разработчику станет понято зачем нужна семантическая вёрстка сайта. :).
Главные семантические теги HTML
Семантика определяет смысл тегов. К смысловым тегам относится, например тег <p>, который задаёт отдельный параграф текста.
В текущих стандартах — HTML Living Standard есть семантические теги для каждой части сайта. Ниже смотрите примеры таких тегов.
Корневые элементы, без которых сайт работать не будет: <html> и <body>.
У тега <html> указывается атрибут
lang="ru" с указанием применяемого на странице языка, он важен для программ чтения
с экрана, так они определяют язык сайта и далее сканируют страницу используя этот язык.
<header>
Вводная часть смыслового раздела или веб-страницы, чаще всего содержит логотип, навигацию и поле поиска.
Обычно одинаковый на всех страницах сайта. Ранее было обязательным использование в <header> заголовка, но сейчас это не актуально.
Тег <header> применяют для разметки шапки всей страницы или отдельных элементов, например в карточке статьи.
<nav>
Отвечает за навигацию, содержит ссылки на другие страницы или на части текущей страницы. Используйте только для главного блока навигации на сайте.
За определение главного блока навигации отвечают дизайнеры и верстальщики, как правило это легко
читается исходя из дизайна сайта. Если навигация дублируется в подвале сайта, то используйте простой список <ul> вместо <nav>, так как это меню дублирующее, а не главное.
<main>
В этом теге располагают основную информацию на странице.
Разрешается только один такой тег на страницу. Старайтесь поместить в этот тег только ту информацию, которая не будет повторяться на других страницах.
<article>
Законченный, самостоятельный элемент на странице, который легко снова использовать повторно в другом месте на сайте. Например: сообщение на форуме; запись в блоге или из социальных сетей; комментарий пользователя; интерактивный виджет и т. д.
Внутри этого тега желательно использовать заголовок, но это не обязательное условие.
<section>
Это группа контента, объединённая одной темой, то есть отдельный раздел на странице с единым смыслом. Обычно так и называют — секция или блок информации. Обязательная часть наполнения страницы — без этой секции страница утратит часть смысловой нагрузки и будет выглядеть неполной, как будто чего-то не хватает.
Желателен заголовок внутри. Если в дизайне заголовка нет верстальщику нужно его придумать, написать и визуально скрыть.
Применяют на странице столько раз, сколько потребуется.
<aside>
Используется для информации косвенно связанной с главным контентом на странице — вроде связано, но можно и убрать. Часто используется для разметки «боковой панели» (сайд-бара), может также применяться для разметки цитат, рекламных блоков и другой похожей информации.
Смело используйте много раз на одной странице, если это нужно.
<h1> — <h6>
Заголовки для разделов.
У каждого заголовка свой уровень, определяемый номером в наименовании. Нумерация заголовков предназначена для создания грамотной структуры страницы в целом и её разделов в отдельности.
Заголовком <h1> размечают раздел верхнего уровня, то есть всей
страницы, поэтому используется единожды — это нужно даже не для СЕО, а именно для
структурирования документа программами чтения с экрана.
Например, на лэндинге заголовком <h1> размечается главный оффер
в верхней секции, далее в остальных секциях главным заголовком будет уже <h2>, а для внутренних элементов секций используется <h3>.
В результате получится грамотная иерархическая структура, которая облегчит навигацию по разделам веб-страницы и сделает изучение контента более комфортным для пользователя.
<hgroup>
Элемент служит для разметки заголовка и связанного с ним содержимого. Обычно группирует связку
заголовок + подзаголовок: <h1>-<h6> + <p>.
Я и сам часто забываю про этот полезный тег, хотя использовать подобные связки приходится постоянно :).
Например:
<hgroup>
<h1>Быстрейший способ утолить голод</h1>
<p>Доставим заказанные блюда в течение 15 минут!</p>
</hgroup>
<footer>
Элемент используется как заключительный для смыслового блока или для веб-страницы. Часто содержит информацию о создателях, оглавление, указание об авторских правах, ссылки на сопутствующие документы; контакты и реквизиты.
Обычно повторяется на каждой странице сайта. Может быть не единственный на странице.
<address>
Этот элемент предназначен для разметки контактной информации людей, авторов или компаний.
Чаще всего используется для разметки контактов в футере сайта.
Семантическая разметка страницы
-
Базовые смысловые блоки, для создания основы страницы. Теги:
<header>, <main>, <footer>. -
Главные базовые элементы в смысловых блоках. Теги:
<nav>, <section>, <article>, <aside>. -
Заголовки для всей страницы, её разделов и секций. Теги:
<h1>-<h6>. Если есть подзаголовки не забываем про тег:<hgroup>. -
Внутренние элементы разделов страницы: списки —
<ul>, <ol>; таблицы —<table>; формы —<form>; контакты —<address>; цитаты и их авторы —<blockquote>, <cite>; параграфы и переносы —<p>, <br>и т. д. -
Дополнительные смысловые элементы разметки. Картинки и видео —
<img>, <video>; кнопки и ссылки —<button>, <a>; дата и время —<time>.
Некоторые правила выбора тегов
- Если легко определить подходящий смысловой тег — применяйте.
-
Для второстепенных оболочек и контейнеров подойдёт
<div>. -
Для небольших текстовых элементов, например для стилизации отдельных слов или фраз подойдёт
<span>.
Подход к выбору <article>, <section>, <div>:
-
Получается подобрать название и заголовок разделу и вынести его на другой ресурс без потери
смысла подойдёт
<article>. -
Получается подобрать название и заголовок, но перенести на другой сайт не выйдет,
<section>наш выбор. -
Не выходит дать название и подобрать заголовок, используем общий
<div>.
Заключение
Мы рассмотрели зачем нужна семантическая вёрстка сайта и главные теги, которые используются при семантической разметке веб-страниц — используйте их только по прямому назначению, когда в этом есть смысл.
Надеюсь, эта информацию будет полезна, и ваша разметка приобретёт грамотную структуру.
Успеха!
Было полезно? Зашлите админу на чай с печеньками
- Маша — 20 RUB Anton — 100 RUB Anna — 120 RUB Алёна — 10 RUB Oleg — 50 RUB Макс — 10 RUB Иван — 30 RUB Nina — 80 RUB Олеся — 100 RUB Маша — 20 RUB Anton — 100 RUB Anna — 120 RUB Алёна — 10 RUB Oleg — 50 RUB Макс — 10 RUB Иван — 30 RUB Nina — 80 RUB Олеся — 100 RUB
Заранее благодарю!
Если нашли ошибку
Нашли ошибку в тексте? Выделите её мышкой и нажмите сочетание клавиш CTRL+ENTER. Я обязательно исправлю ее и вам будет приятнее читать мои тексты!
© Копирование материалов сайта
Все открытые материалы «blog.evkarn.ru», разрешается частично или полностью копировать при условии обязательной гиперссылки на первоисточник.