Содержание

Списки в HTML • Vertex Academy

Vertex Academy вложенные списки html,маркированный список html,многоуровневый список html,нумерованный список html,списки в html,список определений html

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

В повседневной жизни мы часто записываем информацию в виде списков:

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

На сайтах тоже часто часть информации оформляется в виде списков. Итак, учимся делать списки в HTML!

Всего выделяют 4 вида списков:

  1. Ненумерованные (неупорядоченные)
  2. Нумерованные (упорядоченные)
  3. Списки определений
  4. Вложенные списки

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

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

Ненумерованный список —  список, в котором элементы выделяются специальными маркерами – буллетами (визуально похоже на след от пули). А вот и пример ненумерованного списка:

Как сделать ненумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ul>…</ul>

<ul> — это аббревиатура от английского «Unordered List», что в переводе означает «неупорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> …</li>

<li> — это аббревиатура от английского «List Item», что в переводе означает «элемент списка».

Давайте посмотрим, как это работает на примере:


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

list-style-type:circle — маркер будет отображаться кружочком

list-style-type:square — будет выглядеть как квадратик

list-style-type:none — список будет без маркеров.

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


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

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

Так как же сделать нумерованный список в HTML? Для этого необходимо:

Шаг 1: Использовать тег <ol>…</ol>

<ol> — это аббревиатура от английского «Ordered List», что в переводе означает «упорядоченный список».

Шаг 2: Каждый элемент списка поместить в теге <li> …</li>

<li> — это аббревиатура от английского «List Item», что в переводе означает «элемент списка».

Пример упорядоченного (нумерованного) списка ниже:

По умолчанию элементы нумерованного списка помечаются арабскими цифрами (1, 2, 3, 4, 5 и т.д.). С помощью атрибута type можно это поменять:

type=»A» — строки будут нумероваться заглавными буквами

type=»a» — строчными буквами

type=»I» — заглавными римскими цифрами

type=»i»— строчными римскими цифрами

Давайте к примеру пронумеруем наш список дел римскими цифрами


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

Также в HTML существуют списки определений, где каждый элемент состоит из понятия и его определения. Это напоминает статьи в словаре или энциклопедии.

Список определений, (англ Description List, тег <dl>) включает в себя элементы, которые

  • обозначают какое-то понятие, термин (description term) — тег <dt>
  • описывают каждое из этих понятий (description data) — тег <dd>
Например:


Вложенные списки

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

Вот как это выглядит:

Списки можно комбинировать между собой, например:

Смотрим как это выглядит в HTML:


В качестве элементов списков можно использовать картинки или ссылки. Также, с помощью CSS список можно расположить горизонтально, а если заменить в нем каждый элемент ссылкой — получится полноценное меню сайта. Но это тема для отдельного урока.
До встречи!


Что такое маркированные списки(Unordered Lists) и нумерованные списки (Ordered Lists)