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

Как выбираешь какой тег использовать?

1.0 Junior🔥 181 комментариев
#HTML и CSS

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

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

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

Как выбираешь какой тег использовать?

Выбор правильного HTML тега — основа семантичного и доступного кода. Это влияет на SEO, юзабилити и поддерживаемость проекта.

Принципы выбора тега

1. Семантика (Semantic HTML)

Используй теги, которые отражают ЗНАЧЕНИЕ содержимого, а не только его внешний вид:

// НЕПРАВИЛЬНО — тег не отражает значение
<div class="header">
  <div class="nav-button">Home</div>
  <div class="nav-button">About</div>
</div>

// ПРАВИЛЬНО — семантичные теги
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

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

Правильные теги помогают экранам для слабовидящих понимать структуру:

<!-- НЕПРАВИЛЬНО: невозможно понять структуру -->
<div class="article">
  <div class="title">My Post</div>
  <div class="author">John Doe</div>
  <div class="date">2025-04-02</div>
  <div>Content here...</div>
</div>

<!-- ПРАВИЛЬНО: чётко определена структура -->
<article>
  <h1>My Post</h1>
  <div class="meta">
    <span>By John Doe</span>
    <time datetime="2025-04-02">April 2, 2025</time>
  </div>
  <p>Content here...</p>
</article>

Основные блочные теги

header — заголовок страницы или секции:

<header>
  <h1>My Website</h1>
  <nav>...
</header>

nav — навигация:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

main — основной контент страницы (ТОЛЬКО ОДИН на странице):

<main>
  <article>...</article>
  <article>...</article>
</main>

article — самостоятельная статья/пост/комментарий:

<article>
  <h2>Blog Post Title</h2>
  <p>Post content...</p>
</article>

section — логический раздел контента:

<section>
  <h2>Products</h2>
  <article>Product 1</article>
  <article>Product 2</article>
</section>

aside — боковой контент (не основной):

<main>
  <article>Main content</article>
  <aside>
    <h3>Related links</h3>
    <ul>...</ul>
  </aside>
</main>

footer — подвал страницы или секции:

<footer>
  <p>&copy; 2025 My Company</p>
  <nav>...
</footer>

Структура целой страницы

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
</head>
<body>
  <!-- Заголовок с логотипом и меню -->
  <header>
    <div class="logo">Logo</div>
    <nav>
      <a href="/">Home</a>
      <a href="/products">Products</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>

  <!-- Основной контент -->
  <main>
    <!-- Первая секция -->
    <section>
      <h1>Welcome</h1>
      <p>Content here...</p>
    </section>

    <!-- Блог статьи -->
    <section>
      <h2>Latest Posts</h2>
      <article>
        <h3>Post 1</h3>
        <p>Content...</p>
      </article>
      <article>
        <h3>Post 2</h3>
        <p>Content...</p>
      </article>
    </section>

    <!-- Боковой контент -->
    <aside>
      <h3>Popular</h3>
      <ul>
        <li>...</li>
      </ul>
    </aside>
  </main>

  <!-- Подвал -->
  <footer>
    <p>&copy; 2025</p>
  </footer>
</body>
</html>

Инлайновые/строчные теги

a — ссылка:

<!-- Правильно -->
<a href="/about">About Us</a>

<!-- Неправильно (div не может быть ссылкой) -->
<div onClick={() => navigate('/about')}>About Us</div>

strong — важный текст (не просто жирный!):

<!-- strong = семантичная важность -->
<p>This is <strong>very important</strong> information.</p>

<!-- b = просто визуальное -->
<p>This is <b>bold</b> text.</p>

em — эмфаза (не просто наклонный!):

<!-- em = интонационная эмфаза -->
<p>I <em>really</em> like this.</p>

<!-- i = просто визуальное (например, иностранные слова) -->
<p>This word is <i>latin</i>.</p>

span — нейтральный контейнер (без семантики):

<!-- Когда нужно стилизовать часть текста без семантики -->
<p>The price is <span class="highlight">$99</span></p>

small — маленький текст (не обязательно визуально, может быть семантичным):

<!-- Для disclaimer, сноски и т.п. -->
<p>Free shipping <small>*terms apply</small></p>

code — код:

<p>Use the <code>function</code> keyword to define a function.</p>

kbd — пользовательский ввод (клавиша):

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save</p>

var — переменная (в программировании):

<p>The formula is <var>e</var> = <var>m</var><var>c</var>²</p>

time — дата/время:

<!-- Лучше для машин (SEO, браузеры) -->
<time datetime="2025-04-02">April 2, 2025</time>

<!-- Без datetime атрибута -->
<time>3 hours ago</time>

Заголовки (h1-h6)

Иерархия заголовков ВАЖНА:

<!-- ПРАВИЛЬНО -->
<h1>Page Title</h1>           <!-- Только один на странице! -->
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
    <h3>Subsection 1.2</h3>
  <h2>Section 2</h2>
    <h3>Subsection 2.1</h3>

<!-- НЕПРАВИЛЬНО (пропуск уровней) -->
<h1>Title</h1>
<h3>Subsection</h3>  <!-- Пропустили h2! -->
<h5>More</h5>        <!-- Пропустили h3, h4! -->

Списки

ul — неупорядоченный список:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

ol — упорядоченный список:

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

dl — список определений:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Формы

<form>
  <!-- Текстовое поле -->
  <label for="name">Name:</label>
  <input id="name" type="text" />
  
  <!-- Email -->
  <label for="email">Email:</label>
  <input id="email" type="email" />
  
  <!-- Пароль -->
  <label for="password">Password:</label>
  <input id="password" type="password" />
  
  <!-- Select -->
  <label for="country">Country:</label>
  <select id="country">
    <option>USA</option>
    <option>Canada</option>
  </select>
  
  <!-- Checkbox -->
  <input id="agree" type="checkbox" />
  <label for="agree">I agree to terms</label>
  
  <!-- Radio -->
  <input id="yes" type="radio" name="subscribe" />
  <label for="yes">Yes, subscribe</label>
  
  <!-- Textarea -->
  <label for="message">Message:</label>
  <textarea id="message"></textarea>
  
  <!-- Button -->
  <button type="submit">Send</button>
</form>

Решение чтобы выбрать тег

Алгоритм:

  1. Какое значение (семантика) у этого контента?

    • Заголовок? → <h1>-<h6>
    • Ссылка? → <a>
    • Список? → <ul>, <ol>, <dl>
    • Статья? → <article>
    • Навигация? → <nav>
    • Табличные данные? → <table>
    • Форма? → <form>

  2. Это основной контент или вспомогательный?

    • Основной → <main>, <section>, <article>
    • Вспомогательный → <aside>

  3. Это блочный или инлайновый элемент?

    • Блочный (новая строка) → <div>, <header>, <section>, etc.
    • Инлайновый (в потоке текста) → <a>, <strong>, <span>, etc.

  4. Нужна ли специальная функциональность?

    • Интерактивность → <button>, <input>
    • Время/дата → <time>
    • Код → <code>

Практические примеры в React

// Правильно — семантичная структура
function Article({ title, date, content, author }) {
  return (
    <article>
      <h1>{title}</h1>
      <div className="meta">
        <time>{date}</time>
        <span>By {author}</span>
      </div>
      <p>{content}</p>
    </article>
  );
}

// Неправильно — дивы везде
function Article({ title, date, content, author }) {
  return (
    <div className="article">
      <div className="title">{title}</div>
      <div className="date">{date}</div>
      <div className="author">By {author}</div>
      <div className="content">{content}</div>
    </div>
  );
}

Выводы

Правильный выбор тага:

  1. Семантичен — отражает значение
  2. Доступен — работает со скринридерами
  3. SEO-friendly — помогает поисковикам
  4. Поддерживаем — легко понять разработчикам
  5. Функционален — имеет нужное поведение по умолчанию

Золотое правило: если сомневаешься между <div> и специальным тегом — используй специальный тег!

Как выбираешь какой тег использовать? | PrepBro