Маркированный список в HTML. Маркированный и нумерованный список

19.07.2019

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

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

отмечается маркером,
нумерованный список —
1. отмечается цифрой,
  список определений — — состоит из пар термин
  —
  определение.
  Каждый список представляет собой контейнер, внутри которого располагаются элементы списка или пары термин-определение. Элементы списка ведут себя как блочные элементы, располагаясь друг под другом и занимая всю ширину блока-контейнера. Каждый элемент списка имеет дополнительный блок, расположенный сбоку, который не участвует в компоновке.
  
  Создание HTML-списков
  
  1. Маркированный список
  
  Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега
  . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
  Браузеры по умолчанию добавляют следующее форматирование блоку списка:
  Каждый элемент списка создаётся с помощью парного тега
2. (от англ. List Item) .
- Microsoft
- Google
- Apple
Рис. 1. Маркированный список
2. Нумерованный список

Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента
. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.
Блок списка также имеет стили браузера по умолчанию:
доступен атрибут value , который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать

, то остальная нумерация будет пересчитана относительно нового значения.

Для тега

Атрибут	Описание, принимаемое значение
reversed	Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start	Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, .
type	Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv).

Microsoft
Google
Apple

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

Списки определений создаются с помощью тега

Блок списка определений имеет следующие стили браузера по умолчанию:

Для тегов

и

доступны .

Режиссер:: Петр Точилин
В ролях:: Андрей Гайдулян; Алексей Гаврилов; Виталий Гогунский; Мария Кожевникова

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

4. Вложенный список

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

Пункт 1.
Пункт 2.
- Подпункт 2.1.
- Подпункт 2.2.
  - Подпункт 2.2.1.
  - Подпункт 2.2.2.
- Подпункт 2.3.
Пункт 3.

Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

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

пункт
пункт
1. пункт
2. пункт
3. пункт
  1. пункт
  2. пункт
  3. пункт
4. пункт
пункт
пункт

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
Рис. 5. Многоуровневый нумерованный список

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

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

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

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

2. В группе “Абзац” , которая расположена во вкладке “Главная” , нажмите кнопку “Маркированный список” .

3. Введите первый пункт нового списка, нажмите “ENTER” .

4. Введите все последующие пункты маркированного списка, нажимая в конце каждого из них “ENTER” (после точки или точки с запятой). Когда закончите вводить последний пункт, дважды нажмите “ENTER” или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания маркированного списка и продолжить обычный набор текста.

Преобразование готового текста в список

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

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

2. Нажмите “ENTER” .

3. Повторите это же действие для всех следующих пунктов.

4. Выделите фрагмент текста, который должен стать списком.

5. На панели быстрого доступа во вкладке “Главная” нажмите кнопку “Маркированный список” (группа “Абзац” ).

Совет: Если после созданного вами маркированного списка еще нет текста, дважды нажмите “ENTER” в конце последнего пункта или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания списка. Продолжите обычный набор текста.

Если вам необходимо создать нумерованный список, а не маркированный, нажмите кнопку “Нумерованный список” , расположенную в группе “Абзац” во вкладке “Главная” .

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

Созданный нумерованный список можно сместить влево или вправо, изменив таким образом его “глубину” (уровень).

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

“Маркированный список” .

3. В выпадающем меню выберите пункт “Изменить уровень списка” .

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

Примечание: С изменением уровня изменится и маркировка в списке. О том, как изменить стиль маркированного списка (вид маркеров, в первую очередь), мы расскажем ниже.

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

Примечание: Красной стрелкой на скриншоте показана начальная позиция табуляции для маркированного списка.

Выделите список, уровень которого нужно изменить, выполните одно из следующих действий:

Примечание: Одно нажатие клавиши (или клавиш) смещает список на одну позицию табуляции. Комбинация “SHIFT+TAB” будет работать только в том случае, если список находится на расстоянии хотя бы в одну позицию табуляции от левого поля страницы.

Создание многоуровневого списка

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

Изменение стиля маркированного списка

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

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

2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список” .

3. Из выпадающего меню выберите подходящий стиль маркера.

4. Маркеры в списке будут изменены.

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

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

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

Много различных методов веб-форматирования улучшают восприятие контента. Вы можете выделить текст жирным шрифтом, использовать отступы и цвета, менять межстрочный интервал, создавать (bulleted lists) — все эти техники хороши для эффективного восприятия контента.

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

Сравните два разных варианта контента. Вы, вероятно, заметите, что информация, представленная во втором варианте, воспринимается легче. Все потому, что предложения представлены вертикальным списком, каждое из них занимает одну строку. Напротив, в варианте 1 читатели вынуждены искать их в менее структурированном параграфе текста.

Вариант 1

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

Вариант 2

В наш пакет SPA-услуг входят:

две ночи проживания;
две 50-минутные SPA-процедуры на ваш выбор;
завтрак в номере на двоих;
подарочная корзина по прибытию.

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

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

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

Неправильно

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

Разница в длине делает список неупорядоченным и неравномерным.

Правильно

Возьмите в лагерь следующие вещи:

спальный мешок;
солнцезащитный крем;
купальный костюм;
дождевик.

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

Нумерованные списки, как правило, используются в тех случаях, когда пункты должны быть перечислены в определенном порядке, например, порядок действий при работе с программой. Либо когда количество пунктов имеет значение, например, в разного рода топах (топ-10 лучших техник и т. д.).

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

Неправильно

1. Контактная форма на сайте
2. Чат
3. Звонок по телефону
4. Личная встреча

Правильно

Пожалуйста, свяжитесь с нами одним из следующих способов:

Контактная форма на сайте
Звонок по телефону
Личная встреча

3. Используйте параллельные конструкции предложений

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

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

Неправильно

животные могут пугаться громких звуков;
желтыми линиями отмечены места, где вы можете стоять;
сохранять парк в чистоте — задача каждого.

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

Правильно

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

выкидывайте мусор только в урны;
не шумите;
не пересекайте желтые линии;
сохраняйте парк чистым.

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

4. Избегайте повтора слов в начале предложений

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

Неправильно

Как выбрать спелый ананас:

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

Правильно

Как выбрать спелый ананас:

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

5. Фраза или предложение, предваряющее маркированный список, должны быть понятными и раскрывающими его содержание

Вводные слова, так называемые lead-in (слова, стоящие непосредственно перед маркированным списком), очень важны, поскольку они дают читателю понять, что за список перед ним и почему он так важен. Лид-ин не обязательно должен иметь форму полного предложения, особенно если каждый пункт раскрыт в достаточной степени.

Неправильно

Отдых в Британской Колумбии:

походы;
художественные музеи;
плавание на каноэ по озеру.

Лид-ин (Отдых в Британской Колумбии) не ясно описывает список. Кроме того, в этом списке перечислены занятия, но «художественные музеи» — это не занятие.

Правильно

В ваш отдых в Британской Колумбии включены:

походы;
посещение музеев;
плавание на каноэ по озеру.

6. Соблюдайте правила оформления списков

Существуют конкретные правила оформления маркированных списков.

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

Неправильно

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

Пункты начинаются не с заглавных букв, и в конце нет точек.

Правильно

Если вы стали свидетелем издевательств:

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

Неправильно

Отдавать бумагу и предметы из пластика на переработку.
Использовать меньше одноразовых предметов.
Делиться с другими вещами, которые вам не нужны.
Смените автомобиль на велосипед.

Это фрагменты предложения, поэтому пунктуация не нужна.

Правильно

Вы можете защитить окружающую среду, если будете:

Отдавать бумагу и предметы из пластика на переработку
Использовать меньше одноразовых предметов
Делиться с другими вещами, которые вам не нужны
Смените автомобиль на велосипед

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

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

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

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

Заключение

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

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

Высоких вам конверсий!

По материалам

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

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

Теги
и

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

Каждый элемент списка должен начинаться тегом

(LI - List Item, элемент списка). Тег
не нуждается в соответствующем закрывающем теге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
Приведенных сведений достаточно для построения элементарного маркированного списка. Приведем пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 2.1.
Пример маркированного списка
Знаки зодиака:
- Овен
- Телец
- Близнецы
- Дева
- Весы
- Скорпион
- Стрелец
- К озерог
- Водолей
- Рыбы
Рис. 2.1. Отображение браузером маркированного списка
Заметим, что кроме элементов списка, отмечаемых тегом
, могут присутствовать и другие HTML-элементы. В приведенном выше примере одним из таких элементов является обычный текст, не являющийся пунктом списка, а играющий роль его заголовка.
Примечание
В некоторых учебниках по языку HTML встречается указание, что для задания заголовка списка следует применять тег-контейнер (LH - List Header, заголовок списка). В настоящее время этот тег не распознается ни одним из распространенных браузеров и не входит в спецификацию HTML. Таким образом, его применение становится бессмысленным, хотя и не приведет к каким-либо ошибкам.
В теге

Маркированный список в HTML. Маркированный и нумерованный список

Создание HTML-списков

1. Маркированный список