Вам не нужно каждый раз использовать теги div. Используйте эти семантические теги HTML, чтобы сделать ваш сайт более структурированным и доступным.
До появления семантического HTML разработчики использовали элементы div для упорядочивания содержимого. Элементы Div сами по себе не имеют значения. Они только предоставляют способ применения стилей и упорядочивания содержимого.
Слово семантическое означает относящийся к значению. Семантические элементы HTML описывают назначение своего содержимого. Они придают значение разработчику, пользователю, поисковым системам и вспомогательным технологиям. Вот список популярных семантических тегов HTML, которые вы можете использовать в своем следующем проекте.
Что такое дивы?
В HTML элемент div (раздел) является контейнером блочного уровня. Вы используете div для группировки или разделения HTML-элементов на разделы на веб-странице. Синтаксис показан ниже:
<див>
див>
Преимущества использования семантических HTML-элементов вместо Div
HTML5 представил семантические элементы HTML, чтобы упростить чтение кода. Семантические элементы придают смысл и структуру веб-контенту.
Они делают ваш код понятным для других разработчиков. Они также облегчают поисковым системам поиск вашего контента и привлечение трафика на ваш сайт. Вот некоторые семантические элементы, которые вы можете использовать в своих HTML и CSS проекты.
1.
Тег определяет раздел заголовка в документе. Как правило, он содержит логотип сайта, навигацию и заголовок страницы. Это раздел, который появляется в верхней части веб-страницы. Вы можете настроить заголовок в соответствии с вашими потребностями. Синтаксис следующий:
<тело><заголовок>
<h1> Всем привет!h1>
<п>я заголовокп>
заголовок>
тело>
2.
Тег содержит навигационные ссылки для веб-сайта. Это могут быть меню, оглавления или индексы. Обычно его помещают в ярлык. Синтаксис следующий:
<заголовок><навигация>
<ул>
<ли>Ссылки на мой сайтли>
<ли><аhref="#"> Дома>ли>
<ли ><аhref="#"> О нас а>ли>
ул>
навигация>
<h1>Это навигационная часть моего сайта.h1>
заголовок>
В браузере это будет выглядеть так:
Вы можете использовать модели макета CSS, такие как CSS флексбокс согласовать
3.
Тег содержит основное содержимое веб-страницы. Он отделяет содержимое от заголовка, боковой панели и нижнего колонтитула. Главное представляет доминирующее содержание раздел.
<тело><заголовок>
<заголовок> Факты о сайте заголовок>
заголовок>
<основной>
<п> Этот веб-сайт представляет собой краткую демонстрацию того, как работает основной тег.п>
<п> Закрывает часть сайта с полезным контентом.п>
основной>
<нижний колонтитул>
<h3> это нижний колонтитул h3>
нижний колонтитул>
тело>
Это выглядит так:
4.
Использовать тег для определения автономных разделов в документе или на веб-сайте. Например, вы можете использовать их для структурирования сообщений в блогах, журналов или карточек продуктов. element может включать в себя другие элементы, включая другие статьи, разделы и заголовки. Вложенные элементы должны относиться к теме статьи.
<статья>
<h1>Страннее, чем фантастикаh1><статья>
<h3>Введениеh3>
<п>События и лица, описанные в этой книге, вымышлены.п>
статья>
<статья>
<h3>Глава Одинh3>
<п> День был яркий и солнце улыбалось с небап>
статья>
статья>
Это выглядит так:
5.
Тег содержит контент, связанный с основным контентом. Используйте этот тег для создания боковых панелей для цитат, комментариев или отзывов. выделяет информацию, которую читатель может пропустить. Он выделяется среди остального контента.
HTML><HTML>
<стиль>
тело{
цвет фона:#abdbe3;
}
в стороне {
ширина: 30%;
отступ слева: 0,5 бэр;
поле слева: 1re;
гибкий: левый;
box-shadow: вставка 5px 0 5px -5px зеленый;
стиль шрифта: курсив;
красный цвет;
}
в сторону > р {
поле: 0,5 бэр;
стиль>
<тело>
<основной>
<h1> Птицы-ткачиh1>
<п>Ploceidae) — семейство мелких воробьиных птиц. Многие из которых называются ткачиками, ткачиками, ткачиками-зябликами и епископами.п>
<в стороне>
<п>Королевство: Анималия
Тип: хордовыеп>в стороне>
<п>В самых последних классификациях Ploceidae - это клада, исключающая некоторых птиц, которые исторически относились к этому семейству. Некоторые из воробьев, но включает монотипическое подсемейство Amblyospizinae.п>
основной>
тело>
HTML>
6.
элемент содержит часть страницы без определенного семантического элемента. Разделы могут иметь заголовок, чтобы представить содержимое и заключить другие элементы HTML. представляет компоненты веб-страницы, такие как главы в книге или блоге.
HTML><HTML>
<тело>
<h1>Библияh1>
<раздел>
<h2>Введениеh2>
<п>Библия представляет собой собрание религиозных писаний, священных в христианстве, иудаизме, самаритянстве. Библия – это антология – компиляция текстов разной формы – первоначально написаны на иврите, арамейском и греческом койне.п>
раздел>
<раздел>
<h2>Глава первая: Бытиеh2>
<п>Книга Бытия — первая книга еврейской Библии и христианского Ветхого Завета. Его еврейское имя такое же, как и его первое слово, Берешит. Бытие - это рассказ о сотворении мира, ранней истории человечества, предках Израиля и происхождении еврейского народа.п>
раздел>тело>
HTML>
Это выглядит так:
7.
element заключает в себе самостоятельные иллюстрации, такие как изображения или диаграммы. Эти иллюстрации ссылаются на содержимое главной страницы. Рисунки снабжены подписями, указанными элемент. объясняет, о чем изображение.
HTML><HTML>
<тело>
<основной>
<раздел>
<h1>Части компьютераh1>
<п> Есть несколько частей, которые работают вместе, чтобы составить компьютерп>
<фигура>
<изображениеисточник="некоторые-url.jpg"альтернативный="компьютерная мышь">
<figcaption>это компьютерная мышьfigcaption>
фигура>
раздел>
основной>
тело>
HTML>
Вы можете пойти дальше и узнать как создавать адаптивные изображения в HTML.
Элемент HTML содержит информацию в нижней части веб-страницы. Это противоположность элемент. может содержать информацию о владельце страницы. Сюда входят данные об авторских правах или ссылки на дополнительную информацию сайта.
HTML><HTML>
<тело>
<основной>
<раздел>
<h1>Части компьютераh1>
<фигура>
<изображениеисточник="некоторые-url.jpg"альтернативный="компьютерная мышь">
<figcaption>это компьютерная мышьfigcaption>
фигура>
раздел>
основной>
<нижний колонтитул>
<п> Производитель КомпьютерТек © 2023п>
нижний колонтитул>
тело>
HTML>
Приведенный выше код добавляет нижний колонтитул к Части компьютера страницу, как показано на следующем рисунке.
Зачем использовать семантические элементы HTML?
Использование семантических элементов HTML придает коду контекст. Любой, кто смотрел на код, мог легко понять его. Теги упрощают стилизацию элементов и совместную работу над проектами.
Вы можете использовать семантический HTML с интерфейсными библиотеками и фреймворками. Большинство современных веб-браузеров предпочитают семантические элементы HTML традиционным элементам. Начните использовать семантический HTML и убедитесь, что ваш код выглядит современно, читабельно и презентабельно.
