Самые частые ошибки HTML и как их исправить

Большинство ошибок HTML на сайтах повторяются. В этой статье — самые частые проблемы, которые находит валидатор, и как их исправить.

1. Отсутствие alt у изображений

Ошибка: элемент img должен иметь атрибут alt.

<!-- Неправильно -->
<img src="product.jpg">

<!-- Правильно: информативное изображение -->
<img src="product.jpg" alt="Смартфон Samsung Galaxy S24 в синем цвете">

<!-- Правильно: декоративное изображение -->
<img src="decoration.svg" alt="">

Почему важно: alt нужен для доступности (скринридеры) и SEO. Пустой alt — для декоративных картинок. Подробнее — в руководстве по alt-тегам.

2. Дублирование id

Ошибка: значение атрибута id не должно повторяться в документе.

<!-- Неправильно -->
<div id="content">...</div>
<div id="content">...</div>

<!-- Правильно -->
<div id="main-content">...</div>
<div id="sidebar-content">...</div>

Почему важно: id должен быть уникальным. Дубли ломают якорные ссылки, JavaScript и доступность.

3. Неверная вложенность: block внутри inline

Ошибка: элемент div не может находиться внутри элемента p.

<!-- Неправильно -->
<p>Текст <div>блок</div> продолжение</p>

<!-- Правильно -->
<p>Текст</p>
<div>блок</div>
<p>продолжение</p>

<!-- Или, если нужен inline -->
<p>Текст <span>часть</span> продолжение</p>

Почему важно: по спецификации HTML <p> может содержать только фразовый контент. Браузер автоматически закрывает <p> перед <div>, что может сломать вёрстку.

4. Незакрытые теги

Ошибка: конец файла достигнут при открытом элементе.

<!-- Неправильно -->
<div class="container">
  <p>Текст
  <ul>
    <li>Пункт 1
    <li>Пункт 2
  </ul>
</div>

<!-- Правильно -->
<div class="container">
  <p>Текст</p>
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
  </ul>
</div>

Почему важно: незакрытые теги приводят к некорректному дереву DOM. Браузер «додумывает» структуру, результат может отличаться между браузерами.

5. Элемент a внутри a

Ошибка: вложенная ссылка недопустима.

<!-- Неправильно -->
<a href="/page1">
  <a href="/page2">Ссылка</a>
</a>

<!-- Правильно -->
<a href="/page1">Текст</a>
<a href="/page2">Ссылка</a>

Почему важно: вложенные ссылки запрещены спецификацией. Поведение при клике непредсказуемо.

6. Отсутствие атрибута type у input

Ошибка: для input type="text" атрибут type может быть опущен, но для других типов обязателен.

<!-- Неправильно: input без type -->
<input name="email">

<!-- Правильно -->
<input type="email" name="email">

В HTML5 для type="text" атрибут можно опускать, но явное указание улучшает читаемость и валидацию.

7. Пустой атрибут href у ссылки

Ошибка: атрибут href у элемента a не должен быть пустым.

<!-- Неправильно -->
<a href="">Ссылка</a>

<!-- Правильно: якорь на текущую страницу -->
<a href="#">Ссылка</a>

<!-- Правильно: кнопка вместо ссылки -->
<button type="button">Действие</button>

Если элемент не ведёт на другую страницу, рассмотрите использование <button> вместо <a>.

8. Устаревшие атрибуты (deprecated)

Предупреждение: атрибут устарел, используйте CSS.

<!-- Устарело -->
<table border="1" cellpadding="10" cellspacing="0">
<font size="3" color="red">Текст</font>
<center>Контент</center>

<!-- Современно -->
<table style="border: 1px solid; border-collapse: collapse;">
<span style="font-size: 1rem; color: red;">Текст</span>
<div style="text-align: center;">Контент</div>

Лучше выносить стили в CSS-файл.

9. Неверный порядок заголовков

Предупреждение: пропуск уровней заголовков (h1 → h3 без h2).

<!-- Неправильно -->
<h1>Заголовок</h1>
<h3>Подзаголовок</h3>

<!-- Правильно -->
<h1>Заголовок</h1>
<h2>Подзаголовок</h2>

Иерархия заголовков важна для SEO и доступности.

10. Символы в атрибутах без экранирования

Ошибка: недопустимый символ в атрибуте.

<!-- Неправильно -->
<input placeholder="Введите "имя"">

<!-- Правильно -->
<input placeholder="Введите &quot;имя&quot;">
<!-- Или -->
<input placeholder='Введите "имя"'>

Кавычки внутри значения атрибута нужно экранировать или использовать другой тип кавычек.

Чек-лист исправлений

Ошибка	Действие
Нет alt	Добавить осмысленный alt или alt=""
Дубли id	Переименовать, сделать уникальными
div в p	Заменить на span или вынести div
Незакрытые теги	Добавить закрывающие теги
a в a	Разделить на отдельные ссылки
input без type	Указать type
href=""	Использовать # или button
Deprecated	Заменить на CSS
Заголовки	Соблюдать иерархию h1–h6
Кавычки	Экранировать или менять тип

Проверка после исправлений

После правок проверьте страницу:

• HTML валидация reChecker — проверка по URL
• W3C Markup Validator — https://validator.w3.org/

Подробнее о валидации и её влиянии — в руководстве по HTML валидации.

Дополнительные частые ошибки

11. Форма без action или method

<!-- Неполно -->
<form>...</form>

<!-- Правильно -->
<form action="/submit" method="post">...</form>

12. Кнопка submit без type

<!-- Неоднозначно -->
<button>Отправить</button>

<!-- Явно -->
<button type="submit">Отправить</button>

Без type кнопка может вести себя как submit по умолчанию, но явное указание улучшает предсказуемость.

13. Label без for или без связи с input

<!-- Правильно -->
<label for="email">Email</label>
<input id="email" type="email" name="email">

<!-- Или обёртка -->
<label>
  <input type="checkbox" name="agree"> Согласен с условиями
</label>

14. Пустой обязательный атрибут

<!-- Ошибка -->
<img src="" alt="Фото">

<!-- Исправление: либо валидный src, либо не показывать -->
<img src="photo.jpg" alt="Описание">

Инструменты автоматического исправления

Некоторые инструменты (HTML Tidy, Prettier с плагинами) могут автоматически исправлять часть ошибок: закрывать теги, исправлять вложенность. Используйте с осторожностью — автоматика может изменить логику вёрстки.

Заключение

Большинство ошибок HTML исправляются за минуты: добавить alt, закрыть теги, убрать дубли id, исправить вложенность. Регулярная проверка через HTML валидацию reChecker помогает поддерживать код в порядке.