3 типи списків HTML і як ними користуватися

Автор

Ключові висновки

  • Списки HTML необхідні для організації та представлення даних на веб-сторінці. Є три основні типи: впорядковані, невпорядковані та списки опису.
  • Упорядковані списки використовують цифри або інші символи для впорядкування елементів. Атрибут type дозволяє налаштовувати, а атрибути start і reversed змінюють початкову позицію та порядок.
  • Невпорядковані списки групують пов’язані елементи без певного порядку. Стиль маркера можна налаштувати за допомогою CSS.

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

Існує три основних типи списків HTML, кожен з яких виконує певну структурну мету в веб-розробці.

1. Впорядкований список

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

    . Тег

      групує та містить теги

    1. . Кожен елемент списку (тег
    2. ) міститиме певний елемент у списку.

       
      <ol> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li>
      </ol>

      Цей код відображає таке подання:

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

       
      <ol type="a"> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
        <li>Item 4</li>
      </ol>

      Додавання атрибута type до тегу

        створює таке оновлене подання:

        Окрім атрибута type, є ще два атрибути, які можна використовувати з тегом

          : start і reversed.

          Атрибут «початок» дозволяє почати впорядкування з будь-якої позиції, використовуючи ціле число. Наприклад, якщо ви додаєте start=”3″ до тегу

            , не вказуючи тип, він почне впорядковувати список з числа три. Якщо ви призначите type=”a” або type=”I”, він почне впорядковуватися з c або III відповідно.

             
            <ol type="I" start="3"> 
              <li>Item 1</li> 
              <li>Item 2</li> 
              <li>Item 3</li> 
              <li>Item 4</li>
            </ol>

            Наведений вище код відображає таке подання:

            Атрибут reversed дозволяє змінити порядок списку на зворотний. Він приймає логічне значення, а його значення за замовчуванням — false.

             
            <ol reversed="true"> 
              <li>Item 1</li> 
              <li>Item 2</li> 
              <li>Item 3</li> 
              <li>Item 4</li>
            </ol>

            Цей код створює наступний вихід у браузері:

            2. Невпорядкований список

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

            Щоб створити новий невпорядкований список, вам потрібно буде використовувати тег

              як батьківський елемент і тег

            • для кожного елемента списку:

               <ul>
                <li>Item 1</li>
                <li>Item 2</li> 
                <li>Item 3</li> 
                <li>Item 4</li>
              </ul>

              Цей код відображає таке подання:

              Типовим стилем маркера для невпорядкованого списку є диск. Раніше ви могли використовувати атрибут type, щоб установити стиль маркера невпорядкованого списку. Однак атрибут типу невпорядкованого списку тепер є застарілим. Рекомендованою альтернативою для невпорядкованого стилю списку є властивість CSS list-style-type.

               <style>
              ul { list-style-type: square; } 
              </style>

              Наведений вище код оновлює представлення до такого:

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

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

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

               <H3>Chicken Pasta Insturctions</H3>
              <ol> 
                <li>Boil pasta.</li> 
                <li>
                 Season chicken breast.
                  <ul> 
                    <li>salt and pepper</li> 
                    <li>paprika</li> 
                    <li>garlic powder</li> 
                    <li>Italian seasoning</li> 
                  </ul>
                </li>
                <li>Heat olive oil in pot over medium-high heat.</li> 
                <li>Add chicken breast to pan and cook for 5 minutes.</li> 
                <li>Add heavy cream and parmesan cheese to empty pot.</li> 
                <li>Add pasta and slice chicken to cream sauce.</li>
              </ol>

              Цей код відображає таке подання:

              3. Список описів

              Елемент опису дозволяє створити список термінів і пов’язаних з ними деталей. Тег

              дозволяє створити новий список описів, який слід використовувати з елементами

              (термін опису) і

              (подробиці опису).

               <h3>Popular Laptops</h3>
              <dl>
                <dt>MacBook Pro</dt> 
                <dd> 
                  Provides up to 22 hours of battery life, 
                  has an advanced camera, and a magic keyboard with touch ID. 
                </dd>
                <dt>MSI GS76 Stealth</dt> 
                <dd>
                  A powerful gaming laptop with supercharged graphics and customized keys. 
                </dd>
              </dl>

              Наведений вище код відображає таке подання:

              Упорядкуйте свій вміст за допомогою правильного списку HTML

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

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