HTML-теги для форматирования текста на странице
Зачем нужно форматирование текста
Форматированием текста называют оформление его внешнего вида на ресурсе благодаря специальным HTML-тегам.
Серый набор слов и предложений, который не имеет распределения на абзацы, не имеет списки, не имеет выделенные заголовки различных уровней — вряд ли привлечет людей к ознакомлению. Плюс ко всему и поисковые роботы при ранжировании ресурсов учитывают как релевантность текста, так и структурное форматирование.
Таким образом, оформление контента с помощью HTML-тегов имеет влияние на:
- Поведенческие факторы посетителей.
- Долю конверсии.
- Позицию ресурса в выдаче.
В связи с этим, рекомендуем при разработке текстового материала делать акцент не только на его содержании, но и не забывать о форматировании. Для этого разберем основные HTML-теги.
Самые необходимые HTML-теги для оформления текста
Любой HTML-тег имеет некое смысловое наполнение. Зачастую, они составляются из трёх частей:
- Открывающийся тег — <название>.
- Внутренность тега — текстовый материал или другие теги.
- Закрывающийся тег — </название>
Но также есть и одинарные теги, которые не имеют в своем наличии закрывающегося тега.
HTML-теги вносятся в код страницы либо вручную, либо с помощью разного рода HTML-редакторов.
1. Заголовки
Благодаря заголовкам есть возможность не только создать привлекательный и удобный для просмотра контент, но также выделить основные мысли и с большей эффективностью использовать ключевые запросы.
Заголовки делятся на уровни. Как правило, выделяют 6 уровней заголовков. Их значение описывается тегами <h1> (1-ый уровень) и <h2>, <h3>…<h6> (подзаголовки нижних уровней, от второго до шестого). Номер уровня определяет «старшинство» заголовка. С помощью этого значения также задается и размер шрифт с отступом.
2. Разметка контента
Здесь используются разные теги для разных нужд. Например, тег <b> помогает только визуально выделить фразу и направлен исключительно на привлечение внимания пользователя.
Тег <strong>, в отличие от предыдущего, не только делает текст жирным, но и подчеркивает для поисковых роботов важность текста.
Аналогично, предыдущим существуют теги <i> и тег <em>.
Первый из них просто выделяет слово или фразу курсивом, а второй соответственно показывает важность той или иной фразы.
Тег <small> используется тогда, когда необходимо сделать размер шрифта меньшим по сравнению с основным.
Теги <sub> и <sup> применяются для перевода текста в нижний и верхний индекс соответственно. Продемонстрируем как это выглядит.
Тег <u> позволяет выделить ту или иную часть текста подчеркиванием.
3. Абзацы и переносы
С помощью тега <p> можно разбить сплошной текст на абзацы. Во внутреннюю часть тега помещается целый абзац. Это отделение характеризуется не только переносом строки, но также и добавлением соответствующих междустрочных интервалов как вверху, так и внизу абзаца.
Тег, который Вы видите внизу картинки, <br>, используют для переноса конкретного текста на новую строчку.
4. Ссылки
Благодаря тегу <a href =””> … </a> есть возможность превратить слово или изображению в кликабельную ссылку.
5. Списки
Также немаловажный момент на этапе оформления текста. Данный инструмент осуществляется группой тегов.
Тег <ul> … </ul> и <ol>… </ol> задают маркированный и нумерованный список соответственно, а тег <li> … </li> осуществляет заполнение списка его элементами.
6. Изображения
Тег <img> является одинарным, и служит для добавления фотографии или изображения на сайт.
Выводы
Сегодня мы обсудили только малую часть тегов, с помощью которых можно сделать Ваш текст более привлекательным и удобным к прочтению. Но даже используя только вышеперечисленные теги Вам удастся изменить свой материал до неузнаваемости. Поэтому мы рекомендуем использовать данные инструменты для разметки текста, что позволит заинтересовать большое количество посетителей.
