Как отредактировать HTML онлайн и увидеть результат: очистка текста, структура и вставка в CMS

Коротко: как отредактировать HTML онлайн и получить чистый код для сайта

Визуальные редакторы CMS и Word хранят вместе с текстом лишнее: стили шрифтов, цвета, пустые span, классы MsoNormal, комментарии Office. Такой код утяжеляет страницу, ломает оформление и усложняет правки. Хороший рабочий процесс простой: оформить текст в визуальном редакторе → очистить разметку до смысловых тегов → проверить структуру → скопировать HTML и вставить в режим «Код» вашей CMS. Всё это можно сделать в браузере, без установки программ.

Что важно запомнить:

1. Оставляйте только смысловые теги: абзацы p, заголовки h2 и h3, списки ul и ol, ссылки a, таблицы table, выделение strong и em. Оформление (шрифт, цвет, отступы) — это задача CSS шаблона, а не текста.
2. Структура заголовков. По MDN, не пропускайте уровни (после h2 — h3, а не h4), на странице нужен один h1, а заголовки нельзя использовать, чтобы увеличить размер текста: для этого есть CSS. В руководстве Google для начинающих сказано, что порядок заголовков не имеет значения для поиска Google, но заголовки помогают читателям и экранным дикторам.
3. Таблицы — только для табличных данных; для заголовков столбцов используйте th, а подпись — caption (MDN).
4. Ссылки: понятный текст вместо «нажмите здесь»; для внешних ссылок в новой вкладке — rel="noopener" (современные браузеры применяют это для target="_blank" неявно, но явное указание помогает старым браузерам).
5. Безопасность. Чужой HTML нельзя вставлять в страницу «как есть»: скрипты, обработчики событий и опасные ссылки удаляются. В моём редакторе это делается по белому списку тегов и атрибутов.

Редактор для работы: визуальный HTML-редактор онлайн на tools.cetto.ru (оформление кнопками, вкладка «HTML-код», автоматическая очистка вставки из Word и Google Документов, копирование чистого HTML; работает в браузере, ничего не сохраняет и не отправляет). В статье: как пользоваться, какие теги оставляются и что удаляется, правила заголовков, списков, таблиц и ссылок, пошаговая вставка в CMS, безопасность, ограничения, десять ошибок и PDF-чек-лист на 29 пунктов.

Оговорки по источникам. Основа: справочник MDN (элементы заголовков, списков, ссылок, атрибут contenteditable, доступность таблиц), руководство Google для начинающих по SEO, страница библиотеки DOMPurify об очистке HTML и код моего редактора. Справочник OWASP по предотвращению XSS не открылся (404), поэтому рекомендации по безопасности даны по DOMPurify и общим правилам. Справки Яндекса о требованиях к HTML-разметке текста я не искал: прямых требований к тегам в справках Google и Яндекса, которые я читал по этой теме, не нашёл. Влияние вёрстки на позиции прямо не подтверждено; она влияет на читаемость, доступность и аккуратность кода.

Как работать с редактором шаг за шагом

1. Вставьте текст. Скопируйте из Word, Google Документов или с другого сайта и вставьте в визуальную область. При включённой опции «Чистить вставку из Word и Google Docs» удаляются все атрибуты style и class, теги span и font, комментарии Office и пустые абзацы; остаются заголовки, абзацы, жирный и курсив, списки, ссылки, таблицы и картинки (по описанию инструмента).
2. Расставьте структуру кнопками: заголовки H2 и H3, абзац, жирный, курсив, списки, цитата, ссылка, таблица. Заголовок H1 на странице обычно задаёт шаблон CMS, а в тексте используют H2 для разделов и H3 для подразделов.
3. Откройте вкладку «HTML-код» и проверьте разметку: нет ли лишних тегов, пустых элементов, дублирующихся заголовков. Правки в коде переносятся в визуальный режим при переключении вкладки.
4. Нажмите «Копировать HTML» и вставьте код в режим HTML (иногда он называется «Исходный код» или «Код») в CMS. Не вставляйте разметку в визуальный режим: редактор CMS может снова добавить свои стили.
5. Проверьте на странице: оформление, ссылки, таблицу на мобильном, заголовки. При необходимости сравните исходный и итоговый текст: сравнение текстов и статья о сравнении.

Ограничения редактора. Он ничего не сохраняет: перед закрытием страницы скопируйте код. Картинки, вставленные вместе с текстом с другого сайта, остаются ссылками на исходные файлы; загрузить картинку с компьютера нельзя, для этого используйте медиабиблиотеку CMS.

Какие теги нужны для текста и что делает каждый

Мой редактор по умолчанию разрешает: p, h1–h6, strong, b, em, i, u, s, del, a, ul, ol, li, blockquote, br, table, thead, tbody, tr, td, th, img, hr, sub, sup, code, pre. У ссылок остаются href, title, target, rel, у картинок — src, alt, width, height, у ячеек — colspan, rowspan, у нумерованного списка — start. Незнакомые теги «разворачиваются» (остаётся их текст), а div превращается в абзац; скрипты, стили, фреймы, формы и подобные элементы удаляются полностью.

Заголовки, списки, таблицы и ссылки: правила

• Заголовки. Один h1 на страницу, он описывает содержимое страницы (MDN сравнивает его с title). Дальше — h2 и h3 без пропусков. Google отмечает, что другие заголовки на странице могут быть одним из источников для заголовка в выдаче; прямого влияния заголовков на ранжирование руководство не заявляет. Подробнее про мета-теги и сниппет: «Мета-теги для SEO» и «Сниппет».
• Списки. Используйте их там, где действительно перечисление; не делайте «списки» из строк с дефисом вручную. Нумерованный — для шагов, маркированный — для набора признаков.
• Таблицы. Подпись через caption, заголовки через th; не применяйте таблицы для компоновки страницы. На мобильных широкие таблицы могут выходить за экран: проверяйте адаптивность. Объединённые ячейки усложняют разметку: по MDN, при colspan и rowspan используйте правильный scope.
• Ссылки. MDN советует писать понятный текст ссылки («подробнее о нашей доставке»), а не «здесь»; для внешних ссылок в новой вкладке указывайте rel="noopener"; для телефона и почты — tel: и mailto:. Про атрибуты nofollow, sponsored и ugc: «Как проверить ссылку на сайт».
• Выделение. Жирным выделяйте ключевые условия (цена, срок, гарантия), а не целые абзацы.
• Кавычки и тире. Приведите к единому виду: «Кавычки-ёлочки», «Типографика текста».

Как вставить HTML в CMS и не получить мусор

1. Найдите режим HTML. В большинстве редакторов CMS есть кнопка «HTML», «Исходный код» или вкладка «Код». Вставляйте скопированный код именно туда.
2. Не вставляйте разметку в визуальный режим: редактор может превратить код в текст или добавить свои стили.
3. Проверьте, не вырезает ли CMS теги. Некоторые системы удаляют таблицы, атрибуты или теги при сохранении. Сохраните страницу и посмотрите итоговый код.
4. Сверьте результат на странице: шрифты и цвета берутся из шаблона; если они отличаются от сайта, проверьте, не осталось ли встроенных стилей.
5. Проверьте на смартфоне: таблицы, изображения и длинные слова.
6. Проверьте ссылки: не ведут ли они на тестовый домен или 404: ссылки на странице.
7. Проверьте заголовки: структура заголовков H1–H6.

Порядок вставки в разных CMS (WordPress, 1С-Битрикс, OpenCart) отличается; общий принцип один: код в режим HTML, затем просмотр результата и проверка исходного кода после сохранения.

Безопасность: почему чужой HTML нельзя вставлять без очистки

• Чужой HTML — недоверенные данные. Он может содержать скрипты, обработчики событий (onclick и др.), ссылки javascript: и встроенные фреймы. Мой редактор удаляет скрипты, стили, фреймы, формы и опасные ссылки, а у остальных тегов оставляет только разрешённые атрибуты (белый список).
• Собственная очистка не заменяет проверенную библиотеку. Библиотека DOMPurify, по её описанию, строится на белых списках и безопасных настройках по умолчанию и предупреждает: изменение уже очищенной разметки может свести защиту на нет; серверное использование требует корректной DOM-среды. Если вы разрабатываете сайт, где пользователи вводят HTML, используйте проверенную библиотеку и не полагайтесь на самодельный фильтр.
• contenteditable делает элемент редактируемым, но не очищает вставку: по MDN, при true вставка сохраняет всё форматирование, а plaintext-only удаляет его. Разметку после пользователя нужно очищать отдельно.
• Не вставляйте разметку из непроверенных источников в админку без просмотра кода.

Десять частых ошибок вёрстки текста

1. Копирование из Word без очистки: классы MsoNormal, встроенные стили, пустые span.
2. Заголовки ради размера: h3 там, где нужен крупный шрифт.
3. Пропуск уровней и несколько h1 на странице.
4. Списки из дефисов вручную вместо ul и ol.
5. Пустые абзацы и <br> для отступов.
6. Таблицы без th и подписи, таблицы для компоновки страницы.
7. Ссылки «здесь» и «подробнее» без смысла.
8. Картинки без alt и без размеров.
9. Вставка кода в визуальный режим CMS вместо HTML-режима.
10. Не проверяют код после сохранения и отображение на мобильных.

Что проверяю в аудите я

В техническом SEO-аудите я проверяю вёрстку текстов: структуру заголовков, лишние стили и теги, ссылки и таблицы, альтернативный текст изображений, адаптивность, и показываю, где разметка мешает читаемости и обработке страниц. Результат: PDF-отчёт на 30–50 страниц, технические задания для программистов, прогноз по трафику и заявкам и созвон, на котором я лично расскажу о найденных ошибках и отвечу на вопросы. Стоимость от 30 000 ₽, срок 3–5 рабочих дней для небольшого сайта и 7–10 для крупного магазина.

Итоговый чек-лист (короткая версия, полная в PDF)

• Текст очищен от стилей, классов и пустых тегов; остались смысловые теги.
• Один h1, дальше h2 и h3 без пропусков; заголовки не используются ради размера.
• Списки и таблицы размечены правильно; у таблиц есть th и подпись.
• Ссылки с понятным анкором; у картинок alt и размеры.
• Код вставлен в HTML-режим CMS и проверен после сохранения и на мобильном.
• Чужой HTML очищается по белому списку; скрипты и опасные ссылки не попадают на сайт.

Об автореВладимир Родионов

Интернет-маркетолог, частный SEO-специалист cetto.ru. 10+ лет в IT, 200+ реализованных проектов, сертификация Яндекса и Google.

Все статьи автора →Задать вопрос в Telegram →