HTML-редактор онлайн з переглядом і Markdown

Для чого продавцю HTML-редактор

Задача	Що робите
Опис товару для сайту	пишете заголовки, списки й таблицю характеристик і бачите результат до того, як вставите опис у картку
Опис від постачальника	вставляєте чужий HTML і перевіряєте, що в ньому: зайві стилі, незакриті теги, биті картинки
Лист розсилки чи шаблон	правите блок листа й одразу бачите, як він виглядає
Текст із Markdown	перетворюєте нотатки, відповідь AI чи README на HTML і копіюєте код

Порахувати довжину готового тексту під ліміти майданчиків — лічильник символів.

Теги HTML для опису товару

Тег	Що робить	Приклад
<h2>, <h3>	підзаголовки розділів опису	<h2>Характеристики</h2>
<p>	абзац тексту	<p>Легкі кросівки для бігу.</p>
<strong>, <em>	жирний і курсив	<strong>вага 260 г</strong>
<ul>, <li>	список переваг чи комплектації	<ul><li>Розміри 38–46</li></ul>
<table>, <tr>, <td>	таблиця характеристик	<tr><td>Підошва</td><td>EVA</td></tr>
<img>	картинка за адресою	<img src="https://…/photo.jpg" alt="Кросівки">
<a>	посилання	<a href="https://…">Таблиця розмірів</a>

Скрипти, стилі сторінки й iframe у опис товару не вставляйте: більшість сайтів і маркетплейсів їх вирізає.

Markdown → HTML: як перетворити

Перемкніть режим на «Markdown → HTML», вставте текст — праворуч зʼявиться результат, а кнопка «Скопіювати HTML» скопіює вже готовий код. Markdown зручний, коли текст пишуть у нотатках, месенджері чи отримують від AI: розмітка проста, а HTML з неї виходить чистий, без зайвих стилів.

Markdown	HTML
## Заголовок	<h2>Заголовок</h2>
жирний, курсив	<strong>жирний</strong>, <em>курсив</em>
- пункт	<ul><li>пункт</li></ul>
1. пункт	<ol><li>пункт</li></ol>
[текст](https://…)	<a href="https://…">текст</a>
\| A \| B \| + рядок \|---\|---\|	таблиця <table>

HTML з Markdown очищується від скриптів і небезпечних атрибутів, перш ніж потрапити в перегляд і в буфер обміну.

Як перевірити HTML-код

Під редактором видно, скільки символів у коді й які теги відкриті, але не закриті, — наприклад, забутий </strong> робить жирним усе до кінця опису. Це швидка підказка, а не повна перевірка.

Повну перевірку за стандартом робить безкоштовний валідатор W3C: вставте код у вкладку «Validate by Direct Input» — він покаже кожну помилку з номером рядка.

Як подивитися й змінити HTML сторінки в браузері

Код сторінки цілком: у Chrome, Edge чи Firefox натисніть Ctrl + U (на Mac — ⌘ + Option + U).
Код одного блоку: клацніть по ньому правою кнопкою → «Переглянути код» (Inspect). Зміни в цьому вікні видно лише вам і зникнуть після оновлення сторінки.
Скопіювати HTML блоку: у тому ж вікні правою кнопкою по рядку → Copy → Copy outerHTML, — і вставте сюди, щоб правити спокійно.

Чи безпечно вставляти чужий HTML

Так. Перегляд працює в ізольованій рамці без дозволу на скрипти: вставлений код не виконує JavaScript, не бачить сторінку й ваші дані на сайті, а посилання з нього не відкриваються в цій вкладці. Код нікуди не надсилається — редактор працює у вашому браузері.

Опис товару в HTML без ручної верстки

Писати HTML для кожного товару вручну не обовʼязково. Генератор посадкових сторінок Elbuz робить із картки товару інтерактивну сторінку-презентацію — перший екран, фото, шкали характеристик — і вбудовує її в опис на сайті, не змінюючи сам опис: генератор посадкових сторінок (відкривається в новій вкладці). Для цілої категорії — масова генерація (відкривається в новій вкладці).

Типові помилки

Незакритий тег: <b> без </b> робить жирним увесь текст нижче.
Опис скопійовано з Word разом зі стилями style="…" і шрифтами — на сайті він виглядає інакше, ніж у редакторі.
Картинка за адресою з чужого сайту: її можуть прибрати, і в описі лишиться порожнє місце.
Таблиця без <tr>: браузер розкладе комірки в один рядок.
Скрипт у описі товару — маркетплейси й більшість сайтів його вирізають або відхиляють товар.

Чи знали ви?

Markdown задумали як інструмент перетворення тексту в HTML для авторів сайтів; версія 1.0.1 вийшла 17 грудня 2004 року.
Джерело: John Gruber, Daring Fireball, «Markdown», перевірено 29.10.2026
Рамка iframe з атрибутом sandbox без дозволу allow-scripts не запускає скриптів вбудованої сторінки.
Джерело: MDN Web Docs, «The iframe element», перевірено 29.10.2026
Валідатор W3C перевіряє розмітку за адресою сторінки, завантаженим файлом або вставленим кодом.
Джерело: W3C Markup Validation Service, перевірено 29.10.2026
Ідею продовжити розвиток HTML, з якої виріс HTML5, Mozilla й Opera представили на семінарі W3C у 2004 році.
Джерело: WHATWG, HTML Living Standard — Introduction, перевірено 29.10.2026

Часті питання

Як редагувати HTML онлайн?

Вставте код у редактор — праворуч одразу видно результат. Правте код, а коли все готово, натисніть «Скопіювати HTML».

Як перетворити Markdown у HTML?

Перемкніть режим на «Markdown → HTML», вставте текст і скопіюйте готовий HTML кнопкою «Скопіювати HTML».

Як перевірити HTML-код на помилки?

Під редактором видно незакриті й зайві закривні теги. Повну перевірку за стандартом зробить валідатор W3C — вкладка «Validate by Direct Input».

Як подивитися HTML-код сторінки онлайн?

Відкрийте сторінку в браузері й натисніть Ctrl + U — це весь код. Код одного блоку — правою кнопкою по ньому → «Переглянути код».

Як редагувати HTML у Chrome?

Правою кнопкою по елементу → «Переглянути код», потім подвійний клік по тексту чи атрибуту. Зміни видно лише вам до оновлення сторінки; щоб зберегти, скопіюйте код у редактор.

Чи безпечно вставляти сюди чужий код?

Так: перегляд — ізольована рамка без скриптів, код не виконується й нікуди не надсилається.

Чим відкрити HTML-файл?

Будь-яким браузером — він покаже сторінку. Щоб правити код, відкрийте файл у текстовому редакторі або скопіюйте вміст сюди.

Інші інструменти

Усі безкоштовні інструменти