Главная » Блог » SEO » Что такое семантическая верстка?

Что такое семантическая верстка?

12.02.2024

Ольга Сомова


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

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

Что такое семантическая верстка?

В отличие от других способов, семантическая верстка делает акцент на внутренней иерархии элементов. Удобство для поисковых систем в том, что код выглядит упорядоченно и понятно.

Сам термин «семантика» означает назначение — придание определенной цели каждому знаку и символу в языке программирования, определяет путь взаимодействия этих символов и их структуру.

Семантическая верстка логически упорядочивает блоки, то есть всю информацию на странице, с помощью тегов HTML. Для их оформления используют каскадные таблицы стилей — CSS.

семантическая верстка



Семантическая разметка HTML5: краткая история появления

Если коротко, HTML — способ разметки и определения структуры документа. Основную роль в этом процессе играют семантические HTML теги. Ими обозначают каждый элемент с двух сторон. Благодаря такому оформлению браузер знает, как взаимодействовать с информацией.

Тег — название программного элемента, обычно несколько символов, которые размещены в угловых скобках. 

В 1990 году Тим Бернерс-Ли создал первый браузер (программа, которая открывает сайты — обеспечивает взаимодействие пользователя с веб-страницей) и HTML. Но официальным годом начала истории языка разметки считают следующий — 1991. Тогда впервые в общем доступе появились семантические HTML теги. Их было всего 18, 11 из которых существуют до сих пор.

Разметка с учетом смыслового наполнения оказалась оптимальным решением для верстки. В последующие годы выходили обновленные версии языка. С 2014 года специалисты используют HTML5.



Семантическая верстка: зачем нужна и каковы ее преимущества?

Сверстать сайт до сих пор можно любым способом. Веб-страница будет открываться в браузере без заметной разницы для большинства пользователей. Однако поисковые роботы и специальные программы считывают информацию иначе. Для этого нужна разметка с учетом смыслового наполнения. Обеспечить ее могут семантические HTML теги.

Есть несколько причин, почему важно использовать именно семантическую верстку:

  1. Более высокая позиция в поисковом рейтинге. Разметка позволяет ботам Google классифицировать содержимое сайта. Робот может отделить ключевую информацию от второстепенной, различить типы блоков: хедер, футер, навигационную часть, статьи и тому подобное. Такое распределение позволяет сделать выдачу более релевантной, то есть показывать целевой аудитории нужные блоки. Без семантики вся информация воспринимается ботом как одноранговая.
  2. Доступность сайта для специальных программ, например скринридеров. Технология превращает текст в аудио, позволяя ознакомиться с информацией на вебсайте людям с нарушениями зрения. Без семантических HTML тегов содержимое невозможно классифицировать и корректно озвучить. 
  3. Учет современных веб-стандартов, к которым и относится семантическая разметка HTML5. Каждый элемент в последней версии играет конкретно отведенную ему роль. Они способствуют адаптивности веб-сайта к различным браузерам и устройствам, поскольку другие программы знают, что означает каждый тег.

теги html



Основные семантические теги

Не все теги HTML5 являются семантическими, некоторые из них выполняют «декоративную» роль — выделяют текст, придают ему наклон, цвет. Для поисковых ботов такие функции не имеют значения. 

Системные роботы обрабатывают символы, которые классифицируют текст, определяют его место на странице. Дали рассмотрим основные элементы семантической верстки

Article

Используется для обозначения отдельной независимой части. По желанию блок можно переместить в любую часть сайта с сохранением функционала, применить для оформления статьи.

В середине блока article желательно сделать заголовки, по желанию добавить виджеты. Article часто ошибочно используют вместо div (команда для блоков, разделов, чтобы в дальнейшем менять с помощью CSS) или section.

Section

Этим элементом обозначают отдельный смысловой блок, который привязан к содержимому на определенной веб-странице. В отличие от article, section нельзя перемещать по веб-сайту, поскольку это повлияет на иерархию. В середине разрешается размещать текст, заголовки, виджеты.

Nav

Еще один важный структурный элемент, который отвечает за навигацию. Может содержать теги низшей иерархии li, ol, lu для создания различных списков — с нумерацией, маркировкой и без. 

Nav может использоваться несколько раз в одном веб-документе, однако специалисты не рекомендуют им злоупотреблять. 

Header 

Важный тег, который обозначает «шапку» веб-сайта. В нем прописывают навигационные элементы, адрес и телефоны, добавляют логотип, информацию об авторстве. Чаще всего header дублируют на всех страницах сайта. 

Footer

Как противоположность предыдущему тегу, footer обозначает «подвал» веб-страницы — информацию, которая закреплена внизу и дублируется (не обязательно) на всех страницах веб-сайта. Здесь прописывают важные данные — контакты компании, ссылки, Copiright © (специальный знак, который означает защиту авторского права). 

Main

Используют только один раз на конкретной веб-странице и обозначают им уникальную информацию, которая не дублируется в других местах сайта. Его запрещено прописывать в середине footer, article, section, nav и header.

Все описанные выше семантические HTML теги появились в 5 версии 2014 года.

теги HTML5



Правила и ошибки семантической разметки HTML5

Весь процесс можно разделить на несколько этапов:

  1. Добавление основных разделов с применением тегов header, main, footer.
  2. Размещение информации в уже заданных основных блоках — навигация, переменные элементы, статьи.
  3. Прописывание тегов иерархии и соответствующих смысловых блоков — h1…h6.
  4. Работа с меньшими блоками — текст, виджеты, списки, цитаты.
  5. Дополнительные небольшие элементы в разных местах разметки. 

Одна из распространенных ошибок — использование семантических HTML тегов для дизайна — цвета текста и шрифта, фона вебсайта. Для этого в современном веб-дизайне принято применять CSS — каскадные таблицы стилей, которые форматируют содержание HTML. 

Именно CSS позволяет адаптировать веб-портал под различные устройства. Еще одним преимуществом использования каскадных стилей является возможность применить изменения ко всем указанным тегам, а не форматировать вручную. 

Семантическая разметка HTML5 — неотъемлемая часть SEO. Хорошо структурированный, с учетом семантической верстки, веб-сайт занимает более высокие позиции. Поисковая система будет считать его более качественным и релевантным. Разметка с учетом смыслового наполнения способствует адаптивности сайта и доступности для различных категорий людей.

Последние материалы рубрики

Что такое Facebook реклама? Все, что вы хотели знать о...

Двадцать лет назад обычный студент...

Instagram расширяет Creator Marketplace за пределы рынка США

Creator Marketplace использует данные Instagram и рекомендует бизнесам профили криэйторов. Бренды могут проводить целенаправленный поиск...

Диджитал-маркетинг Apple: реклама, SEO и контент, CRO и юзабилити...

Маркетинговая стратегия Apple уже давно...

Исследование бренда Apple: история, статистика,...

Apple — это всемирно известный бренд, который...

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Команда Webpromo реализовывает все задачи, достигая лучших КРІ
Рекомендую Webpromo как надежных партнеров
Кратно выросли показатели прироста органического трафика
Середи многих мы выбрали Webpromo
Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo - это как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете

Мы используем cookie-файлы для предоставления вам наиболее актуальной информации.

Продолжая использовать сайт, Вы соглашаетесь с использованием cookie-файлов.