1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page

1. 5. Проверка валидности

Previous1. 4. Работа со спецификациейNext1. 6. Часто используемые теги и типовые ошибки

Last updated 1 year ago

Посмотрите на пример кода ниже и попытайтесь найти ошибки синтаксиса.

Код с ошибками в разметке

Правильный ответ

И что, действительно верстальщики каждый раз проверяют свой код именно так, вручную? Конечно же, нет. Строгий синтаксис тем и хорош, что его достаточно легко проверять в автоматическом режиме. Поэтому есть специальный сервис для проверки, или валидации, вашего HTML-кода. Называется он — .

Как пользоваться валидатором

За вами выбор способа проверки. Можно проверять код по ссылке, можно загрузить в сервис HTML-файл, а можно фрагмент кода — написать код прямо в окне сервиса или скопировать части из разметки страницы.

Валидатор берёт ваш код и проверяет его на формальные, строгие правила: правильно ли закрыты теги, правильно ли вложены теги и так далее. Для этого валидатор использует всё те же два поля, с которыми мы работали: Categories и Content model — и универсальное правило про правильный порядок вложенности.

Почему валидатор нашёл сразу пять строгих ошибок? Зачастую одна ошибка, например, незакрытый тег, вызывает целый каскад последующих. Чтобы правильно исправлять ошибки при валидации, необходимо делать это сверху вниз. Как только вы замените <p> на <li> или правильно закроете <div>, часть последующих ошибок может исчезнуть.

Отличие ошибки и предупреждения

Ошибки помечаются как error, и их нужно обязательно исправлять. Это несоответствие формальному синтаксису языка.

Предупреждения помечаются как warning. И это те вещи, которые валидатор проверяет, смотря не на метаданные тега, а на описание, то есть, на его предназначение. Эти предупреждения менее строгие, исправлять их необязательно.

Например, у тега <section> есть рекомендации от разработчиков, о том, что неплохо в каждом теге <section> иметь заголовок. Если валидатор видит этот тег и не видит в нём заголовка, он может показать вам предупреждение. Необходимо ли это править? Не всегда. Error — обязательный к исправлению, warning — обязательный к размышлению.

Зачем вам, как профессионалам, нужно знать, как устроена спецификация? Дело в том, что иногда встречаются нестандартные вопросы, на которые вы не сможете ответить, используя справочники. Например, можно ли вложить внутрь <footer> тег <section>? Зная систему, по которой устроен стандарт, вы легко найдёте ответ.

используется потому, что его сделали авторы правил, которым должен соответствовать код. Вы можете пройти по ссылке и провести валидацию кода своего проекта.

Страница настроек для валидации проекта

проверяет всю разметку по спецификации HTML. Чтобы правильно валидировать документ, он использует <!DOCTYPE>. Если вы написали <!DOCTYPE HTML> — вы работаете по современной версии HTML 5, в которой в ссылки можно вкладывать заголовок, потому что у ссылки прозрачная модель контента. Но если у вас <!DOCTYPE> старый, то в этом случае валидатор выдаст ошибку.

Пример работы валидатора
Валидатор W3C
Валидатор
валидатор W3C
Код с ошибками в разметке
Пример работы валидатора
Страница настроек для валидации проекта