Сайт выглядит нормально в одном браузере, но ломается в другом. Или вёрстка «плывёт» после обновления. Или валидатор HTML выдаёт ошибки, связанные с doctype. Причина может быть в отсутствующем или неправильном doctype. Разберём, что это такое, как он влияет на вёрстку и SEO и как исправить.
Что такое doctype и зачем он нужен
Doctype — это инструкция в начале HTML-документа, которая сообщает браузеру, в каком режиме отображать страницу. Он определяет, какой стандарт HTML используется и как браузер должен интерпретировать разметку и CSS.
Современный корректный doctype:
<!DOCTYPE html>
Он должен стоять в самой первой строке документа, до тега html.
Если doctype отсутствует или указан неправильно, браузер может перейти в quirks mode — режим совместимости со старыми браузерами. В этом режиме вёрстка может отображаться иначе, чем задумано.
Что такое quirks mode
Quirks mode — это режим, в котором браузер эмулирует поведение старых браузеров. В этом режиме:
— box model считается иначе;
— некоторые CSS-свойства работают по-другому;
— таблицы и изображения могут отображаться иначе;
— JavaScript может вести себя иначе.
Из-за этого вёрстка может «плыть», элементы могут смещаться, а дизайн — отличаться от задуманного. Особенно это заметно на сложных макетах.
Причина 1: doctype отсутствует
Самая частая причина. Если doctype нет, браузер переходит в quirks mode.
Что проверить:
— есть ли doctype в первой строке;
— нет ли перед ним пробелов, комментариев или других символов;
— не удалён ли он при сборке или минификации.
Для проверки используйте проверка doctype — инструмент покажет, указан ли doctype и в каком режиме отображается страница.
Причина 2: doctype указан неправильно
Даже если doctype есть, он может быть указан неправильно. Например:
— <!DOCTYPE HTML PUBLIC> без указания стандарта;
— <!DOCTYPE html5> вместо <!DOCTYPE html>;
— опечатки в слове DOCTYPE;
— лишние символы или пробелы.
Неправильный doctype может привести к quirks mode или к ошибкам валидации.
Причина 3: doctype не в первой строке
Doctype должен быть в самой первой строке документа. Если перед ним есть пробелы, комментарии, BOM-символ или другие теги, браузер может проигнорировать doctype.
Что проверить:
— нет ли пробелов перед doctype;
— нет ли комментариев перед doctype;
— нет ли BOM-символа;
— нет ли других тегов перед doctype.
Причина 4: CMS или шаблон удаляет doctype
Некоторые CMS, шаблоны или плагины могут удалять doctype при генерации страницы. Или добавлять перед ним свои теги.
Что проверить:
— есть ли doctype в шаблоне;
— не удаляет ли его CMS;
— не добавляет ли плагин свои теги перед doctype;
— не удаляет ли его минификатор HTML.
Причина 5: неправильная кодировка или BOM
BOM-символ в начале файла может привести к тому, что doctype будет проигнорирован. Также неправильная кодировка может влиять на интерпретацию doctype.
Что проверить:
— нет ли BOM-символа в начале файла;
— совпадает ли кодировка файла с meta charset;
— нет ли других символов перед doctype.
Как проверить doctype
Пошаговая проверка:
— откройте исходный код страницы;
— проверьте первую строку;
— убедитесь, что doctype указан правильно;
— проверьте, нет ли символов перед doctype;
— проверьте режим отображения в браузере.
Как исправить
План действий:
— добавить <!DOCTYPE html> в первую строку;
— убрать символы перед doctype;
— проверить шаблон CMS;
— проверить минификатор;
— проверить кодировку и BOM;
— проверить результат в разных браузерах.
Как проверить результат
Чек-лист:
— doctype указан;
— doctype в первой строке;
— нет символов перед doctype;
— страница отображается в standards mode;
— вёрстка корректна в разных браузерах;
— валидатор HTML не выдаёт ошибок doctype.
Если нужно проверить сразу несколько параметров — doctype, charset, HTML — логично перейти к SEO-аудиту.
Частые ошибки
— отсутствие doctype;
— неправильный doctype;
— doctype не в первой строке;
— CMS удаляет doctype;
— BOM-символ перед doctype;
— отсутствие проверки в разных браузерах.
FAQ
Почему doctype важен?
Он определяет режим отображения страницы. Без doctype браузер может перейти в quirks mode, и вёрстка будет отображаться иначе.
Что такое quirks mode?
Это режим совместимости со старыми браузерами. В нём box model и некоторые CSS-свойства работают иначе.
Какой doctype использовать?
<!DOCTYPE html>. Это стандартный doctype для HTML5.
Влияет ли doctype на SEO?
Напрямую — нет. Но если вёрстка ломается из-за quirks mode, это ухудшает пользовательский опыт и может косвенно влиять на позиции.
Почему сайт выглядит нормально в одном браузере, но не в другом?
Разные браузеры по-разному обрабатывают quirks mode. Явное указание doctype решает проблему.
Может ли CMS удалять doctype?
Да. Некоторые CMS, шаблоны и минификаторы могут удалять или изменять doctype.
Что такое BOM и как он влияет на doctype?
BOM — это специальный символ в начале файла. Если он стоит перед doctype, браузер может проигнорировать doctype.
Нужен ли doctype в каждом HTML-документе?
Да. Каждый HTML-документ должен начинаться с doctype.
Как проверить, в каком режиме отображается страница?
В браузере можно проверить через инструменты разработчика. Также инструмент проверки doctype покажет режим.
Что делать, если вёрстка ломается после добавления doctype?
Проверьте CSS и box model. В standards mode некоторые свойства работают иначе, чем в quirks mode. Возможно, потребуется адаптировать стили.
