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

Как красиво оформить текст на сайте?

Правильный пример, как оформить текст для размещения на сайте.

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

Разбиение текста на блоки с помощью подзаголовков

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

Для разбиения текста на основные блоки (параграфы) используется "Заголовок 2" (тег h2). Если внутри подобного блока необходимо выделить какие-то подтемы, то они разбиваются подзаголовками на уровень ниже (Заголовок 3 или тег h3).

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

Логика: содержание и объём понятий

Разделение на блоки подчиняется логике содержания и объёма понятий

Как пометить заголовок текстового блока тегом h2-h6?

Кстати, сказать, данный блок текста у нас является примеров использования Заголовка 3. Он относится к блоку  "Разбиение текста на блоки", но раскрывает отдельно взятый аспект: где ткнуть мышкой, чтобы это сработало?

В разных админках сайтов добавление тегов h2-h6 может происходить по-разному. Но принцип всегда остается тем же: нужно искать надписи вроде:

  • Формат
  • Форматирование
  • Форматирование загловков
  • Форматирование абзацев
  • Абзац

 

Как добавить Заголовок 2 в текст на сайте

Выделение подзаголовка через опцию "формат" в текстовом редакторе TinyMCE Advanced

Выделение подзаголовка h2-h6 в TinyMCE Advanced через

Выделение подзаголовка через опцию "Абзац" в текстовом редакторе TinyMCE Advanced

Выделение подзаголовка h2-h6 в CKEditor

Добавление подзаголовка h2-h6 через опцию "Форматирование" в текстовом редакторе CKEditor

Добавление Заголовока в Word

Добавление заголовка h2 в Word

 

Разбиение текста на блоки положительно влияет на поведенческие факторы

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

Да, посетители прочтут только те части, которые их заинтересуют. Но если выдать сплошное покрывало текста, то они сразу же закроют страницу.

Это, кстати, уже второй блок с заголовком ком уровня h3, который относиться к родительскому заголовку уровню h2 "Разбиение текста на блоки...".

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

Выделение текста

Для привлечения внимание к ключевым аспектам абзаца можно форматировать текст жирным начертанием (CTRL + B) или курсивом (CTRL + I). Главное, не выделять жирным целое предложение. Лучше ограничиться словом или словосочетанием.

Категорически запрещено для акцентирования текста использовать другой шрифт или размер шрифта, или ПОПЫТКА ПРОПИСАТЬ ЦЕЛУЮ ФРАЗУ ЗАГЛАВНЫМИ БУКВАМИ (ЧТО ЗНАЧИТЕЛЬНО УХУДШАЕТ ЧИТАЕМОСТЬ ТЕКСТА), это создаст впечатления разнобоя и будет выглядеть очень непрофессионально.

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

Использование списков

Используйте списки, потому что:

  • Это выделяется на фоне остального текста
  • Это позволяет коротко сообщить суть без необходимости чтения всего текста
  • Они специально созданы в html-разметке для перечисления чего либо (содержание, преимущества, список ингредиентов, перечень наименований, признаков)
  • Размещение ключевых слов в списке оценивается поисковиками

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

Абзацы

Высота абзацев должна быть не более 6 строк. Иначе текст будет сложно читать и вашу статью очень быстро закроют. Это будет плохо сказываться на поведенческих факторах сайта.

Абзац в одну строку выделяется  на фоне остальных!

К примеру, при общем взгляде на данную часть страницы, предыдущий абзац привлекает внимание больше всего (глаз словно цепляется за него). Чтобы данная ритмика текста действительно работала, необходимо чередовать абзацы разной длины: 1 строка, затем 3, после чего 6, и вслед за ним сразу же короткий в 2 или 3. И тд.

Перелинковка

Гиперссылки — это отличительная характеристика текста в интернете. Иногда для раскрытия темы или для обеспечения читателя наиболее полной информацией лучше дать ссылку на другую страницу, чем пытаться написать 1 всеобъемлющий текст.

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