Трохи теорії

В HTML існує три типи списків: нумеровані, марковані та списки визначень.

Нумеровані (впорядковані) списки

Це списки, в яких важлива послідовність елементів. В HTML, нумеровані списки створюються за допомогою тегів <ol> та <li>. Тег <ol> (від "ordered list", що означає "впорядкований список") використовується для обгортання всього списку, а кожен елемент списку обгортається тегом <li> (від "list item", що означає "елемент списку").
Ось приклад коду, який демонструє створення нумерованого списку в HTML:

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

Якщо ви хочете змінити стиль нумерації, ви можете використати атрибут type тегу <ol>. Наприклад, якщо ви хочете створити нумерацію вигляду букв, ви можете використати наступний код:

See the Pen Нумерований список№2 by first_code (@maryna_kriukova) on CodePen.

Інші значення, які можуть бути використані для атрибуту type тегу <ol> включають:

• "1" (за замовчуванням): арабські цифри (1, 2, 3 і т.д.)
• "A": великі літери англійської абетки (A, B, C і т.д.)
• "a": малі літери англійської абетки (a, b, c і т.д.)
• "I": великі римські цифри (I, II, III і т.д.)
• "i": малі римські цифри (i, ii, iii і т.д.)

Можете потренуватися та повводити у вікно з кодом списки з різними значеннями атрибуту type. Результат буде відзразу відображатися у правому вікні — Result.

Також елемент ol ще має два можливі атрибути — start та reversed. Start визначає число, з якого починається нумерація списку, а reversed, відповідно, — встановлює порядок нумерації в зворотньому напрямку, тобто від останнього пункту до першого. Для надання наочності, демонструємо код:

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

Марковані (ненумеровані) списки

Це колекції предметів, які не мають жодного конкретного порядку. В таких списках для обгортання елементів li використовується тег <ul> (unordered list). Елемент ul має атрибут type для встановлення різних символів списку. Значення атрибуту можуть бути: circle, square та disc. Давайте розглянемо приклад маркованого списку з використанням різних символів:

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

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

Списки визначень в HTML використовуються для відображення термінів та їх визначень на веб-сторінках. Вони дозволяють створювати структурований контент, що полегшує сприйняття термінів користувачами. В HTML списки визначень створюються за допомогою тега <dl>. Елемент dl відображає сам список, а елементи dt та dd відображають відповідно термін та його визначення. Нижче розглянутий приклад використання такого списку.

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

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

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

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

Практика

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

See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.

Таким чином, ми розібралися із використанням списків на веб-сторінці.