Html list web page

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

Unordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with bullets (small black circles) by default:

Example

Ordered HTML List

tag. Each list item starts with the
tag.

The list items will be marked with numbers by default:

Example

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The tag defines the description list, the tag defines the term (name), and the tag describes each term:

Example

HTML List Tags

Tag	Description
	Defines an unordered list
	Defines an ordered list
	Defines a list item
	Defines a description list
	Defines a term in a description list
	Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «HTML List – How to Use Bullet Points, Ordered, and Unordered Lists».

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

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

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

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

Списки в HTML бывают упорядоченные и неупорядоченные.

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

Примером упорядоченного списка может служить нумерованный список. Он может начинаться с номера 1, затем будут идти номера 2, 3, 4 и так далее.

Но для упорядочивания элементов не обязательно используются числа. Могут быть и буквы: список начнется с буквы A, затем будут идти B, C, D и так далее.

Вот пример упорядоченного списка с именами студентов и их оценками:

Кроме упорядоченных списков в HTML есть и неупорядоченные. Пример — список задач. В представленном ниже TODO-списке мы видим, что я настолько увлечен программированием, что пожертвовал ради него завтраком.

Есть еще один вид списков — список определений (description list). Его мы рассмотрим чуть позже, а сейчас давайте разберем, как создавать каждый вид списков.

Как создать упорядоченный список

(от ordered list — упорядоченный список).

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

Вот полная HTML-структура упорядоченного списка:



Итак, у нас есть список пронумерованных элементов. Нумерация начинается с 1, а далее инкрементируется до 2 и 3. Откройте этот CodePen и попробуйте поиграть с использованием ol-li .

See the Pen Ordered List by Tapas Adhikary (@atapas) on CodePen.

Виды упорядоченных списков в HTML

атрибут type с нужным значением.

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



Аналогично, можно указать в качестве значения для type строчную букву a : тогда для упорядочивания будут использоваться строчные буквы.



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



Попробуйте назначать свои значения для type в этом CodePen:

See the Pen Ordered List Types by Tapas Adhikary (@atapas) on CodePen.

Использование атрибута start в упорядоченных списках

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

Допустим, мы хотим начать список не с 1, а с 30. Для этого нужно прописать значение 30 для атрибута start :



Как создать неупорядоченный список

(от unordered list — неупорядоченный список).

Элементы списка при этом будут иметь маркировку по умолчанию — черные точки.

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



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

Как сделать элементы списка ссылками

Этот пример показывает, как добавить в наш предыдущий список ссылки на соответствующие сайты:



Попробуйте сделать это самостоятельно:

Виды неупорядоченных списков

Как уже упоминалось, маркировку списков можно настраивать. Это делается при помощи CSS-свойства list-style .

Для свойства list-style есть четыре основных значения:

• none — перед элементами не будет вообще никаких значков
• circle — значки будут в виде незаполненных кружков
• disc — дефолтное значение, значки в виде черных точек
• square — значки-квадратики

Попробуйте поменять виды маркировки:

А вы знали, что существуют еще и списки определений?

В HTML есть еще один вид списков, но он используется не так уж часто. Это список определений. Определение — это небольшой текст о чем-либо (поясняющий что-либо).

В списке определений у нас будут определяемые термины и их определения.

Сам список создается при помощи тега .

Внутри списка указываются термины (при помощи тегов ) и определения (при помощи тегов ). Каждое определение идет сразу за термином, который оно поясняет.

Давайте рассмотрим это на примере.

Допустим, мы хотим дать некоторую информацию о кодинге, сплетнях (англ. gossip — сплетни, сплетничать) и сне.

Для начала мы ставим тег . Затем прописываем попарно теги и для кодинга, сплетен и сна соответственно.

 
Coding
 
An activity to keep you happy, even in sleep.
 
Gossiping
 
Can't live without it.
 
Sleeping
 
My all time favorite.
 



See the Pen Description List by Tapas Adhikary (@atapas) on CodePen.

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

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

Как создать хедер страницы при помощи элементов списка

Давайте теперь рассмотрим практический пример использования списков на веб-странице. Мой любимый — применение элементов списка в хедере.

Давайте создадим очень простой хедер с лого и тремя ссылками: Home, Products и About Us. наша HTML-структура будет выглядеть так:

Здесь мы взяли неупорядоченный список с тремя элементами для ссылок на страницы Home, Products и About Us. Вы также видите span -элемент с текстом Logo, который обозначает лого. Здесь позже можно будет использовать подходящую картинку.

На данный момент наш хедер выглядит так:



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

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



Опять же, вы можете попробовать что-то поменять в этом коде и посмотреть, что будет.

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

Источник

HTML Списки

HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:

• – нумерованный (с помощью цифр или букв) список, каждый элемент которого имеет порядковый номер (букву);
• – маркированный (не нумерованный) список, рядом с каждым элементом которого помещается маркер (а не цифровые или буквенные символы, обозначающие порядковый номер);
• – список определений состоит из пар «имя/значение», в том числе терминов и определений.

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег имеет следующий синтаксис:

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

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

Пошаговая инструкция

1. Достать ключ
2. Вставить ключ в замок
3. Повернуть ключ на два оборота
4. Достать ключ из замка
5. Открыть дверь
1. Достать ключ
2. Вставить ключ в замок
3. Повернуть ключ на два оборота
4. Достать ключ из замка
5. Открыть дверь

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

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

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

Пример: Применение атрибутов type и start.

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Читайте также:  Simple Mail