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

  • HTML-код должен быть валидным.
    Что такое валидность? Соответствие стандарту W3C — The World Wide Web Consortium, которое обеспечивает корректное отображение сайта у каждого пользователя во всех браузерах на любых стационарных и мобильных устройствах.
  • Сайт должен быть мобилопригодным.
    Качество отображения и удобство использования сайта на мобильных устройствах ставим на первое место. Быстро проверить, оптимизирована ли страница для мобильных устройств можно с помощью сервиса от Google, а также инструмента встроенного в Яндекс Вебмастер.
  • Сокращаем количество кода.
    Выносим в отдельные файлы CSS стили, скрипты, коды форм обратной связи. Не стоит создавать излишнее количество классов и идентификаторов.
  • Парные теги необходимо закрывать.
    Это простое правило является одним из залогов успеха на всех этапах работы с сайтом.
  • Нельзя «мусорить» в коде.
    К «мусору» мы относим лишние стили в коде, неуместно употребленные теги, неуместно употребленные скрипты, нарушение порядка расположения блочных и строчных тегов, большие закомментированные куски кода и т.д.

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

  1. Заголовки
  2. Текст
  3. Визуальное оформление текста
  4. Таблицы
  5. Изображения

Теги заголовков <h1...h6>

<h1...h6>— эти парные теги предназначены исключительно для заголовков. Других элементов внутри них быть не должно. Нельзя их использовать для визуального оформления текста, служебных элементов типа форм обратной связи, ссылок и т.д. Чтобы задать стиль тегам <h1...h6> допускается только применение классов или id.

Теги заголовков с с первого по шестой уровень

<h1></h1>

Заголовок верхнего уровня. На странице допускается только один. Для каждой страницы содержимое данного тега должно быть уникальным и отражать суть документа.

<h2></h2>

Заголовок второго уровня. Разбивает текст на крупные смысловые блоки. Ограничений по количеству на странице нет.

<h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

Подзаголовки третьего, четвертого, пятого и шестого уровней. Важно соблюдать порядок и логику в применении данных тегов к заголовкам. Пример: после <h1> не может сразу идти <h5>, а следом за ним <h3>.

Теги форматирования текста

Самым часто используемым видом контента является текст. Он в свою очередь делится на абзацы и списки.

<p></p>

Основной тег в HTML для работы с текстом — делит его на абзацы. Часто встречающейся ошибкой является замена <p></p> другими тегами, например <div></div>, <span></span> или разновидностями тега h.

<br>

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

Списки

<ul></ul> — создает маркированный список. Маркером по умолчанию является закрашенный круг, но можно задать любую другую метку, в т.ч. в виде изображения.

<ol></ol> — для нумерованного списка. По умолчанию нумерация начинается с единицы, но можно задать начало списка с любой другой цифры.

<li></li> — находится внутри <ul></ul> или <ol></ol> создает каждый новый элемент списка. Тегов <li></li> может быть неограниченное количество.

Результат применения тегов <ul></ul> и <li></li> 

<span></span>

Этот тег используется для форматирования отдельных отрывков текста внутри <p></p>, <li></li> и других. Например, выделения другим цветом или шрифтом.

Какие теги визуального оформления текста использовать

<b> или <strong>?

<b></b> делает шрифт текста жирным, но не несет под этим никакой смысловой нагрузки.

<strong></strong> — тег семантического форматирования, который не просто визуально выделяет текст жирным шрифтом, но и указывает, что внутри него находится информация, на которую следует обратить особое внимание.

Этот тег участвует в голосовой озвучке страницы — влияет на интонацию.

<i> или <em>?

<i></i> выделяет текст курсивом, но не меняет смысловые акценты.

<em></em> — тег семантического форматирования, предназначенный не только для изменения шрифта на курсивный, но и для наделения текста внутри него более эмоционально экспрессивным окрасом. Как и <strong> влияет на интонацию при голосовой озвучке страницы.

<sub></sub>

Уменьшает текст в размере и сдвигает его ниже стандартного уровня строки. Применяется для указания нижних индексов, например в формулах или химических элементах — H2O.

<sup></sup>

Также уменьшает текст в размере, но сдвигает его выше уровня строки. Чаще всего используется для указания степеней или единиц измерения — м2.

Таблицы

Создается таблица с помощью парного тега <table></table>.

Тег <tbody></tbody> обозначает тело таблицы и является необязательным, но рекомендуемым. Редко, но всё же иногда с ним в паре используются теги <thead></thead> и <tfoot></tfoot> обозначающие начальную и завершающую части таблицы.

Тег <tr></tr> отвечает за строки таблицы, а <td></td> — за столбцы. Они располагаются внутри <tr></tr> — сколько <td></td>, столько и ячеек в строке.

Для обозначения заголовков столбцов существует тег <th></th>. Он не является обязательным, но используется для удобства.

Верстка стандартной таблицы

Изображения

Чтобы страница была более информативной и привлекательной как для пользователей, так и для поисковиков, текстовый контент разбавляется фотографиями, графиками, инфографикой и другого рода изображениями. <img> является непарным тегом, при помощи которого можно добавить изображение.

У данного тега есть обязательный атрибут src, значением которого является путь к месту расположения картинки.

И необязательный, но не менее важный атрибут alt, который отвечает за альтернативный текст, который пользователь увидит вместо изображения при возникновении проблемы с его загрузкой, а также в виде подсказки при наведении курсора мыши на картинку. Подробнее про это атрибут и другие правила размещения изображений на сайте читайте в нашей статье.

Неочевидные правила хорошего тона при размещении текстов

  1. вместо кавычек-лапок «_» следует использовать кавычки-елочки «_»;
  2. союзы и предлоги не должны «висеть» в конце строки, т.е. быть оторванными от слов, к которым они относятся, переходом на следующую строку. Чтобы этого не происходило после них необходимо проставлять неразрывные пробелы , которые «сцепят» их со следующих словом в предложении.
  3. не следует использовать вместо тире — знаки минуса или дефис. У каждого из этих знаков есть своя собственная область применения, подробнее об этом здесь.
Не следует оставлять предлоги и союзы в конце строки

5 сервисов для быстрой html-разметки текста

Визуальный редактор

Это текстовый редактор в административной панели сайта, по виду напоминающий обычный текстовый редактор, например Microsoft Word.

Необходимым его использование будет в том случае, когда размещением контента на сайте занимается человек совершенно не знакомый с HTML.

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

Типограф Артемия Лебедева

Онлайн сервис «Типограф» созданный студией Лебедева решает такие задачи, как разметка абзаца текста тегами <p></p>, замена кавычек-лапок «_» на кавычки-елочки «_», расстановка неразрывных пробелов после союзов и предлогов, замена знаков минус и дефиса — на тире —. Также он умеет удалять из текста символы табуляции, убирать пробелы перед знаками препинания и добавлять после.

Автоверстальщик

text-html.ru — сервис, который в режиме онлайн быстро оборачивает параграфы в теги <p></p>, в 2 клика размечает списки нумерованные и маркированные списки, а также заголовки с 1-го по 3-ий уровень.

Типограф от Евгения Лепешкина

typograf.ru — подобен «Типографу» Лебедева и решает те же задачи. Отличает его упрощенный интерфейс, наличие рекламы и отсутствие каких-либо настроек. Слова, которые пишутся через дефис, обрамляет тегом , уведомляющим браузер, что текст внутри него следует отображать без переноса. Умеет определять акронимы и выделяет их соответствующим тегом <acronym></acronym>.

Типограф на GitHub

https://typograf.github.io/ — редактор, расположенный на веб-сервисе хранения и разработки IT-проектов GitHub.

Для форматирования текста он решает всего одну задачу — разметка абзацев тегами <p></p>. Кавычки и тире он меняет на верный вариант, но не заменяет на символьный код, как в Типографах Лебедева и Лепешкина. Есть настройки по исправлению ошибок пунктуации, повторов слов и символов, употреблению тире и дефиса.

Наш чек-лист по размещению текста на сайте

  1. В текстовом редакторе, например Microsoft Word или Google Документы, отделяем абзацы статьи при помощи переноса строки клавишей Enter;
  2. Копируем текст в один из типографов для приведения к правильному виду тире, кавычек, расстановки неразрывных пробелов и разметки параграфов. Мы пользуемся сервисом от Лебедева;
  3. Копируем результат пункта 2 в Автоверстальщик и размечаем в нем заголовки и списки;
  4. Копируем результат пункта 3 в HTML-редактор административной панели сайта, на котором размещается текст, и при необходимости дорабатываем его вручную;
  5. Публикуем и проверяем, что получилось;
  6. После размещения и проверки отправляем страницу с новым текстом на обход в Яндекс Вебмастере в разделе Переобход страниц и в Google Search Console в строке проверки URL.
Переобход страниц в Яндекс Вебмастере
Проверка URL в Google Search Console

И помните, чистый код, валидная верстка, уникальный контент, грамотный текст и его размещение в соответствии с правилами хорошего тона, дают +100 к карме вашего сайта 😉.