Пронумерований список у html. Нумеровані списки. Нумерований список html сторінки
HTML підтримує списки трьох різних типів, для кожного з яких передбачені свої власні теорії:
Нумеровані списки
У нумерований список браузер автоматично вставляє номери елементів по порядку, починаючи з певного значення (зазвичай 1). Це дозволяє вставляти та видаляти пункти списку, не порушуючи нумерації, оскільки решта номерів автоматично буде перерахована.
Нумеровані списки створюються за допомогою блокового елемента
(Від англ. Ordered List - нумерований список). Далі у контейнер
для кожного пункту списку міститься елемент
Тег
має наступний синтаксис:
- елемент 1
- елемент 2
- елемент 3
Елементи нумерованого списку повинні містити кілька елементів списку, як показано на прикладі:
Приклад: Нумерований список
- Спробуй сам »
Покрокова інструкція
- Дістати ключ
- Вставити ключ у замок
- Повернути ключ на два обороти
- Дістати ключ із замку
- Відкрити двері
Покрокова інструкція
- Дістати ключ
- Вставити ключ у замок
- Повернути ключ на два обороти
- Дістати ключ із замку
- Відкрити двері
Іноді під час перегляду існуючих кодів HTML ви будете зустрічати аргумент typeв елементі
, який використовується для вказівки типу нумерації (літери, римські та арабські цифри тощо). Синтаксис:
- A – великі латинські літери (A, B, C . . .);
- a - малі латинські літери (a, b, c . . .);
- I – великі римські цифри (I, II, III…);
- i - маленькі римські цифри (i, ii, iii...);
- 1 - арабські цифри (1, 2, 3 . . .) (застосовується за умовчанням).
- наступним чином:
-
У цьому випадку послідовна нумерація списку перерветься і з цього пункту почнеться нумерація заново, в даному випадку з семи.
Приклад використання атрибуту valueтега
У цьому прикладі "Перший пункт списку" матиме номер 1, "Другий пункт списку" – номер 7, а "Третій пункт списку" – номер 8.
Форматування нумерованих списків за допомогою CSS
Для зміни номерів списків варто використовувати властивість list-style-typeтаблиці стилів CSS:
- . Браузер формує відступ для кожного пункту списку та автоматично відображає маркери.
- Перший пункт
- Другий пункт
- Третій пункт
- не обов'язково розміщувати лише текст, допустимо помістити будь-який елемент потокового контенту (посилання, абзаци, зображення та ін.)
- допустимо створення вкладеного списку або списку другого рівня. Для вкладення списку опишіть новий список усередині елемента
- вже наявного списку. При вкладенні одного маркованого списку в інший браузер автоматично змінює стиль маркера списку другого рівня. Будь-який список може бути вкладений в інший. Наступний приклад демонструє структуру маркованого списку, вкладеного у другий пункт нумерованого.
- Спробуй сам »
- Понеділок
- Надіслати пошту
- Візит до редактора
- Вибір теми
- Дкаративне оформлення
- Заключний звіт
- Вечірній перегляд повідомлень
- Вівторок
- Переглянути графік
- Надіслати зображення
- Середа...
- Понеділок
- Надіслати пошту
- Візит до редактора
- Вибір теми
- Дкаративне оформлення
- Заключний звіт
- Вечірній перегляд повідомлень
- Вівторок
- Переглянути графік
- Надіслати зображення
- Середа...
- Спробуй сам »
- Coffee
- Coffee
- Coffee
- Coffee
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Coffee
- Milk
- Спробуй сам »
- Телець
- Близнюки
- Овен
- Телець
- Близнюки
- (від англ. Definition Term - слово, термін) і
- (Від англ. Definition Description - опис визначається терміну).
- Перший термін
- Опис першого терміна
- Другий термін
- Опис другого терміна
- Спробуй сам »
- Всесвітня павутина
- - Від англ. World Wide Web (WWW) — розподілена система, що надає доступ до пов'язаних між собою документів, розташованих на різних комп'ютерах, підключених до Інтернету.
- Інтернет
- - Сукупність мереж, що застосовують єдиний протокол обміну для передачі інформації.
- Сайт
- — набір окремих веб-сторінок, пов'язаних між собою посиланнями та єдиним оформленням.
- Перший пункт списку
- Другий пункт списку
- Третій пункт списку
- , то автоматично перед ним ставить .
- 1 – арабські цифри;
- A - великі;
- a - малі латинські літери;
- I - великі римські цифри;
- i - малі римські цифри.
- :
Нумерований список:
- Кава
- Чай
- Молоко
Примітка: тег
- як дочірні елементи може містити тільки теги
- , тобто весь вміст нумерованого списку має розміщуватися всередині елементів
- . Тег
- , своєю чергою, немає обмежень на вміст, у ньому можна розміщувати абзаци, картинки, посилання, таблиці, інші списки тощо.
Маркований список
Маркований список- це ненумеровані, тобто неупорядковані списки елементів, послідовність яких немає жодного значення. Всі пункти маркованого списку мають однакові маркери, за замовчуванням вони відображаються у вигляді чорних кіл.
Для створення маркованих списків 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 , залежно від того, які властивості ви збираєтеся використовувати.
заголовок сторінки Нумерований список
- Яблука
- Банани
- Лимони
Маркований список:
- Яблука
- Банани
- Лимони
Після цього всі пункти списку вишикуються в один рядок. Зверніть увагу, що пункти списку пропадуть маркери і між ними не буде навіть пробілу, але відступ ліворуч у списку залишиться.
Як горизонтальний список перетворити на горизонтальне меню, ви можете переглянути .
Різниця лише тому, що цей тег суворо зроблено для нумерації списків. Назва тега походить від англійського скорочення "Ordered List" - нумерований список.
Синтаксис тега
- Елемент #1
- Елемент #2
- Елемент #3
- ...
Де атрибут type="value" може приймати такі значення
- A – задає маркери у вигляді великих латинських літер (A, B, C..);
- a - задає маркери у вигляді малих латинських літер (a, b, c.);
- I – задає маркери у вигляді великих римських цифр (I, II, III, IV..);
- i - задає маркери як маленьких римських цифр (i, ii, iii, iv..);
- 1 (за замовчуванням) – задає маркери у вигляді арабських цифр (1, 2, 3..);
Атрибут start="value" визначає початкове значення (стартове значення) звіту.
Атрибут reversed задає зворотний рахунок (у разі потреби).
Тег
- вимагає обов'язкового використання тега, що закриває
Для формування елементів списку використовується парний тег
- , який містить у собі весь відображуваний вміст списку):
- . Між тегами, що відкривають і закривають, розташовуються окремі слова, фрази, абзаци, зображення, шматки коду і багато іншого, що є вмістом маркованого списку.
Примітка
У списку є можливість змінювати рахунок на свій. Для цього є спеціальний атрибут value="" у тега
- , якому надається якесь числове значення. Наприклад
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #10
- Елемент #11
- Елемент #12
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #1
- Елемент #2
- Елемент #3
- .
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #4
Ось як це виглядає на сторінці:
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #4
Приклад 5. Реверсивний нумерований список у html
Нижче наведено приклад реверсивного нумерованого списку (рахунок у зворотному порядку).
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #4
Ось як це виглядає на сторінці:
- Елемент #1
- Елемент #2
- Елемент #3
- Елемент #4
Списки визначень поєднують певні об'єкти та їх визначення у списку. Наприклад, якщо ви хочете додати визначення до об'єктів у списку покупок, можна зробити це так:
молоко білий рідкий молочний продукт. хліб Продукт харчування, який отримує випічка з борошна. вершкове масло жовтий твердий молочний продукт. кавові зерна Насіння плодів деяких кавових дерев.
Кожне визначення та термін є групою визначення (або групою ім'я-значення). Можна мати будь - яку необхідну кількість груп визначень , але у кожній групі має бути як мінімум один термін і як мінімум одне визначення . Не можна мати термін без визначення чи визначення терміна.
Можна асоціювати більше терміну з одним визначенням , чи навпаки. Наприклад, термін "кава" може мати кілька значень, і можна показати їх одне за одним:
кава напій, приготований зі смажених, мелених кавових зерен чашка кави зустріч, під час якої п'ють каву колір від середньої до темно-коричневої
Альтернативно можна мати більше одного терміна з одним визначенням. Це використовується, щоб показати варіації терміну, які мають одне значення:
содова шипучка газування колу Солодкий, насичений вуглекислим газом, напій
Списки визначень відрізняються від інших видів списків, оскільки вони використовують терміни, що визначаються, і описи визначень замість об'єктів списку.
Тому списки визначень використовують одну пару елементів
Простий список визначень одного терміна з одним визначенням виглядатиме так:
- Термін
- Визначення терміна
- Термін
- Визначення терміна
- Термін
- Визначення терміна
Який виводиться так:
Термін Визначення терміна Термін Визначення терміна
У цьому прикладі ми поєднуємо більше одного терміна з визначенням і навпаки:
- Термін
- Визначення терміна
- Термін
- Термін
- Визначення, яке застосовується до обох попередніх термінів
- Термін, який може мати обидва наступні визначення
- Одне визначення терміна
- Інше визначення терміна
Що буде представлено наступним чином:
Термін Визначення терміна Термін Термін Визначення, яке застосовується до обох попередніх термінів Термін, який може мати обидва наступні визначення Одне визначення терміна Інше визначення терміна
Зазвичай не прийнято пов'язувати кілька термінів з одним визначенням, але корисно знати, що це можливо, якщо виникне така потреба.
Вибір типу списку
При прийнятті рішення про використання певного типу списку зазвичай можна вирішити це, задаючи два простих питання:
- Чи визначаються терміни (або з'єднуються інші пари ім'я/значення)?
- Якщо так, використовуйте список .
- Якщо ні, не використовуйте список визначень – перейдіть до наступного питання.
- Чи важливим є порядок елементів списку?
- Якщо так, використовуйте впорядкований список.
- Якщо ні, використовуйте невпорядкованийперелік.
Відмінність між списками HTML та текстом
Можна запитати, у чому різниця між списком HTML і якимось текстом з маркерами чи числами, написаними вручну. Існує кілька переваг використання списку HTML:
- Якщо потрібно змінити порядок елементів списку в упорядкованому списку, ви просто переміщаєте їх у коді HTML . Якщо числа будуть написані вручну, то доведеться все переглянути та змінити число кожного елемента, щоб виправити порядок – що досить нудно, принаймні!
- Використання списку HTML дозволяє правильно оформити стиль списку. Якщо використовується просто великий текст, то виявиться значно важче оформити стиль окремих елементів більш-менш корисним чином.
- Використання списку HTML створює для контенту відповідну семантичну структуру, а не просто "спископодібний" візуальний ефект. Це має важливі переваги, оскільки дозволяє зчитувачам екрана повідомити користувачів з вадами зору, що вони читають список, а не просто прочитати плутану суміш тексту та чисел.
З іншого боку: текст і списки не є тим самим. Використання тексту замість списку потребує більше роботи, і може створювати проблеми читачам документа. Тому, якщо в документі потрібен список, необхідно використовувати правильний список HTML.
Вкладені списки
Елемент списку може містити інший цілий список - він називається вкладеним списком. Це може бути корисним для таких речей як таблиця контенту, такий як на початку лекції:
1. Розділ один 1. Розділ один 2. Розділ два 3. Розділ три 2. Розділ два 3. Розділ три
Ключовим моментом, який треба пам'ятати, є те, що вкладений список повинен належати до одного конкретного елемента списку. Щоб відобразити це в коді, вкладений список міститься всередині цього елемента списку. Код для наведеного вище списку виглядає так:
- Розділ один
- Розділ один
- Розділ два
- Розділ три
- Розділ два
- Розділ три
Зазначимо, що вкладений список починається після елемента
- та тексту, що містить список елемента ("Глава один"); а закінчується перед елементом , що містить список елементів. Вкладені списки часто формують основу для навігаційного меню Web-сайту, оскільки є зручним способом визначення структури Web-сайта.
- Cakes
- Biscuits
- Quickbreads
- Cakes
- Plain Sponge
- Chocolate Cake
- Apple Tea Cake
- Biscuits
- ANZAC Biscuits
- Jam Drops
- Melting Moments
- Breads/quickbreads
- Damper
- Scones
Стилі оформлення нумерованих списків
приклад Значення Опис а, Ь, с lower-alpha Рядкові літери А, В, С upper-alpha Прописні літери i, ii, iii lower-roman Римські цифри, набрані малими літерами I, II, III upper-roman Римські цифри, набрані великими літерами Приклад: Застосування якості CSS list-style-type
Марковані списки
Марковані списки насправді схожі на нумеровані тільки вони не містять послідовної нумерації пунктів. Марковані списки створюються за допомогою блокового елемента
ТегУ наступному прикладі видно, що за замовчуванням перед кожним елементом списку додається невеликий маркер у вигляді забарвленого кружка:
Усередині тега
Вкладені списки
Будь-який список може бути вкладений в інший. Всередині елементаПриклад: Вкладені списки
Форматування маркованих списків
Для зміни зовнішнього вигляду маркера списків варто використовувати властивість list-style-typeтаблиці стилів CSS:
У наступному прикладі розглянуто різні стилі оформлення маркованих списків:
Приклад: Стилі оформлення маркованих списків
Disc:
Circle:
Square:
None:
графічні маркери.
HTML має можливість створити список з графічними маркерами. Одна річ, коли маркерами списку є стандартні кружечки або квадратики, і зовсім інша – коли розробник сам підбирає маркер відповідно до дизайну сторінки. Для того щоб зробити елементи списку красивими, часто використовують маленькі картинки.
Щоб замінити звичайний маркер на графічний, замінимо властивість list-style-typeна властивість list-style-imageі вкажемо URL-адресу картинки:Приклад: Графічні маркери
Знаки зодіаку
Знаки зодіаку
Списки визначень (описів)
Списки визначень дуже зручні для створення, наприклад вашого особистого словника термінів. Кожен пункт списку визначень має дві частини: термін та його визначення.
Ви поміщаєте весь список в елемент
Списки визначень часто використовують у науково-технічних та навчальних виданнях, оформляючи за їх допомогою глосарії, словники, довідники тощо.Загальна структура списку описів має такий вигляд:
У наступному прикладі показано одне з можливих використання списку визначень:
Приклад: Список визначень
Всесвітнє павутиння - від англ. World Wide Web (WWW) — розподілена система, що надає доступ до пов'язаних між собою документів, розташованих на різних комп'ютерах, підключених до Інтернету. Інтернет — сукупність мереж, які використовують єдиний протокол обміну передачі інформації. Сайт — набір окремих веб-сторінок, пов'язаних між собою посиланнями та єдиним оформленням.
За замовчуванням, текст терміну притискається до лівого краю вікна браузера, а опис терміна розташовується нижче та зсувається праворуч.
У мові HTML існує два види списків: нумеровані та ненумеровані. Їхнє створення практично однакове. Навіть теги відрізняються однією символ. Також можна створювати які можуть включати як нумеровані, так і маркерні.
Ці списки можна перетворювати як завгодно. Все залежить від вашої фантазії. Спочатку ми розглянемо стандартні списки, такі ж як у редакторі Word, а потім їх покращуватимемо і оформлятимемо до невпізнанності.
Нумерований список HTML
Звичайний нумерований можна створити за допомогою наступних тегів:
Прості списки виглядають так
Згідно зі стандартами, кожен пункт списку повинен бути всередині тега li, що відкриває і закриває. Але якщо ви не поставите закриває тег, то результат буде таким самим. Обробник дуже розумний. Під час перетворення списку він аналізує теги, що відкривають. Якщо він бачить новий
Таким чином, списки можна робити так, як показано нижче.
Але з погляду фахівців це неправильно.
Ненумеровані (або маркерні) списки створюються так само, тільки замість тега ol, пишеться ul.
Немає цифр або букв - тільки різні символи, які називаються маркерами.
Багаторівневий нумерований список HTML
Багато користувачів цікавить така можливість. Тому слід зазначити, що будь-який нумерований список HTML можна зробити багаторівневим. Додаткові рівні можуть бути такими ж або маркованими.
Щоб створити список, вказаний у прикладі вище, потрібно написати наступне.
Зверніть увагу, що цей код, на відміну перших прикладів, доданий атрибут type. Завдяки йому можна вказати вид сортування як для нумерованих, так маркерних списків.
Для нумерованих вказуємо алфавіт чи тип цифр, а інших випадків - тип маркера.
Якщо ви використовуєте спеціальний HTML-тег, нумерований список може стати будь-яким, яким ви хочете.
Можна вказати атрибут type з будь-яким значенням таблиці. Або в класі стилю css вказати list-style-type із бажаним типом сортування.
Переклад значень досить простий. Досить базових знань англійської мови. Але навіть якщо ви не можете перекласти слова "коло", "квадрат" і т.п., то можна візуально зрозуміти, який буде результат при зазначенні цих значень в атрибуті type.
Для нумерованих списків слід використовувати такі варіанти:
За замовчуванням завжди використовується список з. Тобто, якщо ви нічого не вказали, це рівносильно type="1".
Крім цього, нумеровані списки можна розпочинати з будь-якої бажаної позиції. За замовчуванням – висновок від 1. Але за бажання можна почати хоч зі ста. Для цього потрібно вказати атрибут start із будь-яким значенням.
Крім цього, можна зробити висновок у зворотному порядку. Для цього необхідно написати reversed.
Оформлення списків
Нумерований список HTML можна оформити настільки красиво, що не відразу можна здогадатися, що це звичайний список, а не зображення, зроблене у Photoshop.
Ось приклади гарних списків.
Як видно з прикладу, можна змінювати зовнішній вигляд нумерації та самих елементів.
Створити звичайний список можна так.
У стилях css необхідно вказати оформлення для тегів ol. Зверніть увагу, що в цьому випадку параметри будуть застосовані до всіх списків всього сайту, де використовується цей файл стилів.
Розглянемо спочатку варіант із круглим оформленням списку. Поверніться до списку. Там вказано клас rounded-list. Саме з цим класом треба повозитися, щоб зробити таку красу. Назвати клас ви можете, як хочете.
Тепер розглянемо квадратне оформлення.
Стилі дуже схожі. Різниця в тому, що в першому випадку відбувається заокруглення елемента за допомогою css можливостей.
Професійний верстальник повинен передбачати та розуміти, що не всі користувачі використовують сучасні комп'ютери. Не всі встановлені Windows 7, 8, 10. Існує відсоток користувачів, хто досі сидить на Windows XP і використовує старі версії браузера Internet Explorer.
Як правило, майже всі сучасні дизайнерські покращення елементів ними не підтримуються. Користувачеві здаватиметься, що над дизайном сайту взагалі не працювали. Що все з'їхало. Елементи наїжджають один на одного. Щоб цього уникнути, потрібно прораховувати усі варіанти.
Деякі веб-майстри заплющують очі на них, оскільки їхня частка на сучасному ринку стає все меншою і меншою. Але для професіонала важливим є кожен відвідувач, особливо якщо це комерційний сайт.
Робіть щось потрібне для всіх або враховуйте всі варіанти браузерів.
У HTML за організацію списків відповідає цілий набір тегів, організація яких має відповідати певним правилам структуризації даних.
Стандартом п'ятої версії html підтримується 3 види списків: нумеровані списки, марковані списки та списки визначень. Також надається можливість вкладати списки один одного, створюючи вкладені багаторівневі списки .
Нумерований список
Нумерований список- це набір елементів (пунктів списку), які мають певну послідовність. Кожен пункт нумерованого списку має унікальний маркер, що вказує на порядок проходження даного пункту щодо інших пунктів списку. За промовчанням маркерами пунктів нумерованого списку є числа. Перший пункт йде під числом 1, другий під числом 2 тощо.
Найпоширенішими прикладами нумерованих списків є рецепти різних страв. Оскільки будь-який рецепт - це нумерований список, із чіткою послідовністю дій.
Для створення нумерованих списків HTML використовується тег
- , всередині якого розміщуються елементи списку даних. Кожен пункт списку вказується за допомогою тега
Приклади з нумерованими списками в html (
- )
Приклад 1. Нумерований список HTML у вигляді латинських букв
Приклад із великими літерами
Приклад із малими літерами
Ось як це виглядає на сторінці:
Приклад 2. Нумерований список HTML у вигляді римських букв
Приклад із великими літерами
Ось як це виглядає на сторінці:
Приклад із малими літерами
Ось як це виглядає на сторінці:
Приклад 3. Нумерований список html різна позиція старту
Приклад, який показує можливості атрибута start, що дозволяє задавати стартове значення лічильника.
Ось як це виглядає на сторінці:
Приклад 4. Зміна рахунку в списках нумерованих html
Нижче наведено приклад з можливістю змінювати значення лічильника за допомогою атрибуту value при виведенні нових елементів у тегах
Теоретично можна вкласти будь-яку кількість списків, хоча на практиці це може внести плутанину за дуже глибокого вкладення списків. Для великих списків може бути краще розбити вміст на кілька списків із заголовками, або навіть розбити на окремі сторінки.
Покроковий приклад
Давайте розглянемо покроковий приклад, щоб зібрати це разом. Розглянемо наступний сценарій:
Ми створюємо невеликий Web-сайт для Кулінарної школи. На основній сторінці ми покажемо список класифікованих рецептів, пов'язаних з посиланнями на сторінки рецептів. Кожна сторінка рецепту перераховує необхідні інгредієнти, зауваження щодо цих інгредієнтів та метод приготування. Трьома категоріями є "Cakes" (що включає рецепти для "Plain Sponge", "Chocolate Cake" та "Apple Tea Cake"); "Biscuits" (що включає рецепти "ANZAC Biscuits", "Jam Drops" та "Melting Moments"); і "Quickbreads" (що включає рецепти для "Damper" та "Scones"). Клієнту все одно в якому порядку виводитимуться категорії та рецепти, він просто хоче, щоб люди розуміли, які позиції є категоріями, а які є рецептами.
Пройдемо через процес створення цього сайту. У цьому розділі ми займемося створенням розмітки та додамо деяке стильове оформлення для списків. Стильове оформлення не буде докладно розглядатися до лекції про стильове оформлення списків надалі в цій серії.
Розмітка основної сторінки
Створіть правильно сформовану сторінку HTML, включаючи doctype, елементи html, head і body і збережіть його як stepbystep-main.html . Додайте основний заголовок (h1) "HTML Cooking School", і підзаголовок (h2) "Recipes":
HTML Cooking School
Recipes
Recipes
Відступ для елементів li робить код зручнішим для читання, але не є обов'язковим.
Тепер потрібно додати рецепти як підпункти, наприклад, "Plain Sponge", "Chocolate Cake" та "Apple Tea Cake" є частиною категорії "Cakes". Для цього необхідно у кожній позиції списку створити вкладений список. Так як порядок неважливий, то знову підходить невпорядкованийперелік. Щоб спростити матеріал для навчального посібника, всі рецепти можна поєднати з однією сторінкою рецептів:
Recipes
Тут: type – символи списку:
Якщо ви хочете, щоб список починався з номера, відмінного від 1, слід вказати це за допомогою атрибуту startтега
.
У наступному прикладі показано нумерований список з великими римськими цифрами та початковим значенням XLIX:
Нумерацію можна розпочинати і за допомогою атрибуту value, який додається до елемента