Не только людей встречают по одёжке. Оценивая внешний вид текста, мы довольно быстро принимаем решение — читать или не читать. И, если дальше проводить аналогию с известным выражением, у текстового контента гораздо меньше шансов зацепить пользователя, если он выглядит скучно, чем у человека, который имеет возможность блеснуть личными качествами. На помощь контенту приходит форматирование.

Содержание:

Курс по написание текстов для новичков

Что такое форматирование текста и почему оно необходимо

Форматирование — это оформление внешнего вида текста на сайте и придание его элементам определённого формата с помощью специальных HTML-тегов. 

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

Получается, форматирование контента с помощью HTML-тегов влияет на:

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

Теги форматирования текста в HTML: оформляем 6 основных элементов контента

Каждый HTML-элемент страницы имеет свою смысловую нагрузку. Большинство из них состоят из 3-х частей:

  • Открывающийся тег — <имя>,
  • Содержимое элемента — текст или другие теги,
  • Закрывающий тег — </имя>.

структура html элемента пример

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

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

1. Заголовки

<h1> … </h1>, <h2> … </h2> и т. д.

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

Заголовки различаются уровнями. Принято выделять до 6 уровней заголовков и подзаголовков. Их значение задаётся тегами H1 (заголовок 1-го уровня) и H2, H3…, H6 (подзаголовки 2-го, 3-го и т. д. уровней). Порядковый номер уровня указывает на «старшинство» заголовка. Это же значение задаёт особенность его оформления — размер шрифта и отступа.

заголовки в html коде страницы пример

2. Разметка текста

<b> … </b>, <strong> … </strong>

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

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

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

strong жирное выделение текста пример

<em> … </em> и <i> … </i>

HTML-теги для написания курсивом. <i> только внешне выделяет фразу, <em> сообщает ботам о том, что фраза имеет особую значимость.

em выделение курсивом пример

<small> … </small>

Применяется, если нужно уменьшить размер шрифта относительно основного. Можно использовать для выделения сторонней информации (например, цитат или для таблиц).

small маленький текст картинка

<sub> … </sub>

Эта своеобразная HTML-команда переводит текст в нижний индекс, то есть уменьшает его размер и располагает на нижнем уровне строки. Используется, например, в формулах.

sub для нижнего индекса текста

<sup> … </sup>

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

sup для верхнего индекса текста

<s> … </s>

Если необходимо зачеркнуть фразу — нередко используемый приём, — поможет именно этот тег.

тег s для зачеркивания текста

<u> … </u>

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

тег u для подчеркивания текста

3. Абзацы и перенос текста

<p> … </p>

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

как оформить в html абзацы

<br>

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

как в html перенести строку

4. Ссылки

<a href> … </a>

Именно этот тег превращает набор букв в кликабельную ссылку, которая при этом отображается в виде выделенного цветом текста.

пример ссылки в коде страницы

5. Списки

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

Группа состоит из тегов:

  • <li> … </li> — определяет отдельные элементы списка, то есть его пункты;
  • <ul> … </ul> — маркированный список;

    теги для маркированных списков
     
  • <ol> … </ol> — нумерованный список.

    теги для нумерованных списков

6. Изображение

<img> 

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

img для вставки изображения

Выводы

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

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

P.S. Если хотите научиться создавать качественный контент, который будет нравится как посетителям сайта, так и поисковым системам, присоединяйтесь к курсу «SEO-копирайтер от А до Я»‎. И с промокодом «Text-11»‎ вас будет ожидать приятный бонус к покупке.