Списки в HTML

1.1 Види списків

Списки в HTML є важливим інструментом для організації та структурування інформації. Вони дозволяють відображати елементи з числами або з жирними крапками (маркерами). Розглянемо докладніше кожен з елементів списків в HTML: <ul>, <ol>, і <li>.

Ненумеровані списки <ul>

Тег <ul> використовується для створення ненумерованих (маркірованих) списків. Елементи списку відображаються з маркерами (точками, кружками, квадратами).

Приклад:

    
      <ul>
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
        <li>Третій елемент списку</li>
      </ul>
    
  

Нумеровані списки <ol>

Тег <ol> використовується для формування нумерованих списків. Елементи списку відображаються з числами або літерами.

Приклад:

    
      <ol>
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
        <li>Третій елемент списку</li>
      </ol>
    
  

1.2 Елементи списку <li>

Тег <li> використовується для позначення кожного елемента списку, незалежно від того, чи це ненумерований чи нумерований список. Він завжди повинен бути вкладеним всередину <ul> або <ol>.

Як легко запам'ятати ці теги:

• Ordered List – впорядкований (пронумерований) список
• Unordered List – невпорядкований (непронумерований) список
• List Item – елемент списку

Атрибут type

Цей атрибут можна використовувати всередині <ul> і <ol> для зміни типу маркерів або нумерації. Наприклад, для <ol> можна використовувати значення "1", "A", "a", "I", "i", а для <ul> - "disc", "circle", "square".

Приклад зміни типу маркера для <ul>:

    
      <ul type="square">
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
      </ul>
    
  

Приклад зміни типу нумерації для <ol>:

    
      <ol type="A">
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
      </ol>
    
  

Атрибут start:

Цей атрибут застосовується тільки до <ol> для вказання початкового числа нумерації.

Наприклад:

    
      <ol start="5">
        <li>П'ятий елемент списку</li>
        <li>Шостий елемент списку</li>
      </ol>
    
  

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

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

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

    
      <ul>
        <li>Перший елемент списку</li>
          <ul type="circle">
            <li>Вкладений перший елемент</li>
            <li>Вкладений другий елемент</li>
          </ul>
        <li>Другий елемент списку</li>
        <li>Третій елемент списку</li>
      </ul>
    
  

1.3 Стилізація списків

Списки можна стилізувати за допомогою CSS, змінюючи колір маркерів, типи маркерів і відступи.

Приклад стилізації:

    
      ul.custom-list {
        list-style-type: katakana; /* Японська складова абетка */
        color: blue; /* Колір тексту */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Японська система впорядкування */
        color: green; /* Колір тексту */
      }
    
  

    
      <ul class="custom-list">
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
      </ul>

      <ol class="custom-list">
        <li>Перший елемент списку</li>
        <li>Другий елемент списку</li>
      </ol>
    
  

Таким чином, використання <ul>, <ol>, і <li> допомагає структурувати контент і покращує його читабельність на веб-сторінках.