Как создавать списки в html

WEB-дизайн

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

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

Для установки маркированного списка используются тэги <UL> (unordered list — неупорядоченный список) и <LI> (list item — элемент списка).

Синтаксис:

Пример:

Результат:

• Книги
• Электроника
• CD и DVD

Маркеры могут принимать один из трех видов определяемых атрибутом TYPE тега <UL> :

• TYPE=disc — круг (по умолчанию);
• TYPE=circle – окружность;
• TYPE=square – квадрат.

Пример:

Результат:

• Книги
• Электроника
• CD и DVD

Пример:

Результат:

• Книги
• Электроника
• CD и DVD

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

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Нумерованный список идентичен ненумерованному списку, только вместо тэга <UL> используется тэг <OL> (ordered list — упорядоченный список).

Синтаксис:

Атрибуты:

• type — определяет стиль нумерации (по умолчанию нумерация дается арабскими цифрами, начиная с единицы):
  • type=»A» — использовать большие буквы (латинские);
  • type=»a» — использовать маленькие буквы;
  • type=»I» — использовать большие римские цифры;
  • type=»i» — использовать маленькие римские цифры;
  • type=»1″ — использовать арабские цифры;

  Пример. Нумерованный список начинающийся с пяти.

  Результат:

  1. Книги
  2. Электроника
  3. CD и DVD

  Пример. Нумерованный список с заглавными буквами латинского алфавита.

  Результат:

  1. Книги
  2. Электроника
  3. CD и DVD

  Пример. Нумерованный список со строчными буквами латинского алфавита.

  Результат:

  1. Книги
  2. Электроника
  3. CD и DVD

  Пример. Нумерованный список со строчными римскими цифрами.

  Результат:

  1. Книги
  2. Электроника
  3. CD и DVD

  Пример. Нумерованный список с заглавными римскими цифрами начинающийся с семи.

  Результат:

  1. Книги
  2. Электроника
  3. CD и DVD

  

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

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

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

  Термин
  Определение термина

  Сам список задается с помощью тэга <DL> , термин — тегом <DT> , а его определение — с помощью тега <DD> .

  Синтаксис:

  Пример:

  Результат:

  

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

  Вложенные списки предназначены для организации сложной иерархической структуры текста, обычно таких документов, как юридические или технические. На веб-странице нельзя автоматически вести многоуровневую нумерацию, вроде использования подпунктов типа 1.1 или 2.1.3. Поэтому приходится вводить числа самостоятельно или упрощать отображение списка. Чтобы корректно организовать вложение списков тег <OL> , формирующий подпункты, должен располагаться внутри тега <LI> .

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

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

  Результат:

  1. Пункт 1
     1. Подпункт 1.1
     2. Подпункт 1.2
     1. Подпункт 2.1
     2. Подпункт 2.2

     У подпунктов имеется отступ слева, но нет вертикальных отступов сверху и снизу списка, как это обычно бывает у тега <OL> .

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

     HTML Списки

     HTML Списки позволяют веб-разработчикам группировать набор связанных элементов в списках.

     HTML Пример списка

     Неупорядоченный список:

     • Пункт
     • Пункт
     • Пункт
     • Пункт

     Упорядоченный список:

     1. Первый пункт
     2. Второй пункт
     3. Третий пункт
     4. Четвёртый пункт

     Неупорядоченный HTML Список

     Неупорядоченный (ненумерованный) список начинается с тега <ul> . Каждый элемент списка начинается с тега <li> .

     Элементы списка будут помечены маркерами (маленькие черные кружки) по умолчанию:

     Пример

     Неупорядоченный HTML Список — выберите маркер элемента списка

     CSS свойство list-style-type используется для определения стиля маркера элемента списка:

     Значение	Описание
     disc	Устанавливает маркер элемента списка как маленький чёрный кружок (по умолчанию)
     circle	Устанавливает маркер элемента списка в виде маленького пустого кружка
     square	Устанавливает маркер элемента списка в виде квадрата
     none	Элементы списка не будут отмечены (маркеры отсутствуют)

     Пример — Disc

     Пример — Circle

     Пример — Square

     Пример — None

     Упорядоченный HTML Список

     Упорядоченный (нумерованный) список начинается с тега <ol> . Каждый элемент списка начинается с тега <li> .

     Элементы списка будут помечены номерами по умолчанию:

     Пример

     Упорядоченный HTML Список — Атрибут Type

     Атрибут type тега <ol> определяет тип маркера элемента списка:

     Тип	Описание
     type="1"	Элементы списка будут пронумерованы цифрами (по умолчанию)
     type="A"	Элементы списка будут пронумерованы заглавными буквами
     type="a"	Элементы списка будут пронумерованы строчными буквами
     type="I"	Элементы списка будут пронумерованы большими римскими цифрами
     type="i"	Элементы списка будут пронумерованы маленькими римскими цифрами

     Цифры:

     Заглавные буквы:

     Строчные буквы:

     Большие римские цифры:

     Маленькие римские цифры:

     HTML Списки описания

     HTML также поддерживает списки описания.

     Список описания — это список терминов с описанием каждого термина.

     Тег <dl> определяет список описания, тег <dt> определяет термин (имя), а тег <dd> описывает каждый термин:

     Пример

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

     Список может быть вложенным (списки внутри списков):

     Пример

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

     Подсчет контрольного списка

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

     Пример

     Горизонтальный список с помощью CSS

     HTML-списки можно стилизовать различными способами с помощью CSS.

     Один из популярных способов — это стилизовать список по горизонтали для создания меню навигации:

     Пример

     <!DOCTYPE html>
     <html>
     <head>
     <style>
     ul <
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333333;
     >

     li a <
     display: block;
     color: white;
     text-align: center;
     padding: 16px;
     text-decoration: none;
     >

     Совет: Вы можете узнать больше о CSS в нашем CSS Учебнике.

     Резюме раздела

     • Используйте HTML елемент <ul> для определения неупорядоченного списка
     • Используйте CSS свойство list-style-type для определения маркера элемента списка
     • Используйте HTML элемент <ol> для определения упорядоченного списка
     • Используйте HTML атрибут type для определения типа нумерации
     • Используйте HTML элемент <li> для определения элемента списка
     • Используйте HTML элемент <dl> для определения списка описания
     • Используйте HTML элемент <dt> для определения термина описания
     • Используйте HTML элемент <dd> для описания термина в списке описания
     • Списки могут быть вложены в списки
     • Элементы списка могут содержать другие элементы HTML
     • Используйте CSS свойство float:left или display:inline для горизонтального отображения списка

     HTML Упражнения

     HTML Теги списка

     Тег	Описание
     <ul>	Определяет неупорядоченный (ненумерованный) список
     <ol>	Определяет упорядоченный (нумерованный) список
     <li>	Определяет пункты списка
     <dl>	Определяет список описания
     <dt>	Определяет термин в списке описания
     <dd>	Описывает термин в списке описания

     Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.

     Вопросы для самоконтроля

     • Для чего нужны HTML-списки?
     • Какие бывают HTML-списки?
     • Каким тегом определяется неупорядоченный HTML-список?
     • Каким тегом определяется упорядоченный HTML-список?
     • Каким тегом определяется каждый элемент в HTML-списке?
     • Как по умолчанию обозначаются элементы неупорядоченного HTML-списка?
     • Как по умолчанию обозначаются элементы упорядоченного HTML-списке?
     • Что такое список описаний?
     • Какой тег определяет список описаний?
     • Какой тег определяет термин (имя) в списке описаний?
     • Какой тег определяет описание каждого термина в списке описаний?

     ПАЛИТРА ЦВЕТОВ

     ПРИСОЕДИНЯЙТЕСЬ!

     Связь с админом

     Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

     Топ Учебники

     Топ Справочники

     Топ Примеры

     Веб Сертификаты

     Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
     Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
     Также доступна версия сайта W3Schools на украинском языке.
     Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
     Сайт работает на фреймворке W3.CSS.

     Списки в HTML. Все о HTML списках

     

     В HTML для создания списков используются теги группы lists. К ним относятся:

     — тег маркированного списка; — тег нумерованного списка; — тег элемента списка; — тег списка определений; — тег термина в списке определений; — тег описания термина в списке определений.

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

     Далее будет показана практика создания HTML списков с примером исходного кода и описанием на русском языке.

     В HTML есть три типа списков: маркированный, нумерованный и список определений (терминов).

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

     Для создания маркированного списка используются теги <ul> и <li> . Тег ul — это контейнер маркированного списка. Тег li — элемент списка.

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

     • Яблоки
     • Абрикосы
     • Бананы
     • Сливы

     Исходный код простого маркированного списка:

     Типы маркеров

     Для маркированного списка доступны 3 типа маркеров по умолчанию: disc, square и circle. Задать тип маркера можно при помощи CSS свойства list-style-type . Тип маркера может быть задан, как для списка в целом (свойство применяется к <ul> ), так и для конкретного элемента (свойство применяется к <li> ).

     Список с разными типами маркеров:

     • Disc — закрашенный круг, точка.
     • Circle — окружность, пустая внутри.
     • Square — квадрат.

     Исходный код списка с разными типами маркеров:

     Положение маркера в списке

     HTML поддерживает 2 типа положений маркеров списка: внутри или снаружи. Положение маркера регулируется CSS свойством list-style-position . Положение может быть задано, как для списка в целом, так и для отдельного элемента.

     Пример списка с разным положением маркеров:

     • Маркер внутри (inside)
     • Маркер снаружи (outside)

     Исходный код списка с разным положением маркеров:

     Свой маркер в HTML списке

     Использовать в качестве маркера HTML списка можно и свою картинку. Для этого используйте CSS свойство list-style-image .

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

     1. Дизайн
     2. Верстка
     3. Интеграция

     Исходный код списка со своим маркером — картинкой:

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

     Чтобы создать нумерованный список используйте теги <ol> и <li> . Тег ol — это контейнер нумерованного списка. Тег li — элемент списка.

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

     1. Выучить HTML
     2. Добавить CSS
     3. Освоить JavaScript

     Исходный код нумерованного списка

     Типы нумерации в HTML списке

     В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type . Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

     Разные типы нумерации в списках:

     1. Первый
     2. Второй
     3. Третий
     1. Первый
     2. Второй
     3. Третий
     1. Первый
     2. Второй
     3. Третий
     1. Первый
     2. Второй
     3. Третий
     1. Первый
     2. Второй
     3. Третий

     Другие варианты нумерации, включая греческую, еврейскую, японскую, с ведущими нулями и т.д. можно получить используя CSS свойство list-style-type .

     Многоуровневый список HTML (список в списке)

     HTML не имеет отдельного элемента для создания многоуровневых списков. Вместо этого в HTML используются вложенные списки — список в списке.

     Чтобы создать новый уровень списка, нужно поместить внутрь элемента списка <li> вложенный список. Вложенными могут быть маркированные, нумерованные, списки определений или другие многоуровневые списки.

     Ограничений по количеству уровней вложенности списков нет.

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

     • Tesla
       1. Model 3
       2. Model S
          1. 75
          2. 75D
          3. 100D
          4. P100D
       3. Model X
     • BMW
     • Nissan

     Исходный код многоуровневого списка

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

     Для создания списка определений используются теги <dl> , <dt> и <dd> . Тег dl — это контейнер списка определений, dt — термин, dd — описание термина.

     Creating Lists in HTML: A Learning Journey to Web Development

     

     Welcome back to the journey again! We learned about HTML Links and Image in the last post. Today we’ll learn about another most important elements that we use a lot in our daily life. That is Lists. Just like in real life, they are used a lot on web pages. So, let’s learn how to create list in HTML.

     N.B: This post is a part of the series A complete learning journey to web development where we are learning web development from the ground up. Be sure to join me there.

     List in HTML

     Describing how important list is in our life is completely unnecessary. We use it all the time. From little things like a grocery list to big things like life goals; lists always come in handy. Lists show us way, lists helps us remember things, lists helps us achieve our goals. It’s inevitable that you’ll have to create a lot of lists when creating a web page. We create lists of different types and different styles in the real world. HTML provide us functionality to mimic almost any type of list that you might image.

     Types of List in HTML

     HTML supports 3 main types of lists. They are

     • Ordered List
     • Un-Ordered List &
     • Description List

     Did you see that I’ve just created a list to list the type of available list? 😀 I told you list is important! Anyway, Take a look at my list. They have bullet point or solid dots, whatever you may call it; at the beginning of each item. They are not maintaining any specific order. That is because the order doesn’t really matter here. It wouldn’t hurt if I mentioned un-ordered list at first. And that is why it’s an unordered list.

     But think about a recipe list. Recipe lists follows an order. If I bring the third item of the list on top, you are left with either a recipe that might cause damage to your relationship with your spouse Or, an unusable list. So, we must maintain order when creating such list. Take a look at this ordered list below:

     Creating an Un-ordered List in HTML

     The syntax in simple and easy. We use the un-ordered list ‘<ul>’ tag to mark the start and end of the list, and we use the list item ‘<li>’ tag to put all the items in the list. Let’s see an example:

     • Cats
     • Dogs
     • Birds
     • All other animals

     Un-ordered list is probably the most used list on the internet. The marking styles of items that shows up before every list item can be customized with CSS which we’ll take a look at later. There’s not much to talk about un-ordered list. You simply create the <ul> tag and put all your items in <li> tags within the <ul> tag, and that’s it.

     Creating an Ordered list in HTML

     An ordered list is created the same way an un-ordered list is created. Except, instead of un-ordered list tag, we use the ordered list tag ‘<ol>’ here. Check out the example below:

     Easiest recipe in the world:

     1. Put eggs in the saucepan
     2. Cover the eggs with at-least an inch of water
     3. Put the saucepan on the stove
     4. Heat it for 10 minutes

     Congratulations! You have an edible boiled egg!

     As you can see, it’s exactly the same as unordered list. But ordered list has some special attributes which can be used to customize the behavior of the list. Let’s discuss them briefly.

     The Attributes

     The first one is the start attribute. It sits with the <ol> tag and defines the number that the list should start from. If you put start=”9”, the list will start from 9 instead of starting from 1.

     The type attribute defines the type of notation to be used. An ordered list can be created with numbers, letters, roman numbers etc. The possible values of the type attribute are: 1, A, a, I, i which respectively means numbers, Uppercase Letter, Lowercase Letter, Uppercase Roman number, Lower Case Roman numbers.

     The reversed attribute reverse the order of the list. If you use the reversed attribute on an ordered list, the list will start from the highest number to lowest number instead of lowest to highest.

     The value attribute sits with <li> tag. List items are numbered automatically based on their position. But if you need to change that number for any reason, you use the value attribute. All the list items that come after the list item with a value attribute are calculated accordingly.

     Check out the code pen below this post where I’ve demonstrated the use of all these attributes.

     Creating a Description List in HTML

     The last type of list HTML offers is description lists. Though it’s an useful one, but the use case of this is much much lower than ordered and un-ordered lists. A description list can be created using the description list ‘<dl>’ tag. And instead of ‘<li>’ tags, two tag, description term <dt> and description <dd> tag is used to create a descriptive list. As all the description generally have two parts, the name of the term to be defined, and the description itself, it is not possible to use the <li> tag in the description list. Check out the code pen for demonstration.

     List Nesting

     One great feature that makes HTML listing extremely powerful is the ability to nest one list inside another one. We can create versatile lists with an ordered list inside of an unordered list or vice versa.

     The below codepen demonstrates all the things I’ve discussed in this post. Take a look and try to understand the way they’re working together.

     Play with the code. Change stuff here and there and see what happens. I’ve used all the attribute individually on lists. What would happen if you applied two attributes on same list? Try it yourself and let me know what happens. That is the best way to learn.

     Conclusion

     That is pretty much everything about creating List in HTML. The most important part about list is styling these lists to suit your needs. We will cover that once we reach the CSS section.

     Feel free to leave a comment if you have any confusion or questions. And please share this post on your social network so that I can reach more people who would want to embark on this learning journey.

     We’ll learn about HTML tables in the next post. Till then, Keep mistaking and I’ll see you soon! 🙂

     This post was originally published here on UXArt blog. You can poke me here if you want to.

     Похожие публикации:

     1. Html to design figma как пользоваться
     2. Html ниже представлена часть html разметки что будет отображаться в браузере
     3. Sub что это в html
     4. Где писать код на html