Какие знаешь теги в HTML

Разбор вопроса «Какие знаешь теги в HTML» для Frontend Developer: что проверяет интервьюер, ключевые тезисы, практические примеры и частые ошибки.

Что хочет услышать интервьюер

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

Ключевые тезисы

Основные структурные теги: <html>, <head>, <body>, <header>, <footer>, <main>, <section>, <article>, <nav>, <aside>
Теги для текста: <h1>-<h6>, <p>, <span>, <strong>, <em>, <a>, <br>, <hr>
Списки: <ul>, <ol>, <li>
Медиа-теги: <img>, <video>, <audio>, <iframe>
Формы: <form>, <input>, <textarea>, <select>, <button>, <label>
Таблицы: <table>, <tr>, <td>, <th>, <thead>, <tbody>
Мета-теги: <meta>, <link>, <title>, <style>, <script>
Семантические теги HTML5: <figure>, <figcaption>, <time>, <mark>, <details>, <summary>

HTML-теги — это основа любого веб-документа. Они определяют структуру, содержание и поведение страницы. Основные категории тегов включают структурные (например, <html>, <head>, <body>), текстовые (<p>, <h1>-<h6>), медиа (<img>, <video>), формы (<form>, <input>), таблицы (<table>, <tr>) и мета-теги (<meta>, <title>). Семантические теги HTML5 (<header>, <footer>, <article>) помогают поисковым системам и скрин-ридерам лучше понимать содержимое страницы. Важно использовать теги по их назначению: например, <strong> для важного текста, а не просто для жирного начертания, или <nav> для навигации, а не <div> с классом.

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

Пример 1

Пример семантической разметки страницы:

<header>
  <h1>Мой блог</h1>
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">Обо мне</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Пост о HTML</h2>
    <p>Здесь будет текст статьи...</p>
  </article>
</main>
<footer>
  <p>© 2023</p>
</footer>

Пример 2

Пример формы с валидацией:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <label for="password">Пароль:</label>
  <input type="password" id="password" minlength="8" required>
  <button type="submit">Войти</button>
</form>

Пример 3

Пример оптимизации изображения:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Описание изображения" loading="lazy">
</picture>

Частые ошибки

Использование <div> для всего подряд вместо семантических тегов (например, <nav> или <article>)
Забывают указывать атрибут alt для тега <img>, что важно для доступности и SEO
Путают <ul> (маркированный список) и <ol> (нумерованный список)
Используют <br> для создания отступов вместо CSS

Связанные темы

Доступность (accessibility) в HTML
HTML-атрибуты (глобальные и специфические)
Мета-теги для SEO
HTML-валидация

Follow-up вопросы

Чем отличается <div> от <span>?

Уровень: basic

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

Какие теги используются для создания семантической разметки и зачем она нужна?

Уровень: intermediate

Семантические теги (<header>, <footer>, <article>, <section> и др.) помогают структурировать контент так, чтобы его понимали браузеры и поисковые системы. Это улучшает доступность, SEO и читаемость кода.

Как работают мета-теги и какие из них наиболее важны для SEO?

Уровень: intermediate

Мета-теги (<meta>) предоставляют метаданные о странице. Для SEO важны <title>, <meta name='description'>, <meta name='keywords'>, а также теги для адаптивности (<meta name='viewport'>). Они влияют на отображение в поисковой выдаче и поведение браузеров.

Какие атрибуты обязательны для тега <img> и почему?

Уровень: basic

Обязателен атрибут src (указывает путь к изображению) и alt (альтернативный текст для доступности и SEO). Без src изображение не загрузится, а без alt могут быть проблемы с доступностью и SEO.

Как можно оптимизировать загрузку медиа-контента с помощью HTML-тегов?

Уровень: advanced

Для изображений можно использовать <picture> с <source> для адаптивности, атрибуты loading='lazy' для отложенной загрузки. Для видео — атрибуты preload='none' и <source> с разными форматами. Это ускоряет первоначальную загрузку страницы.