Какой doctype использовать в HTML-письме?
В начале каждого шаблона письма ставьте <!DOCTYPE html>. Так Gmail, Outlook и Apple Mail работают в режиме стандартов, меньше «глюков» с отображением и не ломаются ширина и шрифты. Добавьте его самой первой строкой перед <html>, затем проверьте отправкой теста или валидатором html2email.
Кратко
- ✓В начале письма нужен один doctype:
<!DOCTYPE html>. - ✓Без doctype клиент может уйти в quirks mode и сломать ширины или шрифты.
- ✓html2email автоматически помечает отсутствие doctype.
В начале каждого шаблона письма ставьте <!DOCTYPE html>. Так Gmail, Outlook и Apple Mail работают в режиме стандартов, меньше «глюков» с отображением и не ломаются ширина и шрифты. Добавьте его самой первой строкой перед <html>, затем проверьте отправкой теста или валидатором html2email.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Письмо</title>
</head>
<body>...← Первой строкой задайте <!DOCTYPE html>, чтобы клиенты использовали режим стандартов.
Какой doctype правильный для HTML-письма?
Используйте современный doctype HTML5: <!DOCTYPE html>. Старые переходные doctype не нужны и могут вызвать лишние сбросы CSS в части клиентов.
Совет: ставьте его на первой строке, без BOM и пустых строк перед ним.
Зачем почтовым клиентам нужен doctype?
Doctype переключает движок между режимом стандартов и quirks mode. В quirks mode таблицы могут растягиваться, а шрифты по умолчанию сдвигаться. Тесты Litmus показывают, что Outlook 2019 в quirks mode даёт примерно на 8% больший line-height, чем в режиме стандартов.
Как добавить doctype в шаблон письма?
- Добавьте
<!DOCTYPE html>в самое начало файла. - Далее
<html lang="ru">и минимальный<head>с charset и viewport. - Отправьте тест в Gmail и Outlook и убедитесь, что ширина остаётся 600–800 px.
Что будет, если doctype нет или он неверный?
Клиент может перейти в quirks mode: max-width перестанет учитываться, шрифты станут крупнее. Gmail может подмешивать свой CSS. В итоге возможны поломки вёрстки у таблиц шире 600 px.
Outlook и Gmail по-разному обрабатывают doctype?
Да. Движок Word в Outlook опирается на режим стандартов для корректной ширины таблиц. Gmail часть содержимого head убирает, но doctype и viewport по-прежнему учитывает для масштабирования.
Как html2email проверяет doctype?
DoctypeValidator проверяет первую непустую строку на наличие <!DOCTYPE html>. Если его нет, html2email показывает замечание «Missing HTML Doctype» со ссылкой «Подробнее».
Что ещё должно быть в head рядом с doctype?
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">- По желанию: title для превью; внешний CSS не используйте.
Как сохранить стабильную вёрстку после установки doctype?
Используйте табличную вёрстку, задайте width="600" у основного контейнера и пропишите критические стили инлайном. Держите объём HTML до 100 КБ, чтобы Gmail не обрезал письмо.
Цифры и источники
- Тесты Litmus 2024: в Outlook в quirks mode при отсутствии doctype line-height увеличивается примерно на 8%.
- Gmail обрезает HTML больше 102 КБ; держите разметку компактной, но doctype оставляйте.
- Внутренняя проверка html2email: валидатор помечает 100% шаблонов без doctype.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатно
Без карты и регистрации