Чотирирівневий упорядкований список html. Маркований список у HTML. Стандартні маркери для маркованого списку

Одним із типів списків, реалізованих у мові HTML, є маркований список. Інакше списки такого типу називають ненумерованими чи невпорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега

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

Теги
і

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

Кожен елемент списку має починатись тегом

(LI – List Item, елемент списку). Тег
не потребує відповідного закриває тегу, хоча його наявність у принципі не забороняється. Браузери зазвичай при відображенні документа починають кожен новий елемент списку з нового рядка.
Наведених відомостей достатньо для побудови елементарного маркованого списку. Наведемо приклад HTML-документа, який використовує маркований список, відображення якого браузером показано на рис. 2.1.
Приклад маркованого списку
Знаки зодіаку:
- Овен
- Телець
- Близнюки
- Діва
- Терези
- Скорпіон
- Стрілець
- До озер
- Водолій
- Риби
Мал. 2.1.Відображення браузером маркованого списку
Зауважимо, що окрім елементів списку, що відзначаються тегом

, можуть бути й інші HTML-елементи. У наведеному вище прикладі одним з таких елементів є звичайний текст, що не є пунктом списку, а роль його заголовка.

Примітка

У деяких підручниках з мови HTML зустрічається вказівка, що для завдання заголовка списку слід використовувати тег-контейнер (LH – List Header, заголовок списку). В даний час цей тег не розпізнається жодним з найпоширеніших браузерів і не входить до специфікації HTML. Таким чином, його застосування стає безглуздим, хоч і не призведе до будь-яких помилок.

У тезі

Параметр COMPACT записується без значень і застосовується для вказівки браузеру, що список слід виводити в компактному вигляді. Наприклад, може бути зменшено шрифт або відстань між рядками списку тощо.

Примітка

В даний час наявність параметра COMPACT у тезі

не впливає на відображення списків провідними браузерами. Тому застосування даного параметра безглуздо, тим більше, що його вживання не рекомендується специфікацією HTML 4.0.

Параметр TYPE може приймати такі значення: disc, circle та square. Цей параметр використовується для примусового завдання типу маркерів списку. Конкретний вид маркера буде залежати від браузера. Типовими варіантами відображення є такі:

TYPE = disc – маркери відображаються зафарбованими кружками; TYPE = circle – маркери відображаються не зафарбованими кружками; TYPE = square – маркери відображаються зафарбованими квадратиками. Приклад запису:

Значення, яке використовується за замовчуванням, є TYPE = disc. Для вкладених маркованих списків першому рівні за замовчуванням використовується значення disc, другою - circle, третьому і далі - square. Саме так робиться в останніх версіях браузерів Netscape та Internet Explorer. Зауважимо, що інші браузери можуть інакше відображати маркери. Наприклад, у специфікації HTML 4.0 для виду маркера, що відображається при значенні TYPE = square, вказується квадратик (square outline).

Параметр TYPE з тими самими значеннями можна використовуватиме вказівки виду маркерів окремих елементів списку. Для цього параметр TYPE з відповідним значенням можна вказувати в тезі елемента списку

.
Приклад запису:

Примітка

Браузери по-різному інтерпретують вказівку виду маркера окремого елемента списку. Браузер Netscape змінює вигляд маркера для цього і всіх наступних, доки не зустрінеться чергове перевизначення виду маркера. Браузер Internet Explorer змінює вигляд маркера лише для цього елемента.

Графічні маркери списку

Як маркер списку можна використовувати графічні зображення, що широко застосовується для створення привабливих, красиво оформлених HTML-документів. Насправді, така можливість не надається безпосередньо мовою HTML, а реалізується дещо штучно. Це зовсім не означає, що так робити не рекомендується або погано, а лише означає, що тут не застосовуватимуться ніякі спеціальні мовні конструкції HTML.

Щоб зрозуміти ідею, необхідно розібратися у механізмі реалізації списків на сторінках HTML. Виявляється, що тег списку

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

. Достатньо буде перед кожним елементом списку вставити бажане графічне зображення. Єдиним завданням, яке потрібно при цьому вирішити, буде відокремлення елементів списку один від одного. Для цього можна використовувати теги абзацу

Або примусового перекладу рядка
. Приклад реалізації списку із графічними маркерами, відображення якого представлено на рис. 2.2 показаний нижче:

який буде передано лише один раз. Розміри файлу, що містить невелике зображення, також дуже незначні.

Примітка

Методи створення списків із графічними маркерами обговорюються у свою чергу у розділі 8.

Нумеровані списки є набір елементів з їх порядковими номерами. Вид та тип нумерації залежить від параметрів елемента

арабські цифри (1, 2, 3, ...);
арабські цифри з нулем попереду для цифр менше десяти (01, 02, 03, ..., 10);
великі латинські літери (А, В, С, ...);
малі латинські літери (а, b, с, ...);
римські цифри у верхньому регістрі (I, II, III, ...);
римські цифри у нижньому регістрі (i, ii, iii, ...);
вірменська нумерація;
грузинська нумерація.

З практичної точки зору принципи відображення елементів маркованого списку можуть аналогічним способом застосовуватися і до нумерованого списку. Але враховуючи, що ми маємо справу з перерахуванням, існують деякі особливості, про які йтиметься далі.

Нумерація списку

Допускається починати список із будь-якого номера; для цієї мети застосовується атрибут start елемента

. Як значення вказується будь-яке ціле позитивне число. При цьому неважливо, який тип нумерації встановлено, навіть як список використовуються латинські літери. Якщо одночасно для списку застосовуються атрибути start і value , останній має більшу перевагу, і нумерація відображається з числа, вказаного value , як показано в прикладі 1.

Приклад 1. Зміна нумерації списку

Списки

Слід ретельно подбати про своє робоче місце.
Освітлення в приміщенні відрегулювати таким чином, щоб джерело світла знаходилося збоку або позаду оператора.
Для уникнення медичних ускладнень стілець рекомендується вибирати з м'яким сидінням.

Перший елемент списку в даному прикладі буде починатися з римської цифри IV, оскільки вказано атрибут start="4" , потім іде номер V, а останній елемент слідує не по порядку і призначається номером X (рис. 1).

Мал. 1. Римські цифри у списку

Написання чисел

За замовчуванням нумерований список має певний вигляд: спочатку йде число, потім точка і після цього через пробіл відображається текст. Така форма написання наочна і зручна, але деякі розробники вважають за краще бачити інший спосіб оформлення нумерації списків. А саме, щоб замість крапки йшла дужка, що закриває, як продемонстровано на рис. 2 або щось подібне.

Мал. 2. Вид нумерованого списку зі дужкою

Стилі дозволяють поміняти вид нумерації списків за допомогою властивостей content та counter-increment. Спочатку для селектора ol потрібно встановити counter-reset : item , це потрібно для того, щоб нумерація в кожному новому списку починалася заново. Інакше нумерація буде продовжена і замість 1,2,3 можна буде побачити 5,6,7. Значення item – це унікальний ідентифікатор лічильника, ми його вибираємо самі. Далі необхідно сховати вихідні маркери через стильову властивість list-style-type зі значенням none.

Властивість content, як правило, працює у поєднанні з псевдоелементами :: after і :: before. Так, конструкція li::before говорить, що перед кожним елементом списку необхідно додати якийсь зміст (приклад 2).

Приклад 2. Створення власної нумерації

Li::before (content: counter(item) ")"; /* Додаємо до числа дужку */ counter-increment: item; /* Задаємо ім'я лічильника */ )

Властивість content із значенням counter(item) виводить число; додаючи дужку, як показано в даному прикладі, отримаємо потрібний вид нумерації. counter-increment необхідний збільшення номера списку на одиницю. Зверніть увагу, що скрізь використовується той самий ідентифікатор з ім'ям item . Остаточний код показаний у прикладі 3.

Приклад 3. Зміна типу списку

Списки

Перший
Другий
Третій
Четвертий

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

Content: "[" counter(item) "] ";

Список з російськими літерами

Нумерований список є з латинськими літерами, а ось російських літер для списку немає. Їх можна додати штучно, скориставшись наведеним вище прийомом. Оскільки нумерація виробляється через стилі, сам перелік залишається вихідним, до нього лише додається обраний клас, назвемо його cyrilic (приклад 4).

Приклад 4. Код створення списку

Один
Два
Три

Додавання літер здійснюється за допомогою псевдоелементу ::before та властивості content. Оскільки в кожному рядку має бути своя літера, скористаємося псевдокласом :nth-child(1), у дужках пишеться номер літери. Першою літерою, природно, йде А, другою - Б, третьою - В і т. д. Весь цей набір додається до селектора наступним чином (приклад 5).

Приклад 5. Застосування псевдокласу: nth-child

Cyrilic li:nth-child(1)::before (content: "а)"; ) .cyrilic li:nth-child(2)::before (content: "б)"; ) .cyrilic li:nth-child(3)::before ( content: "в)"; )

У цьому прикладі після кожної літери йде кругла дужка, всі літери малі. Ви можете визначити свій вид нумерації списку, наприклад вона може містити великі літери з точкою, з однією або двома дужками або тільки літери. На відміну від стандартної нумерації, ми тут вільні робити що завгодно. Списку з десяти літер має вистачити практично для всіх ситуацій, але якщо цього раптово виявиться мало, нічого не заважає розширити наш список, включивши до нього хоч усі літери алфавіту.

Остаточно налаштовуємо вирівнювання та положення літер, за бажанням вказуємо розмір шрифту, колір та інші параметри (Приклад 6).

Приклад 6. Список із російськими літерами

список

Борщ
Котлети із щуки
Куліб'яка
Гриби у сметані
Млинці з ікрою
Квас

Результат цього прикладу показаний на рис. 3.

У мові HTML передбачено спеціальний набір тегів для представлення інформації як списків. Списки є однією з найчастіше вживаних форм представлення даних як і електронних документах, і у друкованих. Зі списками ми зустрічаємося практично щодня, - це може бути список необхідних покупок у магазині, учнів у класі або просто справ, які необхідно виконати. Можливість організації спискових структур є в багатьох текстових редакторах, зокрема, потужний текстовий процесор Microsoft Word має зручні засоби форматування списків різного виду (можливості створення HTML-списків за допомогою Microsoft Word обговорюються в розділі 8). Наведемо ряд випадків, для яких використання списків досить зручне:

Об'єднання фрагментів інформації в єдину структуру для надання зручного для читання виду.
Опис складних покрокових процесів.
Розташування інформації у стилі змісту, пункти якого вказують на відповідні розділи документа.

Зауважимо, що наведені вище пункти якраз і організовані як списковий структури.

У мові HTML передбачені такі основні типи списків: маркований, нумерований та список визначень. Для реалізації списків різних типів використовуються такі теги:

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

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

Одним із типів списків, реалізованих у мові HTML, є маркований список. Інакше списки такого типу називають ненумерованими або

невпорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега

Теги

і<LI >

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

Кожен елемент списку повинен починатись тегом

(LI – List Item, елемент списку). Тег
не потребує відповідного закриває тегу, хоча його наявність у принципі не забороняється. Браузери зазвичай при відображенні документа починають кожен новий елемент списку з нового рядка.

Наведених відомостей достатньо для побудови елементарного маркованого списку. Наведемо приклад HTML-документа, який використовує маркований список, відображення якого браузером показано на рис. 2.1.

Приклад маркованого списку
Мал. 2.1.Відображення браузером маркованого списку

Зауважимо, що окрім елементів списку, що відзначаються тегом

Примітка

У деяких підручниках з мови HTML є вказівка, що для завдання заголовка списку слід застосовувати тег-контейнер (LH – List Header, заголовок списку). В даний час цей тег не розпізнається жодним з найпоширеніших браузерів і не входить до специфікації HTML. Таким чином, його застосування стає безглуздим, хоч і не призведе до будь-яких помилок.

У тезі

Примітка

В даний час наявність параметра COMPACT у тэзі

.

Приклад запису:

Примітка

Графічні маркери списку

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

Якщо нам потрібно побудувати список з графічними маркерами, то можна взагалі обійтися без тегів.

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

Знаки зодіаку:

Овен

Телець

Близнюки

Рак

Лев

Діва

Терези

Скорпіон

Стрілець

Козеріг

Водолій

Риби

Мал. 2.2.Маркований список із графічними маркерами

У наведеному прикладі як маркер елементів списку використовується графічний файл Green_ball.gif. Зауважимо, що використання графіки на HTML-сторінках може значно збільшити обсяг інформації, що передається. Однак у цьому випадку це збільшення вкрай незначне. Тут для всіх маркерів використовується той самий файл,

який буде передано лише один раз. Розміри файлу, що містить невелике зображення, також дуже незначні.

Примітка

Методи створення списків із графічними маркерами обговорюються своєю чергою у розділі 8 .

Нумерований перелік

Іншим типом списків, реалізованих мовою HTML, є нумерований список. Інакше списки такого типу називають упорядкованими. Остання назва часто використовується як формальний переклад назви відповідного тега

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

Теги

Для створення нумерованого списку слід використовувати тег-контейнер, всередині якого розміщуються всі елементи списку. Теги списку, що відкриває та закриває, забезпечують переклад рядка до та після списку, відокремлюючи таким чином список від основного вмісту документа.

Як і для маркованого списку кожен елемент нумерованого списку повинен починатися тегом

Наведемо приклад HTML-документа, який використовує нумерований список, відображення якогобраузером показано на рис. 2.3.

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

Найбільш яскраві зірки, видимі із Землі:

Сіріус
До анопуса
Арктур
Альфа Центавра
Вега
До апелла
Рігель
Проціон
Ахернар
Бета Центавра
Ветельгейзе
Альдебаран

. . .
Міцар

. . .
Полярна

Мал. 2.З.Нумерований перелік

У тезі

Параметр COMPACT має той самий сенс, що й у маркованих списків. Параметр TYPE використовується для визначення типу нумерації списку. Може приймати такі значення:

TYPE = А - задає маркери у вигляді великих латинських літер;

TYPE = а - задає маркери у вигляді малих латинських літер;

TYPE = I - задає маркери як великих римських цифр;

TYPE = i - задає маркери як маленьких римських цифр;

TYPE = 1 – задає маркери у вигляді арабських цифр.

За замовчуванням використовується значення TYPE = 1, тобто нумерація за допомогою арабських цифр. Це стосується й вкладених нумерованих списків. Тут, на відміну від маркованих списків, стандартні браузери не роблять різної нумерацію на різних рівнях вкладеності списків. Зауважимо, що після номера елемента списку завжди додатково виводиться знак "крапка".

Параметр TYPE з тими самими значеннями можна використовуватиме вказівки вила нумерації окремих елементів списку. Для цього параметр TYPE з відповідним значенням можна вказувати в тезі елемента списку

.

Приклад запису:

Параметр START тега

Такий запис визначає нумерацію списку з великої латинської літери "E". Для інших видів нумерації запис START=5 задасть нумерацію відповідно з числа "5", римської цифри "V" і т.д.

Зміна виду нумерації списку та значень номерів допустимо проводити і для будь-якого елемента списку. Тег

для нумерованих списків дозволяє використовувати параметри TYPE та VALUE. Параметр TYPE може приймати такі ж значення, як і для тега

Пример запису:

.

Примітка

Браузери по-різному інтерпретують вказівку виду нумерації окремого елемента списку. Браузер Netscape змінює вигляд нумерації для даного елемента та всіх наступних, доки не зустрінеться чергове перевизначення. Браузер Internet Explorer змінює вигляд номера лише для цього елемента.

Значення параметра VALUE тега
- дозволяє змінити номер даного елемента списку. При цьому змінюється нумерація та всіх наступних елементів. Типовим застосуванням є списки з пропуском деяких елементів. Приклад такого списку наведено вище (рис. 2.3). У ньому дається упорядкований список найбільш яскравих зірок, в якому на 58 і 75 місцях розташовані зірки, добре видимі в наших широтах (Міцар - найбільш яскрава зірка сузір'я Велика Ведмедиця, а Полярна зірка - Малої Ведмедиці).

Наведемо ще один оригінальний приклад використання нумерації різних видів. У нижченаведеному HTML-коді задані три списки з різною нумерацією. Для зручності перегляду кожен зі списків поміщений в окрему комірку таблиці. Усі три списки ідентичні і відрізняються лише видом нумерації: у першому стовпці таблиці – арабські цифри, у другому – римські, а у третьому нумерація ведеться латинськими літерами. Звернемо увагу, що елементи списку порожні, тобто після будь-якого тега

немає жодних даних. Приклад такого роду можна використовувати як таблицю відповідності між записом чисел арабськими та римськими цифрами. Виявляється, що будь-який браузер, який підтримує списки, можна використовувати як генератор такої таблиці (мал. 2.4), варто лише набрати HTML-код, що наводиться. Нумерація римськими цифрами правильно працює до значення 3999. Вивчаючи правий стовпець, можна зрозуміти, як виконується нумерація латинськими літерами. За вичерпанням однолітерної нумерації (від А до Z) як наступний номер береться перший дволітерний номер - АА і т. д.

Використання різного типу нумерації у списках

. . .

. . .

. . .

Мал. 2.4.Різні типи нумерації HTML-списків

Список визначень

Списки визначень, також називані словниками визначень спеціальних термінів, є особливим видом списків. На відміну від інших типів списків кожен елемент списку визначень завжди складається з двох частин. У першій частині елемента списку записується термін, що визначається, а в другій частині - текст у формі словникової статті, що розкриває значення терміна.

Списки визначень задаються за допомогою тега-контейнера

(Definition Term) позначається термін, що визначається, а тегом

(Definition Description) – абзац з його визначенням. Для тегів

і

можна не записувати відповідні теги, що закривають.

Загалом, список визначень записується так:

Термін

Визначення терміна

У тексті після тега

не можуть використовуватися елементи рівня блоку, такі як, наприклад, абзаци теги
Або заголовків
-
. Як правило, текст визначається терміну повинен розташовуватися в одному рядку. Текст, що містить визначення терміна, виводиться, починаючи з наступного рядка (або через рядок для деяких браузерів) після визначення терміну з відступом праворуч. В інформації, поміщеній після тега
, можуть розташовуватись елементи рівня блоку. Звідси випливає, зокрема, що списки ухвал можуть бути вкладеними.

У тезі
може бути вказано параметр COMPACT, призначення якого аналогічне до інших списків, що описуються вище.

Наведемо приклад HTML-документа, в якому використано перелік визначень:

Приклад списку визначень

Класифікація типових темпераментів людини,
заснована

на поглядах Гіппократа

Флегматик

Пасивний, дуже працездатний, що повільно пристосовується;
настрій стійкий, мало піддається зовнішньому впливу;
млявість емоційних реакцій та повільність у вольовій діяльності

Сангвінік

Активний, енергійний, легко пристосовується,
жвавість та рухливість емоційних реакцій, швидкість та сила вольових проявів

Холерік

Активний, дуже енергійний, наполегливий;
поривчастість і сила емоційних реакцій, бурхливі вольові прояви

Меланхолік

Пасивний, що легко втомлюється, важко пристосовується,-
слабкість вольових проявів та переважання пригніченого настрою, невпевненість у собі

Відображення наведеного HTML-документа у браузері показано на рис. 2.5.

Мал. 2.5.Список визначень (нагадує групу статей у словнику)

Списки типу
і

Списки типу
і в даний час практично не використовуються, хоча їхня підтримка провідними браузерами досі забезпечується. У специфікації HTML 4.0 обидва ці типи списку відзначені як скасовані. Замість них пропонується використовувати марковані списки, що задаються тегом
.

Спочатку списки цих типів замислювалися як компактніші порівняно із звичайними маркованими списками. Відповідно до правил запису елементів цих списків у них не дозволялося використовувати блокові елементи, що означає неможливість реалізації вкладеності списків такого типу. Кожен елемент списку був один рядок тексту.

Для списків типу
планувалося ввести обмеження на довжину тексту елемента списку (24 символи). Таке обмеження дозволило б виводити

списки типу
у вигляді, подібному до висновку списку каталогів в операційних системах UNIX і MS-DOS при використанні ключа /W (у кілька колонок). Крім того, для елементів списків такого типу не відображалися маркери.

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

Вкладені списки

Бувають випадки, коли елемент списку одного типу потрібно включити цілий список такого ж типу або іншого. При цьому буде організовано багаторівневі або вкладені списки. У HTML припустимо довільне вкладення різних типів списків, проте за їх організації слід виявляти акуратність.

Нижче наводиться HTML-код документа з вкладеними списками, відображення якого показано на рис. 2.6. У цьому прикладі кожен елемент маркованого списку вкладено свій нумерований список.

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

Супутники деяких планет

Земпі

Місяць

Mapc

Фобос

Деймос

Уран

Аріель

Умбріель

Титанія

Оберон

Міранда

Нептун

Тритон

Нереїда

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

Перший пункт

Другий пункт

Третій пункт

Якщо не вказувати жодних додаткових атрибутів та просто написати тег
, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...), як показано на прикладі 11.3.

Приклад 11.3. Створення нумерованого списку
Нумерований перелік
Робота з часом

створення пунктуальності (ніколи не спізнюватиметеся);

лікування від пунктуальності (ніколи нікуди не поспішатимете);

зміна сприйняття часу та годин.

Результат цього прикладу показаний на рис. 11.3.

Мал. 11.3. Вид нумерованого списку

Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу та ліворуч від тексту.

Як нумеруючі елементи можуть виступати наступні значення:

арабські числа (1, 2, 3, ...);

великі латинські літери (A, B, C, ...);

малі латинські літери (a, b, c, ...);

великі римські числа (I, II, III, ...);

малі римські числа (i, ii, iii, ...).

Для вказівки типу нумерованого списку застосовується атрибут type тега
. Його можливі значення наведено у табл. 11.2.
Табл. 11.2. Типи нумерованого списку
Тип списку Код HTML Приклад
Арабські числа

1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Великі літери латинського алфавіту

A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Рядкові літери латинського алфавіту

a. Чебурашка
b. Крокодил Гена
с. Шапокляк
Римські числа у верхньому регістрі

I. Чебурашка
ІІ. Крокодил Гена
ІІІ. Шапокляк
Римські числа у нижньому регістрі

i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк
Щоб почати список із певного значення, використовується атрибут start тега
. При цьому немає значення, який тип списку встановлений за допомогою type , атрибут start однаково працює і з римськими і з арабськими числами. У прикладі 11.4 показано створення списку з використанням римських цифр у верхньому регістрі, що починаються з восьми.

Приклад 11.4. Нумерація списку
Римські числа

Король Магнум XLIV

Король Зігфрід XVI

Король Сигізмунд XXI

Король Хусбрандт I

Результат цього прикладу показаний на рис. 11.4.

Мал. 11.4. Нумерований список із римськими числами

У HTML за організацію списків відповідає цілий набір тегів, організація яких має відповідати певним правилам структуризації даних.

Стандартом п'ятої версії html підтримується 3 види списків: нумеровані списки, марковані списки та списки визначень. Також надається можливість вкладати списки один одного, створюючи вкладені багаторівневі списки .

Нумерований перелік

Нумерований перелік- це набір елементів (пунктів списку), які мають певну послідовність. Кожен пункт нумерованого списку має унікальний маркер, що вказує на порядок проходження даного пункту щодо інших пунктів списку. За промовчанням маркерами пунктів нумерованого списку є числа. Перший пункт йде під числом 1, другий під числом 2 тощо.

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

Для створення нумерованих списків HTML використовується тег
, всередині якого розміщуються елементи списку даних. Кожен пункт списку вказується за допомогою тега
:

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

Кава

Чай

Молоко

Спробувати
Примітка: тег
як дочірні елементи може містити тільки теги
, тобто весь вміст нумерованого списку має розміщуватися всередині елементів
. Тег
, своєю чергою, немає обмежень на вміст, у ньому можна розміщувати абзаци, картинки, посилання, таблиці, інші списки тощо.

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

Маркований список- це ненумеровані, тобто невпорядковані списки елементів, послідовність яких немає жодного значення. Всі пункти маркованого списку мають однакові маркери, за замовчуванням вони відображаються у вигляді маленьких чорних кіл.

Для створення маркованих списків HTML застосовується тег
, всередині якого розташовуються елементи самого списку (як і у випадку з нумерованими списками, використовується тег
, який містить у собі весь відображуваний вміст списку):

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

Кава

Чай

Молоко

Спробувати
Види маркерів

Ви можете змінити види маркерів нумерованого списку за допомогою атрибута type . Цей атрибут підтримує п'ять видів маркерів:

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

Зміна маркерів у списків:
заголовок сторінки
Нумерований список з атрибутом type="a":

Яблука
Банани
Лимони

Нумерований список з атрибутом type="I":

Яблука
Банани
Лимони

Види маркерів маркованих списків:

Яблука
Банани
Лимони

Яблука
Банани
Лимони

Спробувати
CSS властивість list-style-type крім видів маркерів для маркованих списків, має безліч різних видів маркерів і для нумерованих списків. Але не завжди зміни одного стандартного виду маркера на інший буває достатньо, щоб красиво оформити список. Для оформлення списків краще використовувати CSS, який дозволяє не тільки змінювати вид маркера, але й замінювати маркери на картинки, контролювати їх розташування та керувати відступом. Як все це робити ви можете подивитися.

Горизонтальний перелік

Якщо ви використовуєте HTML список для створення горизонтального меню, вам потрібно буде розмістити елементи списку один за одним на одному рядку. Засобами HTML це зробити не вдасться, тому потрібно буде скористатися CSS.

Щоб створити горизонтальний список, потрібно для пунктів списку прописати CSS властивість display зі значенням inline або inline-block , залежно від того, які властивості ви збираєтеся використовувати.
заголовок сторінки
Нумерований перелік

Яблука
Банани
Лимони

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

Яблука
Банани
Лимони

Спробувати
Після цього всі пункти списку вишикуються в один рядок. Зверніть увагу, що пункти списку пропадуть маркери і між ними не буде навіть пробілу, але відступ ліворуч у списку залишиться.

Як горизонтальний список перетворити на горизонтальне меню, ви можете переглянути .

Тип списку	Код HTML	Приклад
Арабські числа		1. Чебурашка 2. Крокодил Гена 3. Шапокляк
Великі літери латинського алфавіту		A. Чебурашка B. Крокодил Гена C. Шапокляк
Рядкові літери латинського алфавіту		a. Чебурашка b. Крокодил Гена с. Шапокляк
Римські числа у верхньому регістрі		I. Чебурашка ІІ. Крокодил Гена ІІІ. Шапокляк
Римські числа у нижньому регістрі		i. Чебурашка ii. Крокодил Гена iii. Шапокляк

Чотирирівневий упорядкований список html. Маркований список у HTML. Стандартні маркери для маркованого списку

Теги і

Графічні маркери списку

Нумерація списку

Написання чисел

Список з російськими літерами

-

Класифікація типових темпераментів людини, заснована на поглядах Гіппократа

Нумерований перелік

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

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

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

Види маркерів

Нумерований список з атрибутом type="a":

Нумерований список з атрибутом type="I":

Види маркерів маркованих списків:

Горизонтальний перелік

Нумерований перелік

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

Теги
і

Класифікація типових темпераментів людини,
заснована

на поглядах Гіппократа