Зверстали 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. Без пробілів і лапок, регістр важливий. Маркер має бути єдиним вмістом тіла: унікальне поєднання літер гарантує, що пошук потрапить саме в тіло листа, а не в елемент інтерфейсу.

2. Знаходимо маркер у DOM

Не закриваючи вікно листа, натисніть F12 і перейдіть на вкладку Elements.

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

3. Замінюємо маркер на HTML

Клацніть по знайденому елементу правою кнопкою й виберіть Edit as HTML. Або натисніть F2 на виділеному елементі, швидше.

Поле редагування розгорнеться: ви побачите щось на кшталт <p>ForHTMLEmail</p>.

Виділіть увесь вміст поля й видаліть його. Це ключовий момент: якщо не стерти старе, HTML накладеться на маркер і вийде мішанина.

Тепер вставте свій код через Ctrl+V. Не клацайте мишею за межами поля — це закриє режим редагування до фіксації правки. Якщо DevTools розфарбував теги й показав вкладеність деревом, код сприйнято як розмітку, а не як плаский текст.

Натисніть Ctrl+Enter. Поверніться до вікна листа: верстка має відрендеритися прямо в тілі, зображення, таблиці, фон, кнопки.

4. Обов’язковий тест перед надсиланням

Цей крок пропускають, а потім надсилають клієнту порожній лист. Метод неофіційний, тому довіряй, але перевіряй.

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

Як увесь процес виглядає одним прогоном, показує Stewart Gauld. Ролик записано ще до появи нового Outlook, але механіка маркера й Edit as HTML відтоді не змінилася.

Офіційні альтернативи, якщо DevTools не варіант

Метод із DevTools нічого не коштує, але він неофіційний і потребує рук. Якщо вставляти HTML потрібно регулярно або цим займатиметься не технічна людина, у 2026 році є легальні шляхи.

Окремо: вбудовані «Мої шаблони» для 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 і чи часто верстка розвалюється в отримувачів? Напишіть у коментарях.