Семантические теги
По умолчанию большинство блоков, которые вы добавляете на страницу, в html-коде будут обозначаться тегом <div>. Есть несколько исключений, например, секции присваивается тег <section>, а картинке — тег <img>.
Чтобы сделать структуру сайта более понятной и четкой, можно использовать семантические теги, присваивая их блокам и элементам вместо стандартного тега <div>.
Зачем нужны семантические теги
Семантические теги используются для улучшения структуры и оптимизации сайта:
- Улучшают продвижение в поисковых системах. Помогают поисковикам быстрее индексировать ваш сайт и разбираться в его контенте. Код сайта будет чистым и правильным с точки зрения семантики, что увеличит его ценность для Google и Яндекса.
- Улучшают доступность сайта. Делают сайт доступнее для людей с ограниченными возможностями. Программы чтения с экрана будут правильно определять важные элементы страницы и лучше интерпретировать ее содержимое.
- Упрощают дальнейшую поддержку и разработку. Обеспечивают более чистую и понятную структуру кода для разработчиков, облегчая его поддержку и масштабирование в будущем.
Теги не влияют на дизайн и css-стили элементов. Они нужны только для структуры страницы и влияют только на html-код.
Какие семантические теги доступны в Taptop
Помимо <div> и <section>, вы можете выбрать для блоков следующие теги:
- header — верхняя секция страницы, обычно содержит логотип и меню.
- footer — нижняя секция страницы, включает контакты, дополнительную навигацию по сайту и т.п.
- nav — блок навигации, содержит ссылки для перемещения по сайту.
- main — основной контент, уникальный для данной страницы.
- article — самостоятельный материал (статья, пост, новость), который можно читать отдельно от остального.
- aside — дополнительная информация, например, боковая панель, блока для рекламы, списки ссылок.
- address — контактная информация владельца сайта.
- figure — иллюстрация, схема, график.
Для текста доступны следующие теги:
-
h1–h6 — заголовки от первого до последнего уровня иерархии.
-
p — абзац текста.
-
blockquote — цитата.
Как присвоить элементу семантический тег
Чтобы задать тег:
- Выберите блок или элемент.
- Перейдите в Настройки на правой панели и выберите нужный тег из списка.
В списке отображаются только доступные для выбранного элемента теги.
При выборе тега blockquote для текста вы можете указать ссылку на источник цитаты.
Примеры:
1. Для меню задан тег Header:
2. Для заголовка задан тег h1:
Тег h1 рекомендуется задавать только одному текстовому элементу на странице, т.к. он обозначает главный заголовок. Поэтому при выборе тега h1 отображается соответствующее предупреждение.