Что такое маркированные списки

Списки — Основы вёрстки контента

Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

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

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

В своём представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.

Маркированные списки

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

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

Нумерованные списки

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

Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.

Списки определений

С точки зрения HTML списки определения являются самыми сложными для вёрстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:

Стилизация списков

Изменять маркер можно одним из двух способов:

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

Картинка в качестве маркера списка

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

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Источник

Как и для чего используются маркированные и нумерованные списки

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

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

Чем отличаются маркированные списки от нумерованных

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

Автор вправе сам решать, к какому варианту прибегнуть в том или ином случае.

Маркированные списки уместны:

Маркированные списки применяют там, где идёт простое перечисление и не важен порядок расположения элементов. К примеру, фразу: «Школа закупила спортивный инвентарь — скакалки, волейбольные мячи, гантели», будет лучше оформить в виде маркированного списка.

Например, так:

В каких случаях нумерованный список предпочтительнее маркированного? Нумерованные уместны там, где важен порядок расположения его элементов. Когда составляете описание задание, последовательность действий важна и ее лучше составить логическим перечнем.

Для получения вознаграждения за задание вам необходимо:

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

Почему списки лучше, чем просто написание с новой строки

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

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

Многоуровневые списки

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

Примеры многоуровневых списков.

В экипировку туриста для пешего похода входит:

2. Принадлежности для костра:

В школе проводятся спортивные состязания:

3) бег.
Б. Спортивные игры:

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

Согласованность элементов списка

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

Пример неправильной согласованности:

На акции «Чистый парк» необходимо будет сделать:

Последние два пункта не согласованы с предыдущими пунктами, а также не согласованы с предложением, предваряющим список.

Пример правильной согласованности:

На акции «Чистый парк» необходимо будет сделать:

Создав список, убедитесь, что все его элементы написаны в одном стиле и отвечают на один и тот же вопрос. В нашем примере это: «Что сделать?». Нередко, причиной несогласованности может стать использование в списке громоздких предложений. Старайтесь избегать сложных конструкций при составлении списков. И каждый раз проверяйте согласованность, задавая один и тот же вопрос каждому элементу.

Знаки препинания в списках

В списках применяются такие же нормы языка, как и в любом тексте.

Какую букву ставить в начале элемента

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

Каким знаком заканчивать фразу, предшествующую перечню

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

Что ставить в конце элемента списка

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

Приглашаем на экскурсию по городу. В программу входят:

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

В сумке туриста должны находиться:

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

Приглашаются на работу:

Последний элемент перечня всегда заканчивается точкой.

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

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

Источник

Буллет: как эффективно использовать списки в текстах на сайте

Буллет или маркер списка — с английского языка переводится как «пуля», а bullet point — «пункт списка». Он структурирует информацию и разбивает сплошной текст на отдельные пункты, которые легче воспринимаются читателем. В этой статье мы разберемся, зачем использовать буллеты, как их оформлять и как правильно добавлять их в текст и на сайт.

Что такое буллет

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

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

Буллет — это довольно новое понятие, например, в русской типографике черный кружок упоминается в книге 1998 года «Справочник издателя и автора» Аркадия Мильчина, а в США первые «пули» появились в 1950 году.

Часто в тексте в качестве буллета можно встретить длинное тире «—», как на примере ниже. А из-за того, что маркер окрашен в красный цвет — список будто показывает отрицательные условия предложения.

Пример списка с длинным тире на сайте «Альфа-Банк»

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

Варианты информации, которую можно оформить в виде списков, то есть добавить буллет:

Здесь показан пример, как используют буллеты в статье про структуру лендинга. Сначала идет подзаголовок раздела, в котором собраны основные итоги материала. А ниже — важные мысли, которые выделены в список при помощи черных точек.

Пример того, как используется точка для списка в тексте

А ниже приведен пример списка на странице сайта — он расположен горизонтально, а буллеты представлены в виде иконок, под каждой из которых указано короткое название и описание функционала.

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

Зачем нужны буллеты в тексте

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

Bullet points помогают:

Рекомендуется к прочтению! Узнайте, как написать и оформить SEO-текст.

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

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

Виды маркеров списка

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

Списки разделяют на два вида:

Маркированные списки

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

Ниже показан пример маркированного списка на сайте: буллеты в виде иконок-устройств, с которыми работает умная колонка с Алисой. Под каждым маркером указана расшифровка.

Пример как использовать буллет — символ в виде предметов и устройств для дома

Нумерованные списки

Такой список представляет собой набор пунктов, имеющих определенную последовательность. Для их оформления используют числа.

Нумерованные списки можно встретить в рецептах, инструкциях, руководствах, документах и правилах.

На скриншоте показан пример нумерованного списка, в котором пошагово описывается процесс приготовления сырников. В оформлении используются числа с точкой: «1.», «2.» и так далее.

Пример нумерованного списка

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

Пример нумерованного списка на сайте

Автоматизация email рассылок

Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.

Как оформить пункты списка

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

Вот несколько правил, как следует оформлять пункты списка:

Уровни списка

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

Списки делят на два уровня:

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

На скриншоте показаны пункты из трех уровней вложенности. Для оформления используются числа и точки: первый уровень — «1.», второй — «1.1», третий — «•».

Пример многоуровневого списка

Какой символ списка использовать: маркер или число

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

Нумерацию лучше использовать в таких случаях:

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

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

Как правильно использовать буллеты

О том, как правильно и эффективно использовать буллеты в списках, рассказывает дизайнер SendPulse — Алексей Примак.

Примеры хорошего использования буллетов

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

Пример хорошего оформления списка с интерактивным переключением

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

Пример разделения списка на два столбца и оформления текста градиентом

Ниже показан пример, как можно использовать цифры в заголовках пунктов. Компания рассказывает пользователям о качестве матраса и его полезных свойствах. Буллеты оформлены в виде иконок в едином стиле — сине-голубых тонах с акцентами желтого цвета: рейтинг, комфорт и правильное положение позвоночника.

Пример, как можно использовать цифры в списках

Еще один пример интерактивного списка: с помощью стрелок с изображениями того, как ноутбук реагирует на повреждения, можно включить полное описание краш-теста.

Пример, как можно использовать интерактивное переключение пунктов списка на сайте

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

Пример списка в блоках на сайте

Здесь показан пример того, как можно оформить сайт в виде нумерованного списка: «50 причин для путешествий». В меню расположено 50 блоков, при выборе любого из них появляется название страны, популярное место для туристов и его краткое описание.

Пример оформления сайта нумерованным списком

Примеры плохого использования буллетов

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

Пример плохого оформления предложений в списке

Ниже — пример того, какую информацию не нужно выносить в список. Этот перечень легко можно трансформировать в одно короткое предложение.

Пример того, когда не нужно выносить информацию в список

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

Пример того, как не нужно сокращать информацию в списке

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

Пример плохого оформления списка на сайте

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

Плохой пример оформления нумерованного списка

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

Пример, как не нужно составлять список — добавлять разрозненные разделы в один блок

Заключение

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

Регистрируйтесь в SendPulse и пользуйтесь инструментами и шаблонами для оформления списков в email рассылках, web push, Viber и SMS оповещениях, а также чат-ботах в мессенджерах Facebook Messenger, ВКонтакте и Telegram!

Источник

Что такое маркированные и многоуровневые списки

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

Задачи

Определение нового формата маркера

Выполните одно из указанных ниже действий.

Изменение маркера на символ

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.

Нажмите кнопку Символ и щелкните нужный символ.

Изменение маркера на рисунок

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.

Щелкните Рисунок и выберите изображение из файла или с помощью поиска изображений Bing.

Нажмите кнопку Вставить.

Просмотрите, как будет выглядеть рисунок в качестве маркера, и нажмите кнопку ОК, чтобы добавить его, либо замените рисунок, повторив шаги 3–5.

Изменение шрифта маркера

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.

Нажмите кнопку Шрифт и измените свойства шрифта, который будет использоваться для маркера. Вы можете выбрать параметры на вкладках Шрифт и Дополнительно:

Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.

Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.

Изменение выравнивания маркера

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Маркированный список и выберите пункт Определить новый маркер.

В группе «Выравнивание» выберите Слева, По центру или Справа.

Определение нового формата номера

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Нумерованный список и выберите пункт Определить новый формат номера.

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

Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:

Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.

Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.

Чтобы добавить к номеру дефис, круглую скобку или другой символ, введите его в поле Формат номера.

Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».

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

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список и выберите пункт Определение нового многоуровневого списка.

Разверните диалоговое окно «Многоуровневый список», щелкнув Дополнительно в левом нижнем углу.

Выберите уровень списка, который нужно изменить, щелкнув его в списке. По умолчанию выбрано значение 1.

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

Чтобы использовать существующий стиль в Word для каждого уровня в списке, выберите стиль в разделе «Связать уровень со стилем».

Выберите номер для отображения в коллекции. По умолчанию отображается Уровень 1.

Присвойте многоуровневому списку имя в разделе «Имя списка поля ListNum». Оно будет отображаться для всех полей ListNum.

Чтобы добавить к нумерованному списку дефис, круглую скобку или другой символ, введите его в поле Формат номера.

Чтобы изменить размер, начертание и цвет шрифта, щелкните Шрифт и задайте параметры на вкладках Шрифт и Дополнительно:

Изменение шрифта, начертания, размера, цвета, стиля и цвета подчеркивания, а также эффектов для маркера.

Настройка межзнаковых интервалов и возможностей OpenType для шрифта маркера.

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

Выберите начальный номер для списка. Значение по умолчанию — 1. Чтобы заново начать нумерацию после определенного уровня, установите флажок Нумеровать заново и выберите уровень в списке.

Выберите Заменить римские цифры арабскими для использования этого стиля в многоуровневом списке.

Чтобы настроить выравнивание номеров, выберите Слева, По центру или Справа в разделе «Выравнивание».

Укажите, откуда нужно начать выравнивание, и задайте отступ.

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

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

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

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

На вкладке Главная в группе Абзац щелкните стрелку рядом с кнопкой Многоуровневый список и выберите пункт Определение нового стиля списка.

Введите имя для нового стиля списка.

Выберите начальный номер для списка. Значение по умолчанию — 1.

Выберите уровень в списке, к которому нужно применить форматирование.

Укажите начертание, размер и цвет шрифта для стиля списка.

Щелкните стрелку вниз, чтобы изменить стиль нумерованного или маркированного списка.

Выберите символ для списка.

Выберите изображение для списка.

Сместите отступ влево или вправо.

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

Чтобы настроить дополнительные параметры форматирования, щелкните Формат и выберите Шрифт, Нумерация, Текстовые эффекты или другие настройки.

Отключение автоматической нумерации списков

Следуйте инструкциям для используемой версии Word

Word 2016, Word 2013 или Word 2010

Выберите Файл, а затем в левой области выберите Параметры.

Нажмите кнопку Microsoft Office и выберите Параметры Word.

В диалоговом окне Параметры Word выберите Правописание.

В правой области в разделе Параметры автозамены нажмите кнопку Параметры автозамены.

Откройте вкладку Автоформат при вводе.

В разделе Применять при вводе снимите флажок стили маркированных списков и нажмите кнопку ОК.

Источник

• ← Что такое маркированные лекарства
• Что такое маркированные товары список →