PrepBro
← Назад к вопросам

Для чего нужны семантические теги?

1.3 Junior🔥 221 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI22 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

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

Что такое семантические теги

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

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

<!-- НЕСЕМАНТИЧНЫЙ СПОСОБ -->
<div>
  <div>My Site</div>
  <div>
    <div><a href="/">Home</a></div>
    <div><a href="/about">About</a></div>
  </div>
  <div>
    <h1>Welcome</h1>
    <p>Content here</p>
  </div>
  <div>
    <p>Footer</p>
  </div>
</div>

<!-- СЕМАНТИЧНЫЙ СПОСОБ -->
<body>
  <header>
    <h1>My Site</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  
  <main>
    <h1>Welcome</h1>
    <p>Content here</p>
  </main>
  
  <footer>
    <p>Footer</p>
  </footer>
</body>

Основные структурные теги

<!-- <header> — начало страницы/раздела -->
<header>
  <h1>Website Title</h1>
  <p>Tagline</p>
</header>

<!-- <nav> — навигация -->
<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<!-- <main> — основной контент страницы (только один!) -->
<main>
  <!-- Весь основной контент здесь -->
</main>

<!-- <article> — независимый, переиспользуемый контент -->
<article>
  <h2>Post Title</h2>
  <p>Posted on <time datetime="2024-01-15">January 15</time></p>
  <p>Post content...</p>
</article>

<!-- <section> — логический раздел документа -->
<section>
  <h2>Our Team</h2>
  <article>
    <h3>John Doe</h3>
    <p>Lead Developer</p>
  </article>
</section>

<!-- <aside> — боковой контент, примечания -->
<aside>
  <h3>Related Posts</h3>
  <ul>
    <li><a href="">Post 1</a></li>
    <li><a href="">Post 2</a></li>
  </ul>
</aside>

<!-- <footer> — конец страницы/раздела -->
<footer>
  <p>&copy; 2024 My Company</p>
  <nav>
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Текстовые семантические теги

<!-- <h1>-<h6> — заголовки (заголовок должен быть только один h1!) -->
<h1>Main Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>

<!-- <p> — параграф текста -->
<p>This is a paragraph with <strong>important</strong> information.</p>

<!-- <strong> — важный текст (обычно жирный) -->
<p>This is <strong>very important</strong> information.</p>

<!-- <em> — выделенный текст (обычно курсив) -->
<p>This is <em>emphasized</em> text.</p>

<!-- <mark> — отмеченный/выделенный текст -->
<p>This is <mark>highlighted</mark> text.</p>

<!-- <small> — мелкий текст или примечание -->
<p>Regular text <small>(with a small note)</small></p>

<!-- <time> — дата/время -->
<p>Published on <time datetime="2024-01-15T14:30:00Z">January 15</time></p>

<!-- <code> — код -->
<p>Use <code>const x = 10;</code> for variables.</p>

<!-- <kbd> — клавиша на клавиатуре -->
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<!-- <var> — переменная -->
<p>The formula is <var>E</var> = <var>m</var>c<sup>2</sup></p>

<!-- <blockquote> — большая цитата -->
<blockquote>
  <p>This is a famous quote.</p>
  <footer>— Author Name</footer>
</blockquote>

Для контента

<!-- <ul> / <ol> — неупорядоченный / упорядоченный список -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<!-- <dl> — список определений -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

<!-- <figure> + <figcaption> — изображение с описанием -->
<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Sales data for Q1 2024</figcaption>
</figure>

<!-- <table> — таблица -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

Для форм

<!-- <form> — форма для пользовательского ввода -->
<form action="/submit" method="POST">
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </fieldset>
  
  <button type="submit">Submit</button>
</form>

<!-- <label> — метка для input поля -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- <fieldset> + <legend> — группировка полей формы -->
<fieldset>
  <legend>Contact Details</legend>
  <input type="tel" placeholder="Phone">
  <input type="email" placeholder="Email">
</fieldset>

Зачем нужны семантические теги

1. SEO (поисковые системы)

<!-- ПЛОХО: поисковикам сложно понять структуру -->
<div id="header">
  <div class="title">My Blog</div>
  <div class="nav">
    <a href="/">Home</a>
  </div>
</div>

<!-- ХОРОШО: структура ясна -->
<header>
  <h1>My Blog</h1>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Google и другие поисковики лучше индексируют семантически правильный HTML и это влияет на ранжирование.

2. Доступность (accessibility)

<!-- ПЛОХО: для скрин-ридеров непонятно -->
<div class="btn" onclick="submit()">Submit</div>

<!-- ХОРОШО: скрин-ридер прочитает как кнопку -->
<button type="submit">Submit</button>

<!-- С label для input -->
<!-- ПЛОХО -->
<div>Username:</div>
<input type="text">

<!-- ХОРОШО -->
<label for="username">Username:</label>
<input type="text" id="username">

Пользователи со скрин-ридерами смогут нормально использовать сайт.

3. Мобильные браузеры

/* Браузеры могут лучше оптимизировать мобильный вид */

article {
  font-size: 16px; /* Браузер знает что это контент */
}

aside {
  font-size: 14px; /* Браузер знает что это боковая панель */
}

/* Режим "читаемого размера" в браузерах использует semantic HTML */

4. Структурированные данные (Schema.org)

<!-- Правильная семантика позволяет легко добавлять structured data -->
<article>
  <h2>How to bake a cake</h2>
  <p>Posted by <span>Jane Doe</span> on <time>2024-01-15</time></p>
  <p>Recipe...</p>
</article>

<!-- Google может лучше понять и показать в поиске -->

5. Легче поддерживать код

<!-- С семантикой понятна структура даже новому разработчику -->
<main>
  <section class="featured-products">
    <h2>Featured</h2>
    <article class="product">
      <!-- Product card -->
    </article>
  </section>
  
  <section class="recent-posts">
    <h2>Recent Blog Posts</h2>
    <article class="blog-post">
      <!-- Post -->
    </article>
  </section>
</main>

Примеры правильной структуры

Структура блога

<!DOCTYPE html>
<html>
<head>
  <title>My Tech Blog</title>
</head>
<body>
  <header>
    <h1>Tech Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>How to Learn JavaScript</h2>
      <p>By <span>John Doe</span> on <time>2024-01-15</time></p>
      <p>Content...</p>
    </article>
    
    <article>
      <h2>React Best Practices</h2>
      <p>By <span>Jane Smith</span> on <time>2024-01-10</time></p>
      <p>Content...</p>
    </article>
  </main>
  
  <aside>
    <h3>Popular Posts</h3>
    <ul>
      <li><a href="">Post 1</a></li>
      <li><a href="">Post 2</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>
</html>

Структура интернет-магазина

<header>
  <h1>Online Store</h1>
  <nav><!-- main navigation --></nav>
</header>

<main>
  <section class="filters">
    <!-- Product filters -->
  </section>
  
  <section class="products">
    <article class="product">
      <h3>Product Name</h3>
      <p>Price: $99</p>
      <button>Add to Cart</button>
    </article>
  </section>
</main>

<aside>
  <!-- Shopping cart -->
</aside>

<footer>
  <!-- Footer content -->
</footer>

Выводы

  1. Семантические теги описывают смысл, а не только внешний вид
  2. Основные: header, nav, main, article, section, aside, footer
  3. Улучшают SEO — поисковики лучше понимают структуру
  4. Улучшают доступность — скрин-ридеры работают корректнее
  5. Упрощают поддержку — код понятнее другим разработчикам
  6. Один <h1> на странице — для основного заголовка
  7. Один <main> — для основного контента
  8. Всегда используй <label> с атрибутом for для input
  9. <article> для независимого переиспользуемого контента
  10. Best practice — используй семантику везде где возможно