Привет! Хочу рассказать вам о семантике страницы веб-сайта: что это такое и зачем нужно?
Начнем с того, что каждый элемент в html-документе выделяется каким-либо тэгом. Например:
<p></p>
Такая разметка будет означать, что внутри будет текст. Или вот еще пример:
<h1></h1>
Отсюда же видно, что внутри тэга будет располагаться заголовок.
Существует еще множество тэгов, которые нужны для различных элементов: ссылок, полей ввода, и т.п. Без этих тэгов сложно представить верстку. Но что, если я скажу вам, что есть такие тэги, которые не влияют на результат сборки сайта, но при этом они очень важны?
Такие тэги называются семантическими. При указании таких тэгов в вашем коде, они будут выполнять ряд задач:
1) Простое ориентирование. Благодаря семантическим тэгам гораздо ориентироваться по разделам кода;
2) Задается структура сайта. С семантикой страница становится не единым кодом, а объединенными частями, что создает простоту в написании кода;
3) Поисковая оптимизация. Браузеру проще обработать ваш документ, если вы используете семантические тэги.
Итак, разобравшись в сути дела, можем взглянуть на примеры таких тэгов:
- <header></header> - тэг, позволяющий создать шапку (навигацию) веб-сайта;
- <nav></nav> - тэг, вложенный в предыдущий. Хранит в себе ссылки для навигации по странице/страницам;
- <main></main> - тэг, хранящий в себе весь основной контент страницы;
- <section></section> - тэг, представляющий из себя некоторый контейнер, вложенный в предыдущий тэг. Необходим для связки содержимого по смыслу;
- <aside></aside> - тэг, необходимый для создания боковых панелей или сайдбаров;
- <footer></footer> - тэг, отображающий информацию о странице или компании, владеющей ею;
- <article></article> - тэг, позволяющий создать блок, который не зависит от прочего кода;
На следующей картинке вы можете увидеть пример использования семантических тэгов:
Как видите, изучив семантические тэги легко понять, что на картинке представлена навигация некоторой страницы веб-сайта.
Рассмотрим разницу структуры страницы с семантическими тэгам, и без них:
Как можете видеть, основная суть не изменилась - элементы страницы могут располагаться на своих местах и без семантических тэгов, но это дает удобство для доработки и чтения кода.
Для закрепления изученного рекомендую изучить подробнее структуру каждого из тэгов и попробовать создать подобную структуру для страницы.
Переходите на канал, ставьте лайки, изучайте веб-разработку!