Весной стартует сезон найма, успей отхватить свой оффер!

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

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

Семантическая верстка — это подход к созданию HTML-документов, при котором используются теги, отражающие смысл содержимого. В отличие от использования только <div> или <span>, семантические теги дают структуре документа больше значимости, делая его более понятным для людей, поисковых систем и вспомогательных технологий.

Почему семантическая верстка важна?

  1. Улучшение доступности: Семантические теги помогают технологиям помощи (например, скринридерам) лучше интерпретировать и взаимодействовать с контентом. Например, использование тега <article> для статьи позволяет скринридерам понять, что это отдельная статья.

  2. SEO (Поисковая оптимизация): Поисковые системы, такие как Google, используют семантические элементы для лучшего понимания структуры страницы. Теги, такие как <header>, <footer>, <nav>, помогают поисковикам точно понять, какие части страницы важны, что может повлиять на рейтинг.

  3. Поддержка и расширяемость: Семантическая разметка делает код более читаемым и легким для поддержки. Другие разработчики могут быстрее понять структуру вашего кода и внести изменения без ошибок.

  4. Лучшее взаимодействие с браузерами и устройствами: Семантическая верстка делает страницы более совместимыми с различными браузерами и устройствами, что помогает улучшить производительность и оптимизировать страницы.

Примеры семантических тегов

ТегОписание
<header>Представляет верхнюю часть страницы или раздела, обычно содержит навигацию, логотип и заголовки.
<footer>Содержит информацию о подвале страницы, такие как ссылки на политику конфиденциальности или контактные данные.
<article>Описание независимого содержимого, например, статьи или поста в блоге.
<section>Раздел страницы, который обычно включает заголовок и темы.
<nav>Представляет блок навигации, содержащий ссылки на другие страницы или разделы сайта.
<aside>Содержит вспомогательную информацию, которая не является основной частью контента, например, боковую панель.
<main>Основная часть страницы, содержащая содержимое, которое напрямую связано с основным контекстом страницы.

<h1>, <h2>, <h3>

Заголовки различных уровней, которые помогают структурировать текст и делают его более понятным.

Пример семантической верстки

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример семантической верстки | HackFrontend</title>
</head>
<body>

  <header>
    <h1>HackFrontend</h1>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Заголовок статьи</h2>
      <p>Текст статьи...</p>
    </article>

    <aside>
      <h3>Рекомендуемые статьи</h3>
      <ul>
        <li><a href="#">Статья 1</a></li>
        <li><a href="#">Статья 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 HackFrontend</p>
  </footer>

</body>
</html>

Совет:

Используйте семантические теги для улучшения структуры вашего HTML-кода. Это не только повысит доступность и SEO, но и упростит поддержку вашего проекта.