Что такое семантическая верстка?
12.02.2024
Верстка сайта — это процесс его создания с помощью разметки и дизайна. Сайт должен распознавать, с какого именно браузера или устройства заходит пользователь, адаптироваться и корректно отображаться. Верстка также означает объединение всех элементов, которые были в макете, в единую рабочую структуру.
Верстать страницы можно разными способами — статическим, табличным или блочным. Сегодня в основном используют последний тип, в частности его разновидность — семантическую верстку.
Что такое семантическая верстка?
В отличие от других способов, семантическая верстка делает акцент на внутренней иерархии элементов. Удобство для поисковых систем в том, что код выглядит упорядоченно и понятно.
Сам термин «семантика» означает назначение — придание определенной цели каждому знаку и символу в языке программирования, определяет путь взаимодействия этих символов и их структуру.
Семантическая верстка логически упорядочивает блоки, то есть всю информацию на странице, с помощью тегов HTML. Для их оформления используют каскадные таблицы стилей — CSS.
Семантическая разметка HTML5: краткая история появления
Если коротко, HTML — способ разметки и определения структуры документа. Основную роль в этом процессе играют семантические HTML теги. Ими обозначают каждый элемент с двух сторон. Благодаря такому оформлению браузер знает, как взаимодействовать с информацией.
Тег — название программного элемента, обычно несколько символов, которые размещены в угловых скобках.
В 1990 году Тим Бернерс-Ли создал первый браузер (программа, которая открывает сайты — обеспечивает взаимодействие пользователя с веб-страницей) и HTML. Но официальным годом начала истории языка разметки считают следующий — 1991. Тогда впервые в общем доступе появились семантические HTML теги. Их было всего 18, 11 из которых существуют до сих пор.
Разметка с учетом смыслового наполнения оказалась оптимальным решением для верстки. В последующие годы выходили обновленные версии языка. С 2014 года специалисты используют HTML5.
Семантическая верстка: зачем нужна и каковы ее преимущества?
Сверстать сайт до сих пор можно любым способом. Веб-страница будет открываться в браузере без заметной разницы для большинства пользователей. Однако поисковые роботы и специальные программы считывают информацию иначе. Для этого нужна разметка с учетом смыслового наполнения. Обеспечить ее могут семантические HTML теги.
Есть несколько причин, почему важно использовать именно семантическую верстку:
- Более высокая позиция в поисковом рейтинге. Разметка позволяет ботам Google классифицировать содержимое сайта. Робот может отделить ключевую информацию от второстепенной, различить типы блоков: хедер, футер, навигационную часть, статьи и тому подобное. Такое распределение позволяет сделать выдачу более релевантной, то есть показывать целевой аудитории нужные блоки. Без семантики вся информация воспринимается ботом как одноранговая.
- Доступность сайта для специальных программ, например скринридеров. Технология превращает текст в аудио, позволяя ознакомиться с информацией на вебсайте людям с нарушениями зрения. Без семантических HTML тегов содержимое невозможно классифицировать и корректно озвучить.
- Учет современных веб-стандартов, к которым и относится семантическая разметка HTML5. Каждый элемент в последней версии играет конкретно отведенную ему роль. Они способствуют адаптивности веб-сайта к различным браузерам и устройствам, поскольку другие программы знают, что означает каждый тег.
Основные семантические теги
Не все теги 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
Весь процесс можно разделить на несколько этапов:
- Добавление основных разделов с применением тегов header, main, footer.
- Размещение информации в уже заданных основных блоках — навигация, переменные элементы, статьи.
- Прописывание тегов иерархии и соответствующих смысловых блоков — h1…h6.
- Работа с меньшими блоками — текст, виджеты, списки, цитаты.
- Дополнительные небольшие элементы в разных местах разметки.
Одна из распространенных ошибок — использование семантических HTML тегов для дизайна — цвета текста и шрифта, фона вебсайта. Для этого в современном веб-дизайне принято применять CSS — каскадные таблицы стилей, которые форматируют содержание HTML.
Именно CSS позволяет адаптировать веб-портал под различные устройства. Еще одним преимуществом использования каскадных стилей является возможность применить изменения ко всем указанным тегам, а не форматировать вручную.
Семантическая разметка HTML5 — неотъемлемая часть SEO. Хорошо структурированный, с учетом семантической верстки, веб-сайт занимает более высокие позиции. Поисковая система будет считать его более качественным и релевантным. Разметка с учетом смыслового наполнения способствует адаптивности сайта и доступности для различных категорий людей.
