Как сделать в html текст: Текст | htmlbook.ru — Вебджем.рф

Содержание

Отделяем заголовки от абзацев или структурирование текста на html странице : WEBCodius

Содержание

Оглавление:

Абзацы в языке HTML
Заголовки в языке HTML
Нумерованные и маркированные списки в HTML
Горизонтальные линии
Комментарии в html коде

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки.

Для работы с текстом в html есть множество тегов, но для начала необходимо поговорить о некоторых особенностях отображения текста в браузере. Во-первых, любое количество пробелов, знаков табуляции и переносов строк, идущих подряд, отображается как один пробел. Т.е. позиционировать текст с помощью пробелов и знаков табуляций не получится.

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Исключение составляет тег pre, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.

Теперь перейдем к рассмотрению структурных элементов текста в разметке html.

Абзацы в языке HTML

Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег «p». Синтаксис создания абзацев следующий:

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег «Р» также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

При открытии данного файла будет примерно такая картина:

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег «Р» поддерживает атрибут align. Он может принимать одно из четырех значений:

left — выравнивание текста по левому краю;
center — выравнивание текста по центру;
right — выравнивание текста по правому краю;
justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

И так это отобразится в браузере:

Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег h2, а самым нижним — уровень 6, тег «h6». Теги h2 — h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.

Синтаксис создания заголовков:

Результат:

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Добавим заголовки в нашу страницу:

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

Теги h2-h6, как и тег «Р», используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом «Р».

Нумерованные и маркированные списки в HTML

Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.

В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега «li». Затем все элементы помещаются внутрь тега «ul», если нужен маркированный список, или внутрь тега «ol», если нужен нумерованный список.

И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег «ul» добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег «li» если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.

По умолчанию атрибут type равен disc. Пример использования:

Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:

A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки.

 Вложенный список помещается внутрь элементов «li» внешнего списка:
И в браузере:
В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега «dl». Внутри него помещают пары «термин — определение». Термины заключают в парный тег «dt», а определения — в парный тег «dd»:
Отображение в браузере:
На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:
И посмотрим результат:
Горизонтальные линии
Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:
И вот как это отображается:
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
  
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег «hr» поддерживает следующие атрибуты:
align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Результат будет примерно таким:
Комментарии html
В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом. Пример:
Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.
 На этом все и, как обычно, подведу итог поста. В данной статье мы рассмотрели основные html-элементы для разделения текста страницы на логические части. Напомню все эти элементы:
 Абзацы — выделяются с помощью парного тега P;
Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!
Что такое Plain-text и как использовать его в рассылках
Plain-text (простой текст) — тип верстки электронного письма, который выглядит как простой текст. Только слова и синие ссылки без картинок, красивых кнопок и других дизайнерских элементов.
Некоторые сервисы для рассылок создают Plain-text версию для HTML-писем автоматически. Такое письмо будет выглядеть как текст, даже если в оригинале рассылки много картинок и есть анимация.
Текстовая версия будет показана в том случае, если HTML-письмо по какой-то причине не загрузится. Например, если подписчик указал в настройках, чтобы письма отображались только в текстовом виде, или он просматривает почту на smart часах.
Нигде не могу найти статистику по доле почт, для которых plain-text формат всё ещё актуален. Чисто «по ощущениям» html-версия без проблем загружается практически везде, во всех распространённых почтовых провайдерах. Возможно, речь идёт о каком-нибудь 1-2% базы или, может быть, вообще о десятых долях %, где действительно востребована текстовая версия.Поэтому обычно сильно не заморачиваюсь с оформлением plain-text варианта письма, оставляя то, что автоматически генерит сервис из html-версии. Слышал, что наличие plain-text полезно для доставляемости, но это, пожалуй, и весь её смысл в современном email-маркетинге. Если, конечно, не рассматривать случай намеренного использования текстового формата рассылки в качестве особого приёма, как это будет показано ниже.
Алексей Ефимов
email-маркетолог, основатель блога «Практичный email маркетинг» и автор книг по email-маркетингу
Также Plain-text сообщением нередко называют упрощенный вариант HTML-письма. Компании адаптируют текстовые email — «вшивают» в слова гиперссылки для сбора статистики, добавляют пару скриншотов, лаконичные кнопки и подстановки.
Например, так делает Notion.
Этот вариант позволяет не отказываться от преимуществ HTML, но при этом сделать письмо естественным и лаконичным.
Для каких рассылок подходит Plain-text
Казалось бы, кому интересно читать такое скучное письмо. Однако есть ситуации, когда Plain-text идеально подходит и полностью решает поставленную задачу.
Транзакционные письма. Plain-text помогает быстро сообщить пользователю о главном, не отвлекая его внимание. Поэтому такая верстка часто используется для транзакционных писем.
Welcome-цепочки и реактивация. Plain-text создает ощущение, что письмо написал ваш друг, приятель или коллега, а не бездушная машина, которая делает массовые рассылки.
Если сочетать Plain-text с подходящим стилем текста, можно добиться эффекта дружеской беседы. Как будто письмо написал сотрудник компании, чтобы предложить помощь или дать совет.
Когда вы предлагаете подписчику пользу и говорите с ним на равных, это вызывает доверие, формирует лояльность и увеличивает шансы попробовать ваш продукт. Поэтому Plain-text в сочетании с правильным копирайтингом отлично подходит для реактивации и приветственных писем.
Пример welcome-письма в формате Plain-text. В свои рассылки сервис Сabinet.fm вставляет неформальные приветствия, советы на основе личного опыта и легкий юмор. Все это отлично сочетается с Plain-text
Обновления и новости. Plain-text иногда используют в рассылках про апдейты. Краткое описание обновления + ссылка на подробности = отличная формула.
Преимущества и недостатки Plain-text
Главная особенность Plain-text в том, что этот формат не перегружает пользователя информацией, позволяет сосредоточиться на сути сообщения. Однако у Plain-text есть и другие плюсы:
Доставляемость. Письмо в виде текста провайдеры с высокой вероятностью поместят во входящие, даже если в почте есть папка для рекламных писем. Почтовики распознают письма с большим количеством картинок как рекламу и могут отправить их в спам или промо. А вот Plain-text читается как личная переписка.
Адаптивность. Письмо будет выглядеть одинаково на смартфоне или ноутбуке, в почтах Google или Mail, в браузерах Chrome или Яндекс. Вам не придется переживать об этом и создавать разные версии письма.
Новизна. Когда в вашем почтовом ящике куча ярких похожих друг на друга писем, Plain-text точно привлечет внимание.
Экономия. Для верстки Plain-text вам не нужен дизайнер. Вы легко и быстро справитесь самостоятельно.
Если Plain-text так хорош, почему его не используют все компании? Все дело в том, что у этого формата есть свои недостатки:
Трудно брендировать. Максимум, что вы сможете добавить в ваше письмо — это маленький логотип. Никаких цветов и шрифтов из брендбука.
Сложно расставить акценты. Чтобы разделить письмо на блоки или выделить заголовки, у вас есть только отступы и шрифты. Никаких красивых разделителей и цветовых переходов.
Нельзя визуализировать контент. Вы не сможете добавить в письмо карусель товаров или сделать красивую мини-витрину. А это очень неудобно для сегмента e-commerce.
Ограничения в сборе статистики. Классический Plain-text не подразумевает гиперссылки. Ссылку вставляют прямо в письмо. В этом случае сервисы рассылок не могут отследить кликрейт письма, а значит, вы не поймете, сколько читателей заинтересовалось тем, что вы предлагаете. Этот недостаток можно устранить, если создавать текстовое письмо в HTML.
Из-за ограничений Plain-text редко используют в маркетинговых и промо-рассылках. А интернет-магазины по-прежнему предпочитают красивую HTML-верстку.
Как сделать классное письмо в Plain-text
Можно верстать текстовую рассылку в HTML или обычном блочном конструкторе. Для этого выберите блок «Текст» и начните печатать. Используйте стандартное форматирование — заглавные буквы, красные строки, тире и звездочки.
Вот несколько советов, которые помогут создать хорошее текстовое письмо:
Разбейте текст на блоки.  Сообщение не должно выглядеть как единое полотно. Используйте проверенные способы адаптировать текст без дизайна.
 
Разделите письмо с помощью абзацев, добавьте маркерные списки. Все это поможет пользователю быстро сориентироваться и найти важную для него информацию.
Пишите легко. Пусть рассылка легко читается и будет логически выстроена. Откажитесь от деепричастных и причастных оборотов, вводных конструкций и слов-паразитов. А перед отправкой проверьте текст в сервисе Главред.
Главред наглядно покажет слова, которые можно заменить или удалить без потери смысла. И поможет улучшить письмо.
Продумайте Tone of Voice. Tone of Voice — голос бренда. Для текстового сообщения лучше всего подходит заботливый дружеский стиль общения. Можно говорить на «ты» или «вы», вызвать эмоции с помощью сторителлинга и добавить смайликов.
Главное, чтобы ваш Tone of Voice был одинаковым в рассылках, на сайте, в личном кабинете и соцсетях.
 Добавьте визуал. Если вы рассказываете про обновления, демонстрируете возможности сервиса или личного кабинета, используйте скриншоты. Они отлично справятся с задачей.
А еще можно показать лаконичные графики и диаграммы. Главное — отказаться от кричащих баннеров, сложных векторных картинок и рисунков. Они не впишутся в формат текстового сообщения.
 
Этот совет подойдет, если вы верстаете рассылку в HTML или конструкторе. Если текстовая версия письма создается в дополнение к HTML-версии (некоторые сервисы для рассылок делают это автоматически), картинок там не будет.
Итак, Plain-text поможет вашим рассылкам выделиться в потоке дизайнерских писем, даст читателю возможность сконцентрироваться на самом главном и узнать вас «по голосу». 😊
Главные мысли
 Как отвечать на электронные письма в формате HTML в Outlook и других клиентах 
 Если вы когда-либо получали электронное письмо в виде обычного текста, вы будете знать, что формат сообщения останется прежним, когда вы отвечаете на него или пересылаете его. Из-за этого вы не сможете добавлять гиперссылки, форматирование и изображения в свою электронную почту. Более того, вместо вашей тщательно разработанной электронной подписи в формате HTML получатель увидит просто ее простую текстовую версию. К счастью, с небольшой настройкой вы можете отвечать на электронные письма в виде простого текста, используя сообщения в формате HTML в Outlook или других почтовых клиентах. Более того, вы можете принудительно использовать формат HTML в каждом электронном письме, отправляемом из вашей организации.
 Сообщения в виде обычного текста 
 Прежде всего, вам может быть интересно, почему вы вообще получаете электронные письма в виде обычного текста. В конце концов, на дворе 21 век, и почтовые клиенты уже должны уметь работать с форматом HTML. Как оказалось, есть несколько причин, по которым вы можете получать электронные письма в виде обычного текста:
 Некоторые мобильные почтовые клиенты по-прежнему не поддерживают электронные письма в формате HTML.
 Различные механизмы, используемые веб-сайтами (например, контактные формы), как правило, используют формат простого текста.
 Некоторые организации из соображений безопасности преобразуют все свои исходящие сообщения и даже входящие электронные письма в обычный текст.
 Большинство почтовых клиентов позволяют использовать различные форматы. Некоторые люди предпочитают не усложнять и использовать облегченные версии электронной почты.
 При ответе Outlook по умолчанию всегда использует формат исходного сообщения. В этом есть здравая логика. Если кто-то отправил вам обычное текстовое сообщение, это может означать, что его почтовый клиент не поддерживает более сложные форматы. Хотя в некоторых случаях эта логика вполне верна, она начинает давать сбои, когда вы думаете о  Ответить все  и  Переслать  варианты, потому что маловероятно, что несколько получателей не смогут просматривать электронные письма в формате HTML. Итак, давайте посмотрим, что вы можете сделать, чтобы изменить формат электронной почты на HTML.
 Изменение формата электронной почты на HTML в Outlook 
 Во-первых, всегда есть возможность вручную переключить формат электронной почты. Когда вы отвечаете или пересылаете сообщение, вы можете перейти к  Format Text  на ленте Outlook и щелкнуть  HTML  .
 Имейте в виду, эта опция недоступна, если вы составляете свой ответ в области предварительного просмотра сообщения. Вам нужно открыть свой ответ или переслать его в новом окне, нажав кнопку  Pop Out .
 Если вы не изменили формат вручную и использовали форматирование, не поддерживаемое в обычных текстовых сообщениях (например, эмодзи), Outlook даст вам возможность преобразовать сообщение в HTML. Когда вы нажмете  Отправить  , откроется средство проверки совместимости  Microsoft Outlook , которое предоставит вам  Переключиться на HTML  вариант:
 Хотя изменение формата на HTML не является сложной задачей, это еще одна вещь, которую нужно помнить каждый раз, когда вы отвечаете на сообщение. А поскольку дополнительная подсказка не появится, если вы не добавляли форматированный текст, она не может служить напоминанием. Более того, вы можете потратить довольно много времени, пытаясь понять, почему, например, сочетание клавиш  Ctrl  +  K  не добавляет гиперссылки, прежде чем вы поймете, что сообщение представляет собой обычный текст. Я знаю, что потратил на это немало времени в Outlook.
 Правда в том, что даже если вы всегда хотите отвечать, используя HTML-сообщения, использование ручного метода все равно приведет к пропуску некоторых писем. Иногда вы даже не осознаете, что только что отправили обычное текстовое сообщение. Вот почему лучше всего автоматически преобразовывать электронные письма в HTML, чтобы уменьшить количество повторяющихся задач и быть максимально продуктивным.
 Как принудительно использовать формат HTML во всех ответах и переадресациях, отправляемых из Outlook 
 В этой статье HowTo-Outlook представлен макрос, который можно использовать для автоматического изменения формата электронной почты во всех ответах и переадресациях. Если вы отправляете сообщения только с помощью Outlook и вам нужно решение для личного использования, это может помочь.
 Проблема в том, что использование макросов может противоречить политике вашей компании. Кроме того, они не будут работать ни с одним почтовым клиентом, кроме Outlook. Вот почему вам следует взглянуть на другое решение, которое будет работать для всех в вашей организации, независимо от почтовых клиентов или устройств, которые они используют для отправки своих электронных писем.
 Как заставить формат HTML в каждом сообщении 
 К счастью, есть способ преобразовать каждое электронное письмо, отправляемое в вашей компании, в формат HTML. Таким образом, даже если кто-то отправляет свои электронные письма в текстовом формате (например, с мобильного устройства), они будут автоматически преобразованы в HTML. Более того, эти электронные письма будут иметь персонализированную подпись электронной почты с включенным вашим брендом.
 Принудительное использование формата HTML — это одна из дополнительных опций, доступных в наших инструментах управления подписями электронной почты. Решения, которые позволяют вам сделать это, — это CodeTwo Exchange Rules Pro для любого локального сервера Exchange Server и подписи электронной почты CodeTwo для Office 365 для Microsoft 365. Эти инструменты позволяют вам централизованно управлять подписями электронной почты, гарантируя, что каждое отправляемое вами сообщение поможет вам создать бренда и создает новые маркетинговые возможности.
 Узнайте, как инструменты управления подписями электронной почты могут облегчить вашу работу:
 On Scalable Text 
   Примечание:   Последнее обновление этой страницы было в апреле 2002 г. Некоторые сведения могут быть устаревшими.
 Резюме 
 Чтобы обеспечить масштабируемый текст, делайте текстовую информацию текстом (а не изображениями) и используйте относительные размеры текста (а не абсолютные). Масштабируемый текст важен для людей со слабым зрением. Основы предоставления масштабируемого текста очень просты. Однако строгие требования к дизайну могут создавать проблемы.
 
 Эта страница охватывает:
 Основная проблема с масштабируемым текстом
 Проверка масштабирования текста
 Текст относительного размера
 Представление текстовой информации (сделать текст текстом, а не изображениями)
 Подробнее о масштабируемом тексте
 Основная проблема с масштабируемым текстом 
 Когда разработчики веб-страниц предоставляют масштабируемый текст, посетители веб-сайта могут изменять размер текста в соответствии со своими потребностями и предпочтениями. Люди со слабым зрением могут выбрать крупный текст, чтобы они могли читать содержимое страницы и навигацию. Кроме того, люди с хорошим зрением могут выбрать мелкий текст, чтобы они могли видеть больше страницы за раз и им не приходилось так много прокручивать.
 Для веб-разработчиков в этом документе описаны две проблемы предоставления масштабируемого текста:
 Изменение размера текста в относительных единицах
 Создание текста текстом, а не изображениями
 Включено  примеров текста с изменяемым размером и текста без изменения размера  . В следующем разделе рассказывается, как проверить, предоставляет ли веб-страница масштабируемый текст.
 Верх
 Проверка масштабирования текста 
 Измените размер шрифта в настройках браузера и убедитесь, что размер всего текста изменяется соответствующим образом. Это работает лучше всего, когда вы делаете радикальные изменения от очень большого к очень маленькому шрифту. Вы можете открыть два экземпляра браузера, чтобы сравнить страницу с крупным и мелким шрифтом.  Если текст не изменяется с настройками размера шрифта браузера, либо размер текста указан в абсолютных единицах, либо он находится в изображении. 
  Чтобы изменить размер шрифта в Internet Explorer:  
 В меню выберите  Вид > Размер текста >  и размер шрифта.
  Чтобы изменить размер шрифта в Netscape:  
 В меню выберите  Вид > Увеличить шрифт  или  Вид > Уменьшить шрифт  .
 (Примечание: некоторые браузеры, такие как  Opera  автоматически масштабирует все элементы страницы, включая текст на изображениях и текст абсолютного размера. Эта проверка не работает с этими браузерами.)
  См. Примеры текста, размер которого изменяется, и текста, размер которого не изменяется. 
 Верх
 Относительный размер текста 
 Размер текста можно задать в HTML или таблицах стилей (CSS) как в относительных, так и в абсолютных единицах измерения. Если веб-разработчики устанавливают размер текста, они должны использовать относительные единицы, чтобы обеспечить гибкость и доступность для посетителей сети. По умолчанию используется масштабируемый текст, поэтому, если вы не задаете размер текста, вы предоставляете относительный текст.
 Родственник
 С относительными единицами, текст  изменяется  с настройками текста браузера. Процент (%) является относительной единицей.
 Абсолют
 При использовании абсолютных единиц текст , а не  изменяется с настройками текста браузера. Распространенными абсолютными единицами измерения текста являются точка (pt) и пиксель (px).
 На странице «Различные размеры шрифта» перечислены размеры текста в нескольких относительных и абсолютных единицах. Вы можете использовать эту страницу, чтобы увидеть, как разные браузеры обрабатывают различные единицы размера текста. Эта страница также может помочь вам преобразовать одни единицы измерения в другие.
 Обратите внимание, что хотя  em  является законной относительной единицей, размер текста в  em  может быть проблематичным в IE. Когда сайт Optavia использовал  em  s, несколько человек сказали, что текст был крошечным. Оказалось, что они установили шрифты на самый маленький размер, не осознавая этого. (Кроме того, очевидно, что IE3 обрабатывает em как пиксели, поэтому 2em отображается как 2px.) Мы изменили размер шрифта на проценты, и никаких проблем не было.
 WCAG по тексту относительного размера 
  3.4 Используйте относительные, а не абсолютные единицы измерения в значениях атрибутов языка разметки и значений свойств таблиц стилей. [Приоритет 2]  Например, в CSS используйте «em» или длину в процентах, а не «pt» или «cm», которые являются абсолютными единицами…
  Руководство по доступности веб-контента 1.0 (http://www.w3.org/TR/WCAG/) 
  Относительные единицы и размеры изображений.  
 Добавлено: 23 ноября 1999 г. 
 Тип: Малый 
 Относится к: КПП 3.4 от 5 мая 19 г.99 версия Описание (и исправление). В примечании к Контрольной точке 3.3 следует сказать что-то о влиянии пропорционального размера на растровые изображения следующим образом: «Используйте относительные, а не абсолютные единицы измерения в значениях атрибутов языка разметки и значений свойств таблиц стилей. [Приоритет 2] Например, в CSS используйте ‘ em» или длины в процентах, а не «pt» или «cm», которые являются абсолютными единицами. Если используются абсолютные единицы, убедитесь, что визуализированный контент можно использовать (см. раздел о проверке). Например, не пропорционально масштабируйте растр изображений.»
  Ошибки в Руководстве по доступности веб-контента (http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA) 
 Верх
 Представление текстовой информации (сделать текст текстом, а не изображением) 
 Вы должны сделать информацию, которая составляет ее суть, текстовой, текстовой, а не изображениями. Дизайнеры, желающие контролировать визуальный дизайн веб-страницы, часто помещают текстовую информацию в изображение. Однако изображения не масштабируются большинством браузеров.
 Помимо масштабируемости, есть несколько других причин для предоставления текстовой информации в виде текста, а не изображений:
 Текст в изображениях теряется, когда изображения отключены или доступ к странице осуществляется невизуально (хотя хороший ALT-текст может решить эту проблему).
 Поисковые системы и другие агенты не могут получить доступ к тексту на изображениях.
 Таблицы стилей нельзя использовать для изменения текста в изображениях. Когда текст находится в изображениях, вы теряете преимущества таблиц стилей для внесения глобальных изменений в такие элементы.
 Представление текстовой информации в виде текста, а не изображений, ускоряет время загрузки, что приносит пользу всем посетителям веб-сайта.
 Размер текста на изображениях не изменяется. Посетители все чаще и чаще меняют размер шрифта в настройках своего браузера.
 Таблицы стилей обеспечивают гибкость в представлении текста по-разному, что позволяет вам влиять на эстетическое представление, не прибегая к изображениям.
 Еще два пункта:
 Одним явным исключением из предоставления текста в виде текста являются логотипы.
 Масштабируемая векторная графика (SVG) — это захватывающая разработка для предоставления графики с улучшенными функциями доступности. (См. http://www.w3.org/Graphics/SVG/Overview.htm8.)
 WCAG текст как текст 
  3. 1 При наличии соответствующего языка разметки для передачи информации используйте разметку, а не изображения. [Приоритет 2]  Например, используйте MathML для разметки математических уравнений и таблицы стилей для форматирования текста и управления макетом. Кроме того, избегайте использования изображений для представления текста — вместо этого используйте текст и таблицы стилей…
  Руководство по доступности веб-контента 1.0 (http://www.w3.org/TR/WCAG/) 
  Текст на изображениях — уточнение КПП 3.1.  Добавлено: 3 января 2001 г. 
 Тип: Осветление 
 Относится к: Checkpoint 3.1 в версии от 5 мая 1999 г.
 Описание (и исправления). Контрольный пункт 3.1 следует изменить следующим образом: «Если соответствующий язык разметки существует и поддерживается, для передачи информации используйте разметку, а не растровые изображения. [Приоритет 2]
 Например, если поддерживается, используйте SVG для создания графики, MathML для разметки математических уравнений и CSS для текстовых специальных эффектов. По возможности избегайте использования растровых изображений для представления текста — используйте текст и таблицы стилей. Растровые форматы, такие как .gif и .jpeg, отображают текст в виде набора пикселей. При увеличении текст искажается. Возможность увеличения текста имеет решающее значение для пользователей с плохим зрением.
 Вы можете использовать текст на изображениях, когда:
 текст не передает своего буквального значения, но имеет более графическую функцию, такую как логотип и
 эффект не может быть достигнут с помощью CSS и
 вы указали текстовый эквивалент изображения.
  Опечатки в Руководстве по доступности веб-контента (http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA) 
 Top
 Подробнее о масштабируемом тексте 
 Почему бы не полагаться на вспомогательные технологии 
 Некоторые люди со слабым зрением используют программы для увеличения экрана (например, перечисленные на http://www.