Правила форматирования текста в HTML — какие теги следует использовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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