Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Как использовать семантику структуры сайта

Как использовать семантику структуры сайта

Делая свои сайты мы всегда добавляем некоторый скрытый смысл, который легко понять может лишь некоторые из посетителей. Делаем подсказки, визуально выделяем некоторые, важные места.

Например выделяем заголовок более крупным шрифтом, меню навигации по сайту как правило выглядит определённым образом, а иконка лупы — поиск по сайту. Если мы не будем делать этого, тогда большинство неявных связей попросту будут теряться. Но если кто-то или что-то, захочет прочитать контент сайта, не имеющего всех тех маленьких визуальных подсказок, он попросту потеряет акценты.

Доказать это очень легко, достаточно открыв свой сайт выделить весь контент сочетанием клавиш ctrl+a (cmd+a для MAC)? скопировать его и вставить в любой текстовый редактор и ты увидишь свой сайт без семантики. Так видят сайты поисковые системы, роботы...

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

Что такое семантика?

Как пишет Википедия, с лингвистической точки зрения, семантика это смысловое значение единиц языка (слов). Но нас всё же интересует именно значение слова в вебе. В вебе под семантикой понимают истинное значение HTML элементов страницы, сайта, приложения... 

На «семантически» написанных веб-страница HTML теги используются для создания структуры и иерархии. Некоторый контент имеет второстепенную важность, некоторый наоборот, должен быть в центре внимания. Что-то представить в виде цитаты или просто подчеркнуть часть текста. И для каждого из этих типов контента HTML предоставляет нам инструменты, которыми нужно пользоваться.

Почему это важно?

Ведь если контент, структурированный таким образом легче обрабатывать и использовать. «Семантически правильный» приносит несколько больших и важных преимуществ.

Улучшенная доступность

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

Легкое чтение поисковыми системами (SEO)

Сканеры поисковых систем «заточены» на семантику. Это нужно для их более эффективной работы, поэтому им легче индексировать контент. Использовать правильные теги для нужного контента, ты даёшь поисковику подсказки что и где находится.

Код легче читается

Чтение исходного кода страницы в котором десятки <div> не их приятных, нужно время для разбора кода. Но HTML это не только <div> или <span>. Навигацию по сайту можно разместить в теге <nav>, а основной контент в теге <main> и вуаля, сразу понятно что и где. Конечно, для конечного пользователя это совершенно не важно в какой тег обёрнута навигация или контент. Но твой контент могут использовать не только конечные пользователи.

Как же быть?

Как уже было написано, HTML это много больше, чем <div> или <span>. Есть более сотни различных элементов для структуризации контента, на MDN есть полный список. Но для большинства сайтов хватит и три группы — секционирование контента, семантика контента и функциональные элементы. разберём их подробнее.

Секционирование контента

Веб-страница, как правило, содержит несколько разделов контента: верхний колонтитул (шапка сайта), нижний колонтитул (подвал) и область основного контента. И чтобы разделить весть контент на секции, ориентиры, есть некоторые элементы

Вот список основных, их нужно запомнить:

  • <header> — это по сути обёртка для основного заголовка сайта. В нём, обычно, размещают логотип, название, навигацию по сайту.
  • <main> — в этом теге размещают основной контент, фактическое содержимое. Проще говоря это сайт без шапки, подвала и боковой панели.
  • <section> — в этом контейнере нужно размещать содержимое, которое обозначает некоторый раздел, секцию. В нём также может размещаться заголовок этой самой секции. Но как правило, начав делать семантически правильный код, начинаешь логически понимать суть секции. Один из вариантов, обернуть список статей на главной странице сайта.
  • <article> — этот тег применяется почти как <section>, но отличие в том, что его нужно использовать для такого контента, который можно использовать отдельно, но не для основного контента. В основном используется для обёртывания полной статьи/новости на сайте.
  • <aside> — используется в двух различных случаях. В первую очередь для частично связанного контента, например для выделения боковой панели. Если же его использовать внутри тега <article> подразумевается, что контент содержащий <aside> непосредственно и тесно связан с этой статьёй. Как пример, глоссарий или какое-нибудь пояснение, комментарии по тексту.
  • <footer> — это подвал сайта.
  • <nav> — этот тег предназначен для указания основной навигации по сайту. Но и его нужно использовать для нумерации страниц и ссылок на следующую или предыдущую статью.

В принципе это основные элементы, которые нужно запомнить и понимать как их использовать можно обеспечить полноценную структуру сайта. Если тебе будет интересно более подробно углубиться в эту тему, тему структурирования контента, рекомендую ознакомиться с этой статьёй.

Семантика контента

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

  • <blockquote> — предназначен для выделения цитат.
  • <figure> — нужен для оборачивания картинок, а для описания или заголовка картинки используется <figcaption> внутри <figure>, таким образом обёрнутый заголовок или описание будет чётко указывать на семантическую связать с картинкой.

Это лишь часть из того, что нужно использовать. Полный список можно посмотреть перейдя по этой ссылке.

Функциональные элементы

Я не буду тормозить на этом пункте. Я думаю из всего выше написанного становиться понятно, что функциональные элементы — это те элементы, которые предназначены для выделения дополнительного контента: <canvas>, <source>, <iframe>, формы и т.д.

Что мы имеем в итоге?

Мощный инструмент, который поможет структурировать весь контент, но в первую очередь это даст подсказки в первую очередь для поисковых систем. А они то уж точно скажут спасибо в виде более высоких позиций в выдаче.


Комментарии 0

Вверх
Войти на сайт
или

Восстановить пароль Регистрация