Использование маркированных списков помогает людям проще переварить все то, что вы им говорите. Но как они задаются на веб-странице?
Что такое маркированный список (или ненумерованный список)
Маркированный список это первый вид списка, который мы рассмотрим.
Как создать маркированный список — ul что это за тег?
Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов . Ниже приводится простой его пример:
Сначала весь список берется в теги . При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.
Атрибут type
Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя нумерованный список CSS позволяет задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов ( в том числе и создавая нумерованный список HTML ):
Как создать статью вк. Лонгрид вконтакте
Элементы списка — тег
-
, но каждый
также поддерживает собственный атрибут type , и таким образом можно создать следующий список:
Отступ маркированного списка
Перед тем, как к списку будет применен любой стиль CSS , HTML ( а точнее браузер ) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом
.
Как создать нумерованный список — тег ol
-
поможет в этом. По умолчанию он задает нумерованный список HTML :
что на выходе дает нам:
A. Элемент 1
B. Элемент 2
C. Элемент 3
Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Как сделать нумерованный список в HTML с определенного номера
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 ( или буквы А ). Это бы внесло неразбериху в ваше руководство!
К счастью, в HTML есть свойство start , которое позволяет начать нумерацию с указанного номера:
Что дает нам следующее:
4. Шаг четыре
5. Шаг пять
6. Шаг шесть
Нумерованный список HTML — обратный порядок
Если вы хотите вывести номера ( или буквы ) в обратном порядке, то это можно сделать, добавив в тег, создающий нумерованный список HTML ключевое слово reversed :
В результате список будет выглядеть следующим образом:
5. Пятый пункт.
4. Четвертый пункт.
Как написать статью в ВК
3. Третий пункт.
2. Второй пункт.
1. Первый пункт.
Многоуровневый маркированный список HTML
С помощью установленных в браузерах патчей поддержки ( и иногда с помощью отмены CSS для некоторых сайтов ) можно создать маркированный многоуровневый список HTML. Это достигается за счет встраивания одного списка в другой:
- Элемент верхнего уровня
- Подчиненный элемент 1
- Подчиненный элемент 2
• Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
• Элемент верхнего уровня
-
и
. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
1. Элемент верхнего уровня
o Подчиненный элемент 1
o Подчиненный элемент 2
2. Элемент верхнего уровня
Используйте нумерованные списки HTML на своих страницах.
Нумерованные и маркированные списки в HTML- заключение
Это всего лишь краткое введение по использованию списков в веб-дизайне, но с этого вы можете начать. Если у вас есть какие-либо вопросы, пожалуйста, задайте их в комментариях!
Источник: www.internet-technologies.ru
Как сделать нумерованный список в статье вконтакте
Вне зависимости от стиля текста цитаты делают текст насыщенным, живым. Каждый копирайтер должен знать, когда уместно использовать цитаты, а также уметь грамотно.
Перечни уместны не всегда. Например, в аналитических новостных статьях они почти не используются, однако для информационных, продающих текстов буллиты полезны, так как благодаря им статья становится цепляющей и читабельной.
Маркированные списки
- подзаголовки;
- абзацы;
- выделения жирным и курсивом: они позволяют обозначить в статье важные мысли и привлечь внимание читателя.
Пояснение в конце перечня стоит вынести в отдельное предложение.
Минимальное количество элементов в маркированном списке — три. Если перечень слишком короткий, лучше трансформировать его в небольшое предложение.
Нумерованные списки
Это упорядоченные перечисления, представленные в конкретной последовательности. В качестве буллитов используются числа, реже — буквы (обычно встречаются в тестах).
Часто нумерованные перечисления используются в пошаговых инструкциях и руководствах, в рецептах. Без них не обойтись в топах и рейтингах. Но есть ситуации, когда подходят только маркированные списки.
Пример того, как делать не стоит:
- Позвонить по телефону.
- Написать в мессенджере или в сообщения группы в соцсети.
- Прийти в офис компании лично.
Пример правильного использования нумерованного перечисления:
Если в пунктах есть 2 и более предложения, то первое рекомендуется выделять жирным или курсивом. Тогда вторые и последующие предложения будут поясняющими. Так читателю легче воспринимать материал. В то же время слишком длинные пункты тоже использовать нельзя — в большинстве случаев двух предложений более чем достаточно.
В указанном выше примере последовательность действий имеет значение, поэтому используется нумерованный перечень.
Минимальное количество пунктов — два.
Как правильно оформлять списки
1. Если каждый пункт — отдельное предложение, то он начинается с заглавной буквы, а в его конце должна стоять точка.
2. Если каждый пункт — продолжение незавершенного предложения, то необходимо начинать его со строчной буквы, а в его конце должна стоять точка с запятой (или запятая, если пункты состоят из 1–2 слов).
3. Если в начале пункта использована цифра/строчная буква со скобкой, то текст начинается со строчной буквы.
4. Если в начале пункта использована цифра/прописная буква с точкой, то текст начинается с прописной буквы.
Пункты должны быть согласованными. Например:
- из аттестата о среднем образовании;
- вкладыша к аттестату;
- паспорта абитуриента.
Внимание! Повтора слов в начале словосочетаний или предложений стоит избегать. В примере выше предлог «из» встречается только в первом пункте — повторно его использовать уже нет необходимости.
Уровни списка
Перечисления могут быть одноуровневыми или многоуровневыми (с вложениями). Количество уровней вложений — до 3. Пункты первого уровня могут начинаться с «1.», второго — с «1.1», третьего — с «•».
Многоуровневые перечни хороши для серьезных длинных гайдов, подробных инструкций. В обычных статьях злоупотреблять ими не стоит, так как они перегружают тексты. Лучше разбить один крупный перечень на несколько маленьких.
Особенности перечней в продающих текстах
Многоуровневые или длинные, подробные нумерованные перечисления для продающих текстов подходят редко. Обычно используются маркированные перечисления.
- быть краткими и емкими;
- иметь одинаковую длину (до 3–4 слов);
- описывать выгоду для клиента.
Желательно выстроить все элементы в порядке убывания важности. Однако самый сильный и убедительный аргумент должен стоять в конце списка. Не рекомендуется перечислять технические характеристики товара, которые малопонятны среднему пользователю.
Также есть примеры успешного использования и подробных, развернутых пунктов. Такой подход уместен при описании «болей» клиента.
По-настоящему эффективный продающий текст должен содержать, кроме рационального посыла, еще и эмоциональный, попросту говоря — взывать к боли клиента. Давайте р.
На лендингах эффектно выглядят буллиты со специальными графическими значками или картинками. Они позволяют пользователям быстро найти актуальную для себя информацию.
Красиво выглядят интерактивно оформленные перечисления. Например, когда при нажатии на элемент появляются преимущества, описание, пояснение, которые скрываются при нажатии на другой элемент. Это привлекает внимание читателей и визуально разгружает страницу.
Главное — упорядоченность элементов: если блоки перечислений «разбросаны» по экрану в случайном порядке, то многие пользователи даже не будут с ними знакомиться.
Частые ошибки копирайтеров
- строчная буква после точки;
- заглавная буква после точки с запятой;
- несогласование элементов списка по падежам;
- разнородные члены предложения в перечислениях;
- «вода», малосодержательные пункты.
Другая ошибка — отсутствие предложения/словосочетания с двоеточием перед самим списком. Так, если перечисления начинаются без такого введения сразу после подзаголовка или предыдущего абзаца текста — это неправильно.
Не стоит заканчивать текст перечислением, иначе это создает у читателя ощущение недосказанности. Исключение — перечень в конце статьи, кратко подытоживающий все вышесказанное.
Что касается размещения перечислений рядом с подзаголовками или близко друг к другу, то в этом случае мнения разнятся. Такое расположение буллитов допустимо, но нежелательно.
Итак, списки — эффективный способ структурировать данные, выделить главное, убедить читателя, показать преимущества. Благодаря им раскрывается взаимосвязь элементов, а информация оформляется в лаконичной форме. Есть много разных способов их оформления, но для продающих текстов оптимальный вариант — простые маркированные перечни с красивым визуальным оформлением (например, с графическими значками перед каждым пунктом).
Также стоит помнить о стандартных правилах составления списков, которые касаются выбора нумерации или маркировки, строчной/заглавной буквы, знаков препинания.
Регистрируйтесь на Бирже eTXT, выполняйте заказы, пишите статьи на продажу. Следуйте советам, приведенным в статье, составляйте списки грамотно. Заказчики обязательно оценят ваш труд и профессионализм.
Источник: www.etxt.ru
Многоуровневый список в HTML: как создать и настроить?
От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!
Базовая теория
Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный. Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке. Соответственно, такой список подошел бы для планирования дня или записи рецепта.
В маркированном пункты просто стоят друг за другом, но при этом если их поменять местами, то ничего не поменяется, так как пункты не привязаны к какой-то строгой нумерации.
Это просто теория, о которой нужно знать, но на практике не случится ничего страшного, если вы будете использовать списки по-разному в разных ситуациях. Я особо не заморачиваюсь по поводу того, какой тип выбрать.
Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.
Многоуровневый список: как его делать?
Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.
< li >Написать статью < / li >
< li >Почитать книгу 1 час < / li >
< li >Сходить в кино < / li >
Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.
Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.
В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных.
То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.
Кстати, вот так это выглядит:
Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.
Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:
Источник: webformyself.com