Skip to content

Всё для WordPress, веб-разработки — и не только

📧 Как вставить HTML в письмо Outlook Web: рабочий способ в 2026

📧 Как вставить HTML в письмо Outlook Web: рабочий способ в 2026

Сверстали HTML-письмо с таблицами, кнопкой и корпоративным логотипом, а Outlook Web превращает его в кашу из угловых скобок. Ctrl+V съедает разметку и показывает голые <td> и <div> вместо дизайна. Кнопки «вставить HTML» в браузерной версии нет и никогда не было.

Обходной путь существует и занимает пару минут: уникальный маркер в теле письма плюс DevTools браузера. Без расширений, без API, без учётной записи разработчика.

Сразу оговорка, которой нет в большинстве инструкций: Microsoft этот метод не документирует и не поддерживает. Он держится на том, что поле ввода письма — обычный contenteditable-блок, а не защищённый компонент. Работает годами, но гарантий Microsoft не даёт. Поэтому в статье есть обязательный шаг «отправьте тест самому себе» и раздел с официальными альтернативами 2026 года.

💡 Быстрый обзор:

  • Создайте черновик в Outlook Web и напишите в теле уникальный маркер ForHTMLEmail
  • Откройте DevTools (F12), найдите маркер поиском по DOM и выберите Edit as HTML
  • Замените маркер целевым HTML-кодом и нажмите Ctrl+Enter
  • Отправьте письмо себе. Убедитесь, что вёрстка дошла до получателя, и только потом рассылайте

Что изменилось к 2026 году

Инструкции пятилетней давности устарели в трёх важных местах. Прежде чем открывать DevTools, разберитесь с новой картиной.

Новый Outlook — это и есть Outlook Web. Microsoft заменяет классический Outlook для Windows «новым Outlook» (проект Monarch). Технически это нативная оболочка на WebView2, внутри которой крутится тот же веб-интерфейс. Отсюда практический вывод: приём, описанный ниже, актуален не только для браузера, но и для того клиента, к которому Microsoft ведёт всех пользователей.

Классический Outlook ещё жив, но доживает. Microsoft обещает поддерживать существующие установки классического Outlook как минимум до 2029 года, а принудительное переключение отложено: не раньше 2027–2028 годов. Office 2016 и 2019 остались без поддержки ещё 14 октября 2025 года, Office 2021 — с 13 октября 2026 года.

«Вставка → Файл как текст» есть только в классике. Старый способ вставить HTML без DevTools (кнопка «Вложить файл» → «Вставить как текст») сохранился, но лишь в классическом Outlook, и кнопку нужно вручную вынести на панель быстрого доступа. В новом Outlook и в браузерной версии этого пункта нет вообще. Заодно умирают все рецепты с VBA-макросами и COM-надстройками: в новом Outlook они не работают.

Внимание, ловушка. В десктопном новом Outlook DevTools открыть больше нельзя: команда olk.exe --devtools отключена намеренно. Делайте всё в браузере — на outlook.live.com или outlook.office.com.

Что понадобится

  • Chromium-браузер. Chrome, Edge, Brave, Opera, Vivaldi. В Firefox механика та же, только вкладка называется Inspector.
  • Аккаунт Outlook. Личный outlook.live.com или рабочий outlook.office.com — разницы в механике нет.
  • Готовый HTML с инлайн-стилями. Держите исходник в отдельном файле: если вкладка закроется, процесс повторяется за полминуты.

Почему инлайн-стили и таблицы всё ещё обязательны

Соблазн велик: раз новый Outlook работает на Chromium, значит можно верстать флексбоксами. Не спешите.

Письмо рендерит почтовый клиент получателя, а не ваш. Пока классический Outlook жив (а он жив до 2029 года), часть адресатов открывает письма движком Word: ни flexbox, ни CSS Grid, ни фоновых изображений, ни веб-шрифтов, а margin игнорируется. Даже там, где display: flex формально проходит, сопутствующие свойства (flex-wrap, align-items, justify-content) вырезаются у большинства клиентов.

Вывод на 2026 год не изменился: табличная вёрстка, инлайн-стили, фиксированная ширина 600 пикселей. Внешние <style>-блоки и <link rel="stylesheet"> Outlook Web игнорирует.

1. Создаём черновик и ставим маркер

Откройте Outlook Web, нажмите «Создать сообщение». Тему и получателя пока не заполняйте — это страховка от случайной отправки черновика с маркером.

Кликните в тело письма и напишите ровно одно слово: ForHTMLEmail. Без пробелов и кавычек, регистр важен. Маркер должен быть единственным содержимым тела: уникальное сочетание букв гарантирует, что поиск попадёт именно в тело письма, а не в элемент интерфейса.

Окно создания письма в Outlook Web: тело письма пустое, тема и получатели не заполнены

2. Находим маркер в DOM

Не закрывая окно письма, нажмите F12 и перейдите на вкладку Elements.

Панель DevTools открыта поверх Outlook Web: вкладка Elements с DOM-деревом письма

Нажмите Ctrl+F внутри панели DevTools (не на странице) — откроется поиск по DOM. Введите ForHTMLEmail и нажмите Enter. DevTools подсветит нужный узел: обычно это <div> или <p>, вложенный в несколько уровней таблиц. Найдите элемент, где ForHTMLEmail — прямое текстовое содержимое, без дочерних тегов.

3. Заменяем маркер на HTML

Кликните по найденному элементу правой кнопкой и выберите Edit as HTML. Или нажмите F2 на выделенном элементе — быстрее.

Поле редактирования развернётся: вы увидите что-то вроде <p>ForHTMLEmail</p>.

Выделите всё содержимое поля и удалите его. Это ключевой момент: если не стереть старое, HTML наложится на маркер и получится мешанина.

Режим Edit as HTML в DevTools: на месте маркера вставлен HTML-код письма

Теперь вставьте свой код через Ctrl+V. Не кликайте мышью за пределами поля — это закроет режим редактирования до фиксации правки. Если DevTools раскрасил теги и показал вложенность деревом, код воспринят как разметка, а не как плоский текст.

Нажмите Ctrl+Enter. Вернитесь к окну письма: вёрстка должна отрендериться прямо в теле — изображения, таблицы, фон, кнопки.

Готовое HTML-письмо отрендерилось прямо в теле сообщения Outlook Web: таблицы, картинки и кнопка

4. Обязательный тест перед отправкой

Этот шаг пропускают, а потом присылают клиенту пустое письмо. Метод неофициальный, поэтому доверяй, но проверяй.

  • Отправьте письмо самому себе. Впишите свой адрес, отправьте, откройте входящее. Только так вы убедитесь, что изменённый DOM действительно ушёл на сервер, а не остался локальной иллюзией в браузере.
  • Откройте его на телефоне и в другом клиенте. Хотя бы в Gmail. Если вёрстка развалилась там, она развалится и у половины адресатов.
  • Посмотрите без картинок. Outlook блокирует внешние изображения по умолчанию. Письмо должно оставаться читаемым: alt-тексты, фоновые цвета, никакого текста картинкой.
  • Только теперь заполняйте получателей и тему.

Как весь процесс выглядит одним прогоном, показывает Stewart Gauld. Ролик записан ещё до появления нового Outlook, но механика маркера и Edit as HTML с тех пор не изменилась.

Официальные альтернативы, если DevTools не вариант

Метод с DevTools ничего не стоит, но он неофициальный и требует рук. Если вставлять HTML нужно регулярно или этим будет заниматься не технический человек, в 2026 году есть легальные пути.

Способ

Кому подходит

Нюанс

Надстройка Outlook (Office.js body.setAsync)

Разработчикам

Официальный API, лимит 1 000 000 символов за вставку. Работает и в веб-, и в новом Outlook

Готовая надстройка из AppSource («Insert HTML by Designmodo»)

Не техническим пользователям

Проверена Microsoft, ставится из магазина. Главная замена DevTools

Расширение браузера (HTMaiL)

Тем, кто живёт в браузере

Стороннее, ~30 тысяч пользователей. Оценивайте риски: расширение получает доступ к почте

Microsoft Graph API (sendMail, contentType: HTML)

Автоматизации и рассылкам из кода

Требует токена. Небезопасный HTML фильтруется по умолчанию

Классический Outlook: «Вставить как текст»

Тем, кто ещё на классике

Кнопку надо вынести на панель вручную. В новом Outlook способа нет

Отдельно: встроенные «Мои шаблоны» для HTML не подходят — они сохраняют только текст, без форматирования и картинок.

Подводные камни 2026 года

  • Скрипты не пройдут. Microsoft вырезает потенциально опасный HTML — <script>, формы, интерактив. Это не новость 2026-го, это защита от XSS, и обойти её через DevTools тоже не выйдет: фильтрация работает на сервере.
  • Размер письма. Держите HTML в пределах 80–100 КБ. Gmail обрезает письма примерно на 102 КБ и прячет остаток за ссылкой «Показать всё сообщение».
  • Тёмная тема. Outlook.com частично инвертирует цвета сам. Добавьте <meta name="color-scheme" content="light dark"> и <meta name="supported-color-schemes" content="light dark">, но пуленепробиваемого способа запретить инверсию не существует — это признаёт и сама Microsoft.
  • Кириллица. Ставьте <meta charset="UTF-8"> в начало шаблона, иначе получите кракозябры.
  • Текстовая версия письма. Через DevTools вы не управляете plain-text-частью: Outlook сгенерирует её сам из HTML. Для критичных рассылок это аргумент в пользу нормального сервиса рассылок.

⁉️🤔 Частые вопросы

Почему Outlook Web не даёт вставить HTML напрямую?

При обычном Ctrl+V браузер отдаёт данные как text/plain, а не text/html — это защита от подстановки вредоносной разметки. DevTools обходит барьер, потому что модифицирует DOM напрямую, а поле ввода письма — обычный contenteditable-блок. Никакой «секретной кнопки» Microsoft не прячет: официального способа вставить произвольный HTML в веб-версию просто не предусмотрено.

Метод точно ещё работает в 2026 году?

Свежие руководства 2024–2025 годов его описывают, и технических изменений, которые бы его сломали, не видно. Но Microsoft метод не документирует и не обещает поддерживать: редактор Outlook Web построен на RoosterJS с внутренней моделью контента, и теоретически она может перезаписать вставленный HTML. Именно поэтому шаг «отправьте письмо себе» не опционален. Проверили — рассылайте.

Работает ли это в новом Outlook для Windows?

В самом десктопном приложении — нет: DevTools там отключили намеренно. Но новый Outlook — это оболочка над тем же веб-интерфейсом, поэтому просто откройте outlook.office.com в браузере, соберите письмо там и отправьте. Результат идентичен.

Сохранится ли HTML, если закрыть черновик?

Нет. Правка живёт в DOM текущей вкладки. На сервер изменённое тело уходит только при отправке (или при автосохранении черновика — но на это лучше не рассчитывать). Закроете вкладку — останется черновик с маркером ForHTMLEmail. Держите исходный HTML в файле.

Можно ли теперь верстать письма на flexbox, раз новый Outlook на Chromium?

Нет. Ваш клиент не решает, чем письмо отрендерится у получателя. Пока классический Outlook с движком Word жив (а Microsoft поддерживает его как минимум до 2029 года), часть адресатов увидит развалившуюся вёрстку. Таблицы и инлайн-стили остаются стандартом как минимум до конца десятилетия.

HTML не вставляется, что проверить?

Три типовые причины. Первая: DevTools не находит маркер — опечатка или лишний пробел, перепишите ForHTMLEmail заново. Вторая: в письме груда тегов — вы не стёрли содержимое поля перед вставкой, нажмите Ctrl+Z и повторите. Третья: после Ctrl+Enter письмо пустое — DevTools отклонил правку из-за ошибки в разметке (незакрытый тег, непарная кавычка). Прогоните код через W3C Validator.

Итог: два правила, которые решают всё

Весь процесс укладывается в цепочку: маркер → F12 → найти в DOM → Edit as HTML → вставить → Ctrl+Enter → отправить себе → проверить → разослать.

Два правила, без которых метод подводит:

  • Тест самому себе — не опция. Метод неофициальный. Пока письмо не пришло вам во «Входящие» в нормальном виде, считайте, что оно не работает.
  • Таблицы и инлайн-стили. Chromium под капотом нового Outlook не отменяет классический Outlook у получателя.

Если вставлять HTML приходится каждую неделю — присмотритесь к надстройке из AppSource: она делает то же самое, но легально и в два клика. Для разовых задач DevTools по-прежнему быстрее всего.

Какие письма отправляете через Outlook Web и часто ли вёрстка разваливается у получателей? Напишите в комментариях.