Как не сломать вёрстку из-за незакрытых тегов в письме?
Закрывайте каждый тег таблицы, строки и ячейки. Один пропущенный </td> может «разъехать» ширины в Outlook и растянуть письмо на весь экран. Соблюдайте порядок вложенности, проверяйте код линтером и запускайте html2email, чтобы увидеть несовпадения до отправки.
Кратко
- ✓Всегда закрывайте
<table>,<tr>и<td>в правильном порядке. - ✓Void-элементы (
<img>,<br>) закрывающего тега не требуют. - ✓Используйте валидатор, чтобы ловить несовпадения заранее.
Закрывайте каждый тег таблицы, строки и ячейки. Один пропущенный </td> может каскадом сломать ширины в Outlook и растянуть письмо 600px на весь экран. Держите вложенность аккуратной, проверяйте код и запускайте html2email перед отправкой.
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td style="padding:10px;">Ячейка A</td>
<td style="padding:10px;">Ячейка B <!-- нет </td>
<td style="padding:10px;">Ячейка C</td>
</tr>
</table>← Второй <td> не закрыт; в Outlook макет может растянуться на всю ширину.
Что такое «несбалансированные» теги в письме?
Тег несбалансирован, если у открывающего нет парного закрывающего или теги закрыты не в том порядке. Почтовые клиенты менее снисходительны, чем браузеры: ячейки могут растянуться или контент обрезаться.
Какие теги сильнее всего ломают вёрстку?
Таблицы и ячейки. Незакрытый <td> может «проглотить» следующие ячейки и разнести макет на 100% ширины. Лишний </table> может схлопнуть вложенные блоки.
Как быстро найти незакрытые теги?
- Отформатируйте HTML (например, Prettier), чтобы вложенность была видна.
- Сравните количество
<table,<tr,<tdс количеством закрывающих тегов. - Используйте валидатор html2email для автоматической проверки.
Что делает TagBalanceValidator в html2email?
Сканирует разметку на непарные закрывающие теги, лишние закрытия и незакрытые теги, затем показывает строку и фрагмент кода, чтобы можно было сразу перейти к ошибке.
Могут ли непарные теги привести к обрезке в Gmail?
Косвенно. Плохая вложенность увеличивает разметку и приближает размер к лимиту Gmail 102 КБ. Чистая вложенность держит объём меньше.
Как сохранить безопасную вложенность в сложных макетах?
Используйте модульные части с проверенными обёртками таблиц, не смешивайте flex/grid с таблицами, держите глубину небольшой. Лучше повторяемые паттерны, чем вручную прописанные вложенные таблицы.
Нужны ли закрывающие теги у void-элементов?
Нет. У <img> и <br> закрывающий тег не нужен. Не пишите </img> - это лишний шум, часть ESP может переписать разметку.
Как не допустить регрессий после правок?
Запускайте проверку после каждого изменения шаблона, особенно при копировании фрагментов между рассылками. В чек-лист QA добавьте тестовую отправку в Gmail и Outlook.
Скриншот валидатора с замечаниями по незакрытым тегам.
Цифры и источники
- Внутренняя проверка: 42% багов отображения в шаблонах Outlook были из-за одного пропущенного
</td>. - Обрезка Gmail по размеру: 102 КБ - несбалансированная разметка часто раздувает HTML и приближает к лимиту.
- Валидатор html2email помечает пропущенные, непарные и лишние закрывающие теги с указанием строки.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации