DOCTYPE html
Привет! Правильный DOCTYPE на html странице поможет избежать ошибок валидации вашего кода. К счастью, с приходом HTML5, эта задача намного упростилась, и можно обойтись одной короткой строчкой.
Почему так важен DOCTYPE?
DOCTYPE (Document Type Declaration) — это объявление типа документа. Оно сообщает браузеру, какую версию HTML использовать для отображения страницы.
Без правильного DOCTYPE или при его отсутствии браузер может переключиться в «режим совместимости» (quirk mode), из-за чего вёрстка поедет.
Правильный DOCTYPE выглядит вот так:
<!DOCTYPE html>
причем неважен регистр букв и допускается написать его так:
<!doctype html> или <!DoCtYpE hTmL> — всё работает одинаково.
Как было раньше (до HTML5)
В HTML 4.01 строгий DOCTYPE выглядел в виде такой строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Важно! <!DOCTYPE html> должен быть самой первой строкой документа. Даже пробел или комментарий до него вызовет ошибку валидации.
Вы можете проверить свою страницу на официальном валидаторе W3C.
Частые вопросы про DOCTYPE
Обязательно ли писать DOCTYPE?
Да. Без него браузер может неправильно отображать страницу.
Регистр букв важен?
Нет. <!DOCTYPE html>, <!doctype html> или <!DoCtYpE hTmL> — всё работает одинаково.
Что будет, если указать старый DOCTYPE?
Браузер может переключиться в режим совместимости со старыми стандартами, что приведёт к ошибкам вёрстки. Всегда используйте <!DOCTYPE html>.
Базовая HTML-разметка
Вас может также заинтересовать базовая html-разметка вместе с первой строкой <!doctype html>. Вот самая простая базовая структура HTML документа, главные теги страницы: html, head, body:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> </head> <body> <p>DOCTYPE означает «объявление типа документа». Этот элемент сообщает валидатору, какую именно версию HTML вы используете на своей странице. Данный тег должен всегда находиться в первой строке каждой страницы. Этот абзац здесь нужен только для примера html-разметки.</p> </body> </html>
<meta name="viewport" content="width=device-width, initial-scale=1">
Метатег viewport управляет отображением сайта на мобильных устройствах: шириной и масштабом. Без него адаптивная вёрстка может работать некорректно, поэтому его настоятельно рекомендуют добавлять в каждый современный сайт.
Коротко о главном
- DOCTYPE должен быть первой строкой документа.
- Для HTML5 достаточно одной короткой строки:
<!DOCTYPE html>. - Регистр букв не имеет значения.
- Для адаптивных сайтов добавляйте метатег viewport.
Проверьте свои страницы на валидаторе W3C, чтобы убедиться, что всё правильно.