Всем привет! В данной статье познакомимся с семантикой в HTML, а именно с семантической вёрсткой веб-страниц.
Ещё не так давно при вёрстке сайтов никто не задавался вопросом, что там внутри и уж тем более, что такое семантическая вёрстка. Верстали так, как душе угодно. В основном с помощью таблиц и всего, что только попадётся, а именно использовали теги div и span. Однако, с появлением HTML 5 всё изменилось. Ведь в этой версии появилось огромное количество тегов, которые вносят определённую смысловую нагрузку.
Семантика — раздел в лингвистике, изучающий смысловое значение единиц языка.
Что такое семантика в HTML
Цель всех тегов в HTML это передача смысла документу. Каждый тег несёт свою смысловую нагрузку. К таким тегам относятся:
- <article> — независимая, отделяемая смысловая единица (комментарий, статья и тд)
- <aside> — побочный контент на странице
- <section> — неотделяемый, смысловой раздел документа
- <nav> — раздел навигации с ссылками на внутренние элементы страницы или на другие страницы
- <header> — вводная часть смыслового раздела или всего сайта
- <footer> — заключительная часть смыслового раздела или всего сайта
- <main> — основное содержание страницы, не повторяющееся
- <figure> и <figcaption> — добавление пояснения к изображению
- <details> — используется для раскрытия дополнительной информации
- <mark> — текст, выделенный в справочных целях из-за своей актуальности в определённом контексте
- <summary> — указывает заголовок для <details>
- <time> — используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю
Подробнее про теги
<article>
Означает независимую, отделяемую смысловую единицу. В качестве неё может выступить комментарий, твит, виджет или статья. Желательно, чтобы внутри присутствовал заголовок.
<aside>
Означает косвенный или побочный для страницы контент. Желательно, чтобы блок, обозначаемый данным тегом имел заголовок. Таких блоков на странице может быть несколько.
<section>
Означает смысловой, неотделяемый раздел документа.Желательно, чтобы внутри присутствовал заголовок.
<nav>
Означает раздел навигации с ссылками на внутренние элементы страницы или на другие страницы. Используется в основном для главной навигации, а не для групп ссылок.
<header>
Означает вводную часть смыслового раздела или всего сайта. Таких элементов на странице может быть несколько.
<footer>
Означает заключительную часть смыслового раздела или всего сайта. Таких элементов на странице может быть несколько.
<main>
Означает основное, не повторяющееся на других страницах содержание. Обязательно должен быть один на всей странице.
<figure> и <figcaption>
В тег <figcaption> оборачивается пояснение к изображению в теге <img> и вся эта конструкция оборачивается в тег <figure>:
<figure>
<img src="img.jpg">
<figcaption>Рисунок 1 - Картинка</figcaption>
</figure><details> и <summary>
Используется для раскрытия дополнительной информации. Работает в паре с тегом <summary>, который означает заголовок для <details>:
<details>
<summary>Доп. информация</summary>
Очень важная информация.
</details><mark>
Означает текст, выделенный в справочных целях из-за своей актуальности в данном контексте.
<time>
используется для представления либо времени в 24-рехчасовом формате, либо точной даты по Григорианскому календарю.
Что такое семантическая вёрстка
Семантическая вёрстка — это разметка с упором не на содержание сайта, а на логическую структуру документа и смысловое значение каждого блока.
Разметка страницы с точки зрения семантики выполняется по определённым правилам, соблюдая которые делать семантическую вёрстку очень просто:
- использование на каждой странице сайта основных крупных смысловых блоков: <header>, <main> и <footer>
- использование внутри крупных блоков смысловых разделов: <nav>, <section>, <article>, <aside>
- использование заголовков разного уровня от <h1> до <h6> в порядке убывания и с учётом одного простого правила: <h1> — заголовок документа, может быть только один на странице, заголовки остальных уровней можно использовать сколько угодно раз
- использование мелких элементов внутри смысловых разделов. Например: параграфы, переносы, формы, таблицы и тд.
- использование фразовых элементов, таких как ссылки, кнопки, изображения, видео и тд.
Почему семантическая вёрстка так важна?
Использование семантической вёрстки при создании сайта бывает очень полезно как для пользователя, так и для разработчика.
Для разработчика использование семантической вёрстки полезно в плане более высоких позиций в выдаче поисковых систем. И хоть сами поисковые системы правила индексирования и ранжирования страниц в поиске не раскрывают, по опыту можно сказать, что правильная семантическая вёрстка всегда помогает добиться более высоких позиций в выдаче.
В свою очередь для пользователя семантическая вёрстка будет незаметна, однако и ему она приносит достаточно пользы. Во-первых, чёткое, понятное и правильно структурированное содержание веб-страницы. Во-вторых, для незрячих или частично не зрячих пользователей скринридер (используется вместо браузера) сможет правильно подать информацию и упростить навигацию по странице.
Заключение
Семантическая вёрстка не только очень важна, но и полезна как для пользователя, так и для разработчика. К тому же, она достаточно проста и не требует особых усилий для своей реализации.
Пожалуйста, поставьте оценку статье и напишите в комментариях насколько статья была для вас полезной.
