Валидация HTML: проверка на ошибки с помощью validator.w3.org

Почему валидация HTML — это как техосмотр для сайта? 🔍

Представьте, что ваш HTML-код — это автомобиль. Без регулярной проверки он может "ехать", но рано или поздно сломается. Валидатор — это инструмент, который находит скрытые проблемы до того, как их увидит пользователь.

Пример "битого" HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Мой сайт</title>
</head>
<body>
    <div class="header">
        <img src="logo.png" alt> <!-- Ошибка: пропущен атрибут alt -->
        <h1>Приветствие<h1> <!-- Ошибка: не закрыт тег -->
    </div>
</body>
</html>

Как работает валидатор W3C? 🛠️

Validator.w3.org — официальный инструмент Консорциума Всемирной паутины. Он проверяет:

Синтаксические ошибки (незакрытые теги)
Устаревшие элементы (например, <center>)
Отсутствие обязательных атрибутов (как alt у изображений)
Неправильную вложенность тегов

Пошаговая проверка сайта 🚦

Способ 1: Проверка по URL

Откройте https://validator.w3.org
Введите адрес сайта в поле "Validate by URI"
Нажмите "Check"

Пример проверки по URL

Совет от Данилы Бежина: "Всегда проверяйте именно опубликованную версию, а не локальные файлы — сервер может добавлять свои элементы!"

Способ 2: Загрузка файла

<!-- Пример структуры для проверки -->
<!DOCTYPE html>
<html lang="ru"> <!-- Всегда указывайте язык! -->
<head>
    <meta charset="UTF-8">
    <title>Тестовый документ</title>
</head>
<body>
    <p>Контент для валидации</p>
</body>
</html>

На validator.w3.org выберите вкладку "Validate by File Upload"
Перетащите HTML-файл в окно браузера
Дождитесь отчёта

Разбираем типичные ошибки 💥

Ошибка 1: Незакрытый тег

<p>Текст без закрывающего тега  <!-- Валидатор покажет строку с ошибкой -->

Решение: Всегда закрывайте теги в правильном порядке.

Ошибка 2: Устаревший атрибут

<body bgcolor="#ffffff"> <!-- bgcolor устарел в HTML5 -->

Решение: Используйте CSS вместо HTML-атрибутов стилизации.

Ошибка 3: Дубликат ID

<div id="header"></div>
<!-- ... -->
<div id="header"></div> <!-- ID должны быть уникальны! -->

Как читать отчёт валидатора? 📊

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

✅ Зелёный: "Document checking completed. No errors found!"
🟡 Жёлтый: Предупреждения (обычно не критичны)
🔴 Красный: Критические ошибки (требуют исправления)

Пример отчёта:

Error: End tag h1 seen, but there were open elements.
Line 10, Column 5: <h1>Заголовок</div>

Автоматизация — валидация в VS Code ⚡

Установите расширение HTMLHint. Пример конфигурации:

{
    "tagname-lowercase": true,
    "attr-lowercase": true,
    "attr-value-double-quotes": true,
    "id-unique": true
}

Теперь ошибки будут подсвечиваться прямо в редакторе!

Почему это важно для SEO? 📈

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

Замедляют индексацию
Ухудшают доступность
Могут привести к неправильному отображению в поисковой выдаче

Практическое задание 🏆

Создайте HTML-файл с намеренными ошибками
Проверьте его через validator.w3.org
Исправьте все замечания
Сравните визуальное отображение до и после правок

Пример для эксперимента:

<!DOCTYPE html>
<html>
<head>
    <title>Тест</title>
    <meta charset="UTF-8">
</head>
<body>
    <div class="menu">
        <ul>
            <li>Пункт 1
            <li>Пункт 2
        </ul>
    <img src="image.jpg">
</body>
</html>

Подсказка: В этом примере 4 ошибки. Попробуйте найти их все!