List html

Information in your web page can be listed using the List feature of HTML. There will be a set of reasons you may have for including a list in your web pages. These reasons can vary from inserting your user’s 10 favorite music albums the page, or may include names of visitors along with their favorite hobby to list down in a web document. There may be plenty many reasons. So in simple terms, you can provide numbered or orderly place your information as a category or subcategory which might increase your document’s readability. In this chapter, you will be learning about how to use lists and the different tags used in listing your data.

HTML’s Listing Tags

HTML provides three different techniques to specify information in the form of lists. It is to be noted that, every list needs to have at least one multiple data elements within it. The various forms of HTML list tags are:


Tag Description
<ol> HTML ol tag is abbreviated as Ordered List which is used for numbering the lists in a web page.
<ul> HTML UL tag is abbreviated as Unordered List which is used for listing your items via bullets and circles.
<dl> HTML dl tag is abbreviated as Definition List which is used for arranging your data items like the way items remain arranged in any dictionary.

The type Attribute

You can use the type attribute in these above listing tags. This type attribute will eventually help you in specifying your customized type from the types pre-specified by HTML.

Similarly, for Unordered lists also, there are three symbols which will acts as bullets for your lists.

Start Attribute

The start attribute of <ol> is used for providing the starting point or value of your list.

<ol type = "I" start = "3">

Example of OL Tag

<ol type = "i" start = "4">  <li> Four </li>  <li> Five </li>  <li> Six </li> </ol> <ol type = "I" start = "1">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li>  <li> Neha </li> </ol> <ol type = "A" start = "1">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li>  <li> Neha </li> </ol> <ol type = "a" start = "1">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li>  <li> Neha </li> </ol> <ol type = "1" start = "1">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li>  <li> Neha </li> </ol>    

Example of UL Tag

<ul type = "square">  <li> A </li>  <li> B </li>  <li> C </li> </ul> <ul type = "disc">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li> </ul>  <ul type = "circle">  <li> Alex </li>  <li> Deeksha </li>  <li> Ray </li> </ul>

Definition List

In this type of listing of data, the data are arranged or listed like that of a dictionary or encyclopedia. It is used on the last page of your site for providing the glossary or arranged a set of definitions.

It takes the help of two more tags called as: <dt> — a definition terminology and <dd> — definition description.

<dl>  <dt> Alex </dt>  <dd> Class X </dd>  <dt> Deeksha </dt>  <dd> Class IX </dd> </dl>    

www.w3schools.in

Многоуровневый список в HTML: как создать и настроить?

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

List html

Базовая теория

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

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


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

Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

Многоуровневый список: как его делать?

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

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

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

В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

Кстати, вот так это выглядит:


List html

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

Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

List html

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

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

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


List html

Отличие видно только в том, что в данном случае браузер изменил внешний вид маркеров у внутренних списков. Также в данном случае мы сделали список под каждый пункт. Вы должны понимать, что в html в принципе нет никакого лимита на кол-во вложенных списков. То есть вы можете создать их хоть 10-15 в одном списке. Единственная проблема, с которой вы столкнетесь – длинная и очень запутанная разметка, в которой трудно разобраться.

Изменяем маркеры для маркированного списка с помощью CSS

Если мы возьмем стандартное оформление списков, то, как видите, оно очень и очень скудное. В 99% процентов оно просто будет вас не устраивать и вы захотите его сменить. К счастью, для маркированных списков это сделать очень легко, так как есть свойство list-style-image, но я предлагаю использовать сокращенную запись и записать так:

Предварительно я нашел и поместил в папку нужную картинку, вот что получилось:

List html

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

Конечно, наиболее оптимальный форматом картинки-маркера я считаю формат png. С его помощью вы можете подбирать не только квадратные маркеры. Да и вообще png-картинка будет лучше смотреться.


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

Убираем маркеры и нумераторы полностью

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

Либо в сокращенной записи – list-style: none.

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

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

Далее в css напишем такой код, ниже я его объясню:

Самое главное то, какую красоту он создал:

List html

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


Итак, львиная доля свойств прописана для селектора ol li:before. Во-первых, нам надо разобраться, как он работает. Псевдоэлемент before позволяет поместить любое содержимое перед указанным элементом. В нашем случае это все пункты нумерованных списков.

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

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

Через двоеточие прописывается название счетчика. Оно может быть произвольным, не обязательно number. Хорошо, это мы просто задали счетчик, но пока его значение никак не выводится. Если вы изучали псевдоэлементы after и before, то знаете, что текстовое содержимое задается в них с помощью свойства content. Значит, пишем так:

Теперь в псевдоэлементах будет выводиться значение счетчика. В первом элементе – 1, во втором – 2. То есть то, что нужно для списка. Какие еще свойства я указал, чтобы завершить оформление? Например, border-radius – это закругление углов, box-shadow – небольшая тень, display: inline-block – очень важное правило, оно позволит псевдоэлементу отображаться на одной строке с контентом пункта li.

Но и это не все!) Вот такой код еще у нас прописан для нумерованных списков в целом:

Что он означает и для чего нужен? По сути, это сброс счетчика. То есть для каждого нумерованного списка значение будет сброшено до нуля и с него начнется отсчет. Если бы этого правила не было, то было бы вот что:


List html

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

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

List html

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

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

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

List html

webformyself.com

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.

Example

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Unordered List</title>  </head> 	  <body>  <ul>  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ul>  </body>   </html> 

This will produce the following result −

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options −

 <ul type = "square"> <ul type = "disc"> <ul type = "circle"> 

Example

Following is an example where we used <ul type = «square»>

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Unordered List</title>  </head>   <body>  <ul type = "square">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ul>  </body>  </html> 

This will produce the following result −

Example

Following is an example where we used <ul type = «disc»> −

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Unordered List</title>  </head> 	  <body>  <ul type = "disc">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ul>  </body>  </html> 

This will produce the following result −

Example

Following is an example where we used <ul type = «circle»> −

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Unordered List</title>  </head>   <body>  <ul type = "circle">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ul>  </body> 	 </html> 

This will produce the following result −

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Ordered List</title>  </head>   <body>  <ol>  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body>  </html> 

This will produce the following result −

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options −

 <ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters. 

Example

Following is an example where we used <ol type = «1»>

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Ordered List</title>  </head>   <body>  <ol type = "1">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body>  </html> 

This will produce the following result −

Example

Following is an example where we used <ol type = «I»>

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Ordered List</title>  </head> 	  <body>  <ol type = "I">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body> 	 </html> 

This will produce the following result −

Example

Following is an example where we used <ol type = «i»>

Live Demo

 <!DOCTYPE html> <html>    <head>  <title>HTML Ordered List</title>  </head> 	  <body>  <ol type = "i">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body> 	 </html> 

This will produce the following result −

Example

Following is an example where we used <ol type = «A» >

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Ordered List</title>  </head> 	  <body>  <ol type = "A">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body> 	 </html> 

This will produce the following result −

Example

Following is an example where we used <ol type = «a»>

Live Demo

 <!DOCTYPE html> <html>    <head>  <title>HTML Ordered List</title>  </head> 	  <body>  <ol type = "a">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body> 	 </html> 

This will produce the following result −

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options −

 <ol type = "1" start = "4"> - Numerals starts with 4. <ol type = "I" start = "4"> - Numerals starts with IV. <ol type = "i" start = "4"> - Numerals starts with iv. <ol type = "a" start = "4"> - Letters starts with d. <ol type = "A" start = "4"> - Letters starts with D. 

Example

Following is an example where we used <ol type = «i» start = «4» >

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Ordered List</title>  </head> 	  <body>  <ol type = "i" start = "4">  <li>Beetroot</li>  <li>Ginger</li>  <li>Potato</li>  <li>Radish</li>  </ol>  </body> 	 </html> 

This will produce the following result −

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition
  • </dl> − Defines the end of the list

Example

Live Demo

 <!DOCTYPE html> <html>   <head>  <title>HTML Definition List</title>  </head> 	  <body>  <dl>  <dt><b>HTML</b></dt>  <dd>This stands for Hyper Text Markup Language</dd>  <dt><b>HTTP</b></dt>  <dd>This stands for Hyper Text Transfer Protocol</dd>  </dl>  </body> 	 </html> 

This will produce the following result −


www.tutorialspoint.com

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

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

А вот так выглядит в браузере:

Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

1.1 Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

Название маркера Значение атрибута "type" Пример списка
Маркеры в виде круга disc
  • Земля
  • Сатурн
  • Венера
Маркеры в виде незакрашенного круга circle
  • HTML
  • JS
  • CSS
Маркеры в виде квадрата square
  • Лужа
  • Озеро
  • Море

1.2 Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение "circle" для атрибута type и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

Рис. 1.2. Вид маркера для списка в виде окружности в браузере

1.3 Маркер списка в виде квадрата

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

Обратите внимание на маркер, он стал квадратным:

Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

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

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

В отличие от предыдущего вида списков, в нумерованных списков есть одна важная особенность: они автоматически проставляют нумерацию. Это бывает полезно когда необходимо пронумеровать большой список. Вручную это займет очень много времени, при этом еще можно сбиться. Нумерованный список задается с помощью тега <ol></ol>. Как это выглядит на практике:

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

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

Рис. 2.1. Нумерованный список в браузере со стандартными настройками

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1 Стандартные маркеры для нумерованного списка

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

Название маркера Значение атрибута "type" Пример списка
Маркеры в виде арабских чисел 1
  • Бадминтон
  • Бейсбол
  • Бокс
Маркеры в виде строчных латинских букв a
  • Джомолунгма
  • Чогори
  • Канченджанга
Маркеры в виде заглавных латинских букв A
  • Summit Plummet
  • Tantrum Alley
  • Insano
Маркеры в виде римских цифр в нижнем регистре i
  • Филиппинское море
  • Аравийское море
  • Коралловое море
Маркеры в виде римских цифр в верхнем регистре I
  • Красный
  • Зеленый
  • Синий

2.2 Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут "start". Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

Вот как это будет отображаться на реальном сайте:

Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

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

Ну а сейчас перейдем к вложенным спискам HTML.

3. Как сделать многоуровневый (вложенный) список в HTML

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

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

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

Рис. 3.1. Пример многоуровневого списка в HTML

Мы делали многоуровневый список с помощью маркированного (тег <ul>). Многоуровневый список с моделями Citroen появился с другими маркерами. Основной список с закрашенными маркерами, а список на 2-м уровне — с пустыми кружками. Но, как помните, с помощью атрибута "type" мы можем переопределить маркеры (лучше задавать стили для маркеров с помощью CSS).

Но мы можем объединить многоуровневые списки с нумерованными и маркированными следующим образом:

В примере выше у нас двойная вложенность (2 уровня). Сначала вкладывается список из двух классов тюльпанов, он у нас нумерованный. Затем в каждый из элементов нумерованного списка вкладывается маркированный список.

Смотрим его вид в браузере:

Рис. 3.2. Пример многоуровневого нумерованного списка в маркированный список в браузере

4. Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: основы CSS. Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1 Как сделать список HTML в строку

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

4.2 Как сделать список HTML без значка

За это отвечает свойство list-style-type в CSS (подробнее здесь):

4.3 Как сделать список в HTML по центру

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

4.4 Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

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

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

4.6 Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count (свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

5. Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

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

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

Больше практикуйтесь!

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru

Что такое списки в HTML, какие они бывают

Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.

Какие бывают списки?

  • Нумерованный список;
  • Маркированный список (не нумерованный);
  • Многоуровневый список;
  • Список определений;
  • Выпадающий список.

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

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

Пример:

неправильный список

Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

Пример:

правильные списки

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

Где применяются списки?

  1. Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
  2. Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
  3. Многоуровневые списки используются для детализации информации отдельных элементов;
  4. Список определений в HTML используется при необходимости форматирования словаря.

HTML-практикум ч.1: как сделать упорядоченный нумерованный список

Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).

Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.

Покажу на примере. Код:

Результат:

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

По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».

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

Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

выбор type для оформления нумерованного списка

TYPE может принимать значения:

  • «A» — для нумерации A, B..
  • «a» — для нумерации a, b..
  • «I» — для нумерации I, II..
  • «i» — для нумерации i, ii..
  • «1» — для нумерации 1. 2. и далее по порядку.

Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.

Внимание! Использование атрибута value сбивает нумерацию и, если нужно, его приходится использовать дважды.

Пример кода:

Результат:

произвольная нумерация нумерованного списка

HTML-практикум ч.2: маркированный список

Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).

Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.

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

Код:

Результат:

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

Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:

маркированный список с кружками, окружностями и квадратами

Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».

Код:

Результат:

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

HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».

Код:

Результат:

не упорядоченный не нумерованный список

HTML-практикум ч.4: вложенный многоуровневый древовидный список

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

многоуровневый древовидный вложенный список

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

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

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

Код:

Результат:

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

HTML-практикум ч.5: как сделать список определений

Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.

  • <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
  • <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
  • <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

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

Пример кода:

Результат:

список определений и терминов в html

Итог

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

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

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

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

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.

blogwork.ru

www.bitdegree.org

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

  • Содержание:
  • 1. Маркированный список <ul>
  • 2. Нумерованный список <ol>
  • 3. Список определений <dl>
  • 4. Вложенный список
  • 5. Многоуровневый нумерованный список

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

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

ul {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>
unordered list
Рис. 1. Маркированный список

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

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

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

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут Описание, принимаемое значение
reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" 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).
<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>
ordered list
Рис. 2. Нумерованный список

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

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

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

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>
dl
Рис. 3. Список определений

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

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

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>
ul ul ul
Рис. 4. Вложенный список

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

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

<ol>   <li>пункт</li> <!-1.->   <li>пункт    <ol>   <li>пункт</li> <!-2.1.->   <li>пункт</li> <!-2.2.->   <li>пункт   <ol>   <li>пункт</li> <!-2.3.1.->   <li>пункт</li> <!-2.3.2.->   <li>пункт</li> <!-2.3.3.->    </ol>   </li> <!-2.3.->   <li>пункт</li> <!-2.4.->    </ol>   </li> <!-2.->   <li>пункт</li> <!-3.->    <li>пункт</li> <!-4.->   </ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
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,".") ". ";   }
numeric list
Рис. 5. Многоуровневый нумерованный список

html5book.ru

Unordered Lists

An unordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.

The ul element opens and closes an unordered list. The items on the list are contained between list item, li, tags. A simple unordered list containing three items could be created with the following HTML.

<ul>  <li>Item A</li>  <li>Item B</li>  <li>Item C</li> </ul> 

Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.

Here’s how our short unordered list renders in a browser:

Ordered Lists

Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the ol tag is used rather than the ul tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.

We’re also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.

<ol>  <li>Step 1</li>  <li>Step 2</li>  <li>Step 3</li> </ol> 

As you can see below, rather than a bulleted list, we now have a numbered list.

Creating a Countdown List

There are times when you want to control the numbering of ordered lists. For example, your list may be broken up by a paragraph that appears mid-list to expand on a certain concept, or you may create a countdown list that begins at a high number and counts down. Lastly, maybe you’d rather use roman numerals. HTML and CSS make it easy to control the numbering of ordered lists.

To reverse the number of a list, simply add the reversed attributed to the opening ol tag.

<ol reversed>  <li>Item 3</li>  <li>Item 2</li>  <li>Item 1</li> </ol> 

When rendered in most browsers the numbering of this list will appear reversed.

It should be noted that Microsoft browsers do not support the reversed attribute. If you use this attribute, bear in mind that visitors using Internet Explorer or Edge will see standard numbering.

Starting a List on a Specific Number

The start attribute is used to to specify the number on which an ordered list starts. For example, imagine you have a list of 5 items, and after the second and fourth items you want to add a sentence or two with additional details. You could use the following HTML to do this without restarting the list numbering after each paragraph.

<ol>  <li>Step 1</li>  <li>Step 2</li> </ol> <p>A few short sentences about Item 2 that we don't want to appear appended to the list item. A second sentence of additional details</p> <ol start="3">  <li>Step 3</li>  <li>Step 4</li> </ol> <p>Notice that we used the <code>start</code> attribute on the <code>ol</code> tag to restart the numbering at "3" following the break in the list above. We'll use the same technique to properly number Step 5 below.</p> <ol start="5">  <li>Step 5</li> </ol> 

Here’s how that list renders in the browser:

Changing the Numbering Style

You can use CSS to change they marker style of an ordered list. In addition to standard numbering (referred to as decimal in CSS), you can also use:

  • upper-roman for uppercaseroman numerals
  • lower-roman for lowercase roman numerals
  • decimal-leading-zero to add a “0” placeholder before single-digit list items

We cover the list-style-type CSS property used to implement these numbering styles below.

Description Lists

Description lists are created with the dl tag. Used far less frequently than their ordered and unordered peers, description lists are used to contain name-value groups. Each name-value group consists of one name, or term, placed between dt tags, followed by one or more values with each value, or description, placed between dd tags.

For example, if we wanted to use a description list to explain the relationship between members of a family, we might use the following code:

<dl>  <dt>Parents</dt>  <dd>Jamie</dd>  <dd>Charlie</dd>  <dt>Children</dt>  <dd>Landry</dd>  <dd>Oakley</dd>  <dd>Skyler</dd>  <dt>Pets</dt>  <dd>Cat</dd>  <dd>Dog</dd>  <dd>Gerbil</dd> </dl> 

When that list is rendered, it will be displayed in such a way that the relationships between the terms (dt) and values (dd) are clear.

Nested Lists

A nested list is a list within a list. If you’ve ever created a bulleted outline in a word processing document you probably used a variety of indentations and bullet point types to denote items that were subpoints of another item in the outline. This is the effect we’re going for when we create nested lists.

To create a nested list, simply add a new list within a parent list like this:

<ul>  <li>Item A</li>  <li>Item B</li>  <ul>  <li>Subtem B.1</li>  <li>Subitem B.2</li>  </ul>  <li>Item C</li> </ul> 

When that list is loaded in the browser, the nested list will be indented further than the parent list, and a different type of item marker will be displayed.

Nested lists aren’t just used to organize the visual representation of information. Screen readers and other assistive technologies rely on the nested structure of complex lists to make sense of the hierarchy and logic of data within the list.

You could use assign classes to list items and use CSS to create the same visual effect as a nested list. However, if you did that, the hierarchical and logical structure of the list would be lost to website visitors using assistive technologies. In other words, don’t use CSS to create nested lists visually, use HTML to create them.

Using Lists for Menus

One of the most common uses of lists is to create website navigation menus. Unordered lists are usually the list-of-choice for this purpose. With just a few lines of CSS we can convert an unordered list into an attractive horizontal navigation menu.

<style>  #nav {  background: lightgray;   overflow: auto;   }  #nav li {  float: left;  list-style-type: none;  padding: 10px;  }  #nav li:hover {  background: gray;  } </style> <ul id="nav">  <li><a href="#Using_Lists_for_Menus">Home</a></li>  <li><a href="#Using_Lists_for_Menus">About Us</a></li>  <li><a href="#Using_Lists_for_Menus">Contact Us</a></li> </ul> 

If we load that code in the browser, you’ll notice that each menu item changes when you hover over it.

A lot more can be done with lists, CSS, and JavaScript to create interactive drop-down menus, and our menu tutorial will teach you how to create beautiful, modern, interactive, and well-organized menus.

Styling Lists

List typography is usually best styled to match the typography of the website’s paragraph text. List-specific styling can be accomplished with CSS.

There are three list properties that can be styled with CSS:

  • list-style-type: Defines the marker type that preceeds each list item. Common values include disc (the default unordered list style type), decimal (the default ordered list style type), circle, square, lower- or upper-roman, and lower- or upper-latin, although several additional styles may also be used.
  • list-style-position: Determines whether the list item marker should be placed inside the content box, or outside of the content box in the item’s left-hand padding area.
  • list-style-image: An image can also be used as the item marker. This property is used to specify the image file to be used.

Each of these three properties can be applied seperately by using the individual property names or simultaneously with the list-style shorthand property. The list-style property syntax includes the list style type, position, and image values in that order. For example, if we wanted to select the square marker, position it inside the content box, and also specify an image file, our CSS would look something like this:

selector_for_the_target_list {  list-style: square inside url("box_image.png"); } 

Since we’ve specified both a list marker and an image, the image will be used unless it is unavailable, in which case the square marker will be displayed.

Closing Thoughts

Lists are one of the most diverse and effective tools in a web designers toolbox. They provide logical, hierarchical structure to data, and can be used in a variety of ways. Understanding the full breadth of what is possible with lists in HTML makes this powerful HTML element even more useful.

html.com


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector