*Статья впервые опубликована в апреле 2008 года, обновлена в январе 2020 года*

Вы когда-нибудь видели HTML-страницу или электронное письмо, где всё выглядит нормально, за исключением того, что вместо апострофов отображаются странные вопросительные знаки или квадратные блоки? Возможно, вы также видели, как другие символы заменяются подобным образом.

## Информация из нашей статьи за 2008 год

Чаще всего это происходит при импорте HTML-кода, созданного в Microsoft Word. Для генерации HTML Word использует специфическую кодировку под названием «Windows Latin 1», которая содержит особые символы, такие как «умные кавычки» и знаки товарных знаков.

Когда вы просматриваете письмо на своем компьютере, эти символы отображаются корректно, но при импорте в Campaign Monitor они могут исчезнуть или превратиться в некорректные символы.

### Кодировка символов имеет значение

Причина в том, что Campaign Monitor отправляет письма в кодировке UTF-8 (которая поддерживает огромное количество языков), а специальные символы в UTF-8 находятся не в тех же местах, что в Windows Latin 1.

Что с этим делать? Первый (и самый надежный) вариант — просто не использовать MS Word для создания HTML. Word не только создает проблемы с кодировкой, но и добавляет огромное количество ненужного HTML-кода даже на простые страницы.

Если вы посмотрите исходный код, то увидите бесконечные нагромождения тегов span и CSS с хаотичными названиями классов. Это также может привести к поломке тегов, которые использует Campaign Monitor, например , из-за вставки других тегов внутрь них.

Существуют гораздо лучшие инструменты для создания простого HTML, даже бесплатные или недорогие — обратите внимание на такие программы, как NVU, Coffee Cup (бесплатная и платная версии) и First Page.

Конечно, при необходимости можно использовать и более продвинутые инструменты, например Dreamweaver.

Другой вариант — воспользоваться функцией «найти и заменить» в «Блокноте» или аналогичном редакторе, чтобы удалить «умные» символы Word и заменить их на правильные символы Unicode. Вот некоторые распространенные символы, на которые стоит обратить внимание:

— Для « (левая двойная кавычка): используйте “

— Для » (правая двойная кавычка): используйте ”

— Для ’ (апостроф): используйте ’

Таким образом, в вашем письме будут отображаться типографически верные символы. Кодировка — сложная область, и вам нужно следить за ней в вашем HTML, на страницах форм подписки и в списках подписчиков, которые вы импортируете.

Всегда помните, что Campaign Monitor в любом случае отправляет письма в UTF-8, поэтому старайтесь изначально импортировать всё в UTF-8, чтобы избежать конвертации.

Дополнительную информацию об HTML и кодировке символов можно найти в руководстве «The Definitive Guide to Web Character Encoding» на сайте SitePoint.

## 4 часто задаваемых вопроса об HTML-письмах

Для тех, кто не знаком с языком гипертекстовой разметки (HTML), это может показаться сложной темой. Поэтому мы составили список часто задаваемых вопросов об HTML-письмах.

### 1. Что такое HTML-письмо?

HTML-письмо — это сообщение, разработанное с использованием языка гипертекстовой разметки. Такие письма отличаются от текстовых сообщений тем, что у вас есть возможность использовать и настраивать различные изображения, шрифты и макеты. Большинство email-маркетологов предпочитают HTML-письма, так как они более привлекательны визуально и лучше удерживают внимание читателя.

*Источник: Gmail / Victoria’s Secret*

### 2. Что такое элементы/теги/атрибуты HTML?

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

*Источник: Campaign Monitor*

**HTML-элементы:** Это отдельные «части» веб-страницы или HTML-письма. К ним относятся абзацы, изображения и даже ссылки. HTML-письма создаются с использованием различных элементов, чтобы сделать их визуально привлекательнее для читателя.

**HTML-теги:** Это названия конкретных элементов, которые используются в вашем письме. Обычно они идут парами — открывающий тег и закрывающий тег. Распространенные теги:

**

** — обозначает «абзац»

**** — обозначает «заголовок документа»

**

** — обозначает «крупный заголовок»

** ** — содержит метаинформацию о документе

** ** — обозначает видимый контент страницы

** ** — обозначает поле, в которое пользователи могут вводить данные

**HTML-атрибуты:** Помогают уточнить поведение или отображение отдельных тегов. Например, вы можете взять тег и дополнить его атрибутом «type». Этот атрибут позволит вам определить тип поля, например, текст или чекбокс.

*Источник: GoSkills*

### 3. В чем разница между HTML и HTML5?

Единственная существенная разница в том, что HTML5 — это самая современная версия языка гипертекстовой разметки. HTML прошел через несколько эволюций с момента своего появления в 1990 году, и текущая версия — это HTML5.

### 4. Какие браузеры поддерживают HTML/HTML5?

Все современные интернет-браузеры поддерживают HTML5, за исключением устаревших версий.

## Заключение

Верстка HTML-писем не обязательно должна быть сложной, особенно с учетом большого количества конструкторов с функцией drag-and-drop. Если вы готовы освоить верстку писем, Campaign Monitor предоставляет несколько бесплатных инструментов для маркетологов, в том числе:

— Конструктор шаблонов писем

— Руководство по CSS

— Инлайнер CSS

— Язык шаблонизации

— Пуленепробиваемые кнопки

— Пуленепробиваемые фоновые изображения

Каждый из этих инструментов помогает упростить работу с HTML-письмами. Если вы хотите создавать потрясающие письма, но вам не хватает знаний в области кодирования, Campaign Monitor поможет вам. Начните создавать красивые HTML-письма с помощью нашего конструктора уже сегодня.