Нумерованные и маркированные списки: как сделать в html, css, как применить в копирайтинге

нумерованные и маркированные списки в блоггинге Приветствую начинающих блогеров. В это статье покажу способы создания маркированных нумерованных и многоуровневых списков.

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

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

На одностраничных сайтах нумерованные, маркированные списки создаются средствами html.

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

Их используют, чтобы оформить различного рода перечни и перечисления.

Нумерованный список — это линейный перечень. Его элементы сопровождаются арабскими числами или буквенными маркерами, которые расположены в порядке возрастания числового или буквенного значения. Используются прописные или строчные буквы.

Нумерованный список в html выглядит так:

Три сферы использования пропиток для бетона:
<ol>
 	<li> промышленное строительство</li>
 	<li> дорожное строительство</li>
 	<li> гражданское строительство</li>
</ol>

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

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.
Если какой-то пункт удалить, оставшиеся номера будут пересчитаны автоматически.

Html список нумерованный многоуровневый

В создании многоуровневого списка используют элементы с разными отступами. многоуровневый нумерованный список

Пример разметки:

<ol>
 <li>овощи
  <ol>
 <li>капуста</li>
 <li>морковка</li>
 <li>лук</li>
  </ol>
 </li>
 <li>фрукты</li>
 <li>хлеб</li>
</ol>

Список второго уровня поместили внутрь тега <li>, только потом его закрыли.

Теги для маркированного списка

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

Пункты маркированного списка создаются тегами <li>.

<ul>
 	<li> сферы применения товара;</li>
 	<li> проблемы, решаемые с помощью данного продукта;</li>
 	<li> характеристики товара;</li>
 	<li> отзывы клиентов.</li>
</ul>

список называется маркированным Браузеры формируют блоки списков автоматически, с такими атрибутами

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.
В маркированном списке html можно использовать галочки вместо маркеров точек. 
В таблицу css поместите этот код
ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}.

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

Может ли многоуровневый список включать как нумерованные так и маркированные списки? Ответ: да. Вот пример разметки

<ol>
 <li>овощи
 <ol>
 <li>картошка</li>
 <li>морковка</li>
 <li>капуста</li>
 </ol>
 </li>
 <li>фрукты</li>
 <li>напитки</li>
</ol>
Надо добавить в стили код
ol ol{
 list-style-type: lower-alpha;
}

Свойство list-style-type: lower-alpha заменит нумераторы цифр внутреннего списка на строчные латинские буквы. Селектор ol ol выберет все списки, которые имеют уже второй уровень вложенности. Может ли многоуровневый список включать как нумерованные так и маркированные списки

Советы копирайтерам по составлению списков

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

Что они могут объединять в списки? ОДНОТИПНЫЕ ХАРАКТЕРИСТИКИ:

  • области применения товара или услуги;
  • проблемы, которые решает этот продукт;
  • выгоды, преимущества, получаемые клиентом в случае покупки товара;
  • характеристики товара;
  • факты о товаре;
  • отзывы клиентов.

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

Вот пример списка на одностраничном сайте, его даже можно считать УТП. Его появление на первом экране полностью оправданно.

маркированный список утп

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

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

При оформлении списка делайте отступы, чтобы пункты были визуально разделены. Маркированные списки используйте, только если порядок пунктов и их количество имеет значение. нумерованный список

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

Пример — 6 лучших курортов для бюджетного отдыха, 5 простых продуктов для быстрого похудения.

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

В иных случаях пользователь сразу не вникнет в суть, ему придется перечитывать, а это нервирует.

Чтобы не повторяться, не нарушить принципы Seo и не попасть под фильтр Баден-Баден (переспам), используйте синонимы ключевых слов либо хотя бы вставляйте стандартные названия не по порядку.

Вот плохой пример, над этим тестом надо серьезно поработать. переспам в маркированном списке

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

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

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

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

Как текст преобразовать в список

В отличие от html страниц на блогах WordPress все значительно проще. Достаточно выделить текст, нажать в меню кнопку и создать нумерованный или маркированный список. нумерованный список html

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

Заключение

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

Понравилась статья? Поделиться с друзьями:
Я новичок
Комментариев: 1
  1. Павел

    Согласен, использование списков в статье нужно. Они структурируют материал и облегчают его восприятие. Но в использовании списков, как и во всём. нужна мера. Попадаются тексты, чуть ли не целиком состоящие из бесконечного списка. Вот это уже совершенно излишне.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: