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

Навигация по статье

Что такое семантические элементы

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

Использование семантических HTML-элементов также делает код более читаемым и поддерживаемым, поскольку в нем четко указано назначение каждого элемента.

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

Вот несколько примеров семантических HTML-элементов:

header

Тег <header> используется для определения заголовка веб-страницы или раздела. Он может содержать логотипы, навигационные меню, панели поиска и другие элементы, связанные с содержимым страницы.

<header> ... </header>

Вот пример:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

section

Тег <section> используется для группировки связанного контента вместе. Его можно использовать для определения глав, тем или любого другого раздела веб-страницы.

<section> ... </section>

Вот пример:

<section>
  <h2>Benefits of using Semantic HTML</h2>
  <ul>
    <li>Improved website accessibility</li>
    <li>Better search engine optimization</li>
    <li>Cleaner and more maintainable code</li>
  </ul>
</section>

article

Тег <article> используется для определения независимого фрагмента контента, который можно использовать повторно. Он может содержать записи в блоге, новостные статьи и другой подобный контент.

<article> ... </article>

Вот пример:

<article>
  <h2>10 Tips for Creating a Successful Website</h2>
  <p>...</p>
</article>

footer

Тег <footer> используется для определения нижнего колонтитула веб-страницы или раздела. Он может содержать информацию об авторских правах, контактные данные и другие элементы, связанные с содержанием страницы.

<footer> ... </footer>

Вот пример:

<footer>
  <p>Copyright © 2023 My Website. All rights reserved.</p>
</footer>

main

Тег <main> — это семантический тег, введенный в HTML5. Он используется для разметки основного содержимого веб-страницы, которое обычно является центральным или наиболее важным контентом, имеющим отношение к теме или назначению страницы.

<main> ... </main>

Тег <main> следует использовать только один раз на странице, и он не должен содержать никакого содержимого, которое не является частью основного содержимого страницы. Тег следует использовать для переноса основного содержимого страницы, такого как статьи, разделы или другой важный контент.

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

<body>
	<header>
		<!-- header content goes here -->
	</header>
	<nav>
		<!-- navigation links go here -->
	</nav>
	<main>
		<article>
			<h1>Article Title</h1>
			<p>Article content goes here.</p>
		</article>
		<section>
			<h2>Section Title</h2>
			<p>Section content goes here.</p>
		</section>
	</main>
	<aside>
		<!-- additional content goes here -->
	</aside>
	<footer>
		<!-- footer content goes here -->
	</footer>
</body>

Дополнительные семантические элементы

В дополнение к обычно используемым семантическим тегам, существует несколько других семантических тегов, которые можно использовать для структурирования содержимого веб-страницы. Вот некоторые другие семантические теги и их назначение:

<nav> Определяет набор навигационных ссылок
<aside> Определяет контент, который связан с основным контентом, но не является его неотъемлемой частью
<figure> и <figcaption>: Эти теги используются для группировки изображений с соответствующими подписями. Тег <figure> используется для размещения изображения, в то время как тег <figcaption> используется для размещения подписи.
<time>: Этот тег используется для обозначения дат, времени и продолжительности способом, который является машиночитаемым и легко понятным для людей.
<address>: Этот тег используется для обозначения контактной информации, такой как физический адрес, адрес электронной почты и номер телефона компании или частного лица.
<details> и <summary>: эти теги используются для создания сворачиваемых разделов содержимого. Тег <details> используется для размещения содержимого, в то время как тег <summary> используется для предоставления краткого описания или заголовка содержимого.
<mark>: Этот тег используется для выделения текста, обычно с целью привлечения внимания к важной информации или поисковым запросам.
<progress>: Этот тег используется для отображения хода выполнения задачи, такой как загрузка файла или отправка формы.
<meter>: Этот тег используется для отображения результатов измерения, таких как ход кампании по сбору средств или уровень заряда батареи устройства.

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

Преимущества использования семантических элементов

Использование семантических HTML-элементов может принести пользу вашему сайту многими способами:

Улучшенная доступность веб-сайта — предоставляя контекстную информацию о содержимом, семантические HTML-элементы облегчают для программ чтения с экрана навигацию и понимание структуры веб-страницы. Это повышает доступность веб-сайта для пользователей с ограниченными возможностями.
Лучшая поисковая оптимизация — поисковые системы используют семантические HTML-элементы для определения релевантности и важности контента. Используя семантический HTML, вы можете улучшить SEO вашего сайта и повысить его видимость в результатах поиска.
Более чистый и поддерживаемый код — семантические HTML-элементы делают код более читаемым и простым в поддержке. Четко указывая назначение каждого элемента, становится легче обновлять и модифицировать код в будущем.
Последовательность и ясность — использование семантических HTML-элементов делает веб-сайт более последовательным и понятным. Следуя стандартной структуре, пользователи могут быстро определить назначение каждого раздела и более эффективно перемещаться по веб-сайту.

Заключение

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