Ol ul: Списки (ul, ol, li) в HTML

Leave a Comment / Разное / By /

Содержание

— журнал «Доктайп»

Что делает тег

Тег <ol> используется для создания упорядоченного списка элементов, то есть списка, в котором каждый элемент нумеруется.

Синтаксис тега <ol>

<ol>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ol>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <ol> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Простой упорядоченный список. Нумерация начинается с единицы:

<ol>
  <li>Проснуться</li>
    <li>Одеться</li>
  <li>Умыться</li>
  <li>Позавтракать</li>
</ol>

Использование атрибута type для изменения внешнего вида списка. Вместо арабских цифр будут римские:

<ol type="I">
  <li>Римская единица</li>
  <li>Римская двойка</li>
  <li>Римская тройка</li>
</ol>

Использование атрибута start для указания начального значения порядкового номера. Нумерация начнётся с четвёрки:

<ol start="4">
  <li>Четвёртый пункт</li>
  <li>Пятый пункт</li>
  <li>Шестой пункт</li>
</ol>

Для чего использовать тег <ol>

  • Для пошаговой инструкции.
  • Для списка задач, которые нужно выполнить в определённом порядке.
  • Для списка ключевых пунктов в статье.
  • Для перечня научных работ или источников литературы.
  • Для списка товаров с их порядковыми номерами.

Атрибуты тега <ol>

type — вид нумерации списка: арабские и римские цифры, латинские буквы.

start — с какого числа начинается нумерация списка.

reversed — нумерация элементов списка в обратном порядке.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <ol> может содержать только элементы <li>.

Нюансы

  • При создании нумерованного списка обязательно нужно использовать тег <li> для каждого элемента списка.
  • Если нужно создать список без нумерации, используйте тег <ul> вместо <ol>.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Тег <ul> — используется для создания маркированного списка.

Чем заменить тег

Чтобы создать список без нумерации, воспользуйтесь тегом <ul>. Если же вам не нужно создавать список вообще, можете разместить элементы внутри обычного текстового блока, который соответствует логике и структуре вашей страницы. Также создать нумерованный «список» можно с помощью таблиц или блоков <div> с CSS-свойством counter-increment. Однако так делать не рекомендуется.

Актуальность

Тег <ol> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

⚡️ HTML и CSS с примерами кода

Тег <ol> (от англ. ordered list — упорядоченный список) устанавливает нумерованный (упорядоченный) список.

Каждый элемент списка должен начинаться с <li>. Если к <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Текстовые блоки
  • blockquote
  • dd
  • div
  • dl
  • dt
  • hr
  • li
  • ol
  • p
  • pre
  • ul

Синтаксис

<ol>
  <li>элемент нумерованного списка</li>
  <li>элемент нумерованного списка</li>
</ol>

Закрывающий тег обязателен.

Атрибуты

type
Устанавливает вид маркера списка.
reversed
Нумерация в списке становится по убыванию (3,2,1).
start
Задаёт число, с которого будет начинаться нумерованный список.

Также для этого элемента доступны универсальные атрибуты.

type

Устанавливает вид нумерации в упорядоченном (нумерованном) списке.

Синтаксис

<ol type="A | a | I | i | 1">
  ...
</ol>

Значения

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

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры.

Значение по умолчанию

1

reversed

Меняет нумерацию в списке на обратный порядок, вместо 1,2,3 будет выводиться 3,2,1.

Синтаксис

<ol reversed>
  ...
</ol>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

start

Атрибут start устанавливает номер, с которого будет начинаться нумерованный список. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами.

Синтаксис

<ol start="<число>">
  <li>Элемент списка</li>
</ol>

Значения

Любое положительное целое число.

Значение по умолчанию

Нет.

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4. 01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OL</title>
  </head>
  <body>
    <ol>
      <li>Чебурашка</li>
      <li>Крокодил Гена</li>
      <li>Шапокляк</li>
    </ol>
  </body>
</html>

Ссылки

  • Тег <ol> MDN (рус.)

Тег HTML ol

❮ Назад Полный справочник HTML Далее ❯


Пример

Два разных упорядоченных списка (первый список начинается с 1, а второй начинается с 50):

<ол>

  • Кофе

  • Чай

  • Молоко


    1. Кофе

    2. Чай

    3. Молоко

    Попробуйте сами »

    Другие примеры «Попробуйте сами» ниже.

    Определение и использование

    Тег

      определяет упорядоченный список. Упорядоченный список может быть числовым или алфавитным.

      Тег

    1. используется для определения каждого элемента списка.

      Совет: Используйте CSS для оформления списков.

      Совет: Для неупорядоченного списка используйте тег

        .

        Поддержка браузера

        Элемент
        <ол> Да Да Да Да Да

        Атрибуты

        Атрибут Значение Описание
        реверс наоборот
        Указывает, что порядок списка должен быть обратным (9,8,7…)
        начало номер Задает начальное значение упорядоченного списка
        тип 1
        А


        		Указывает тип маркера для использования в списке

        Глобальные атрибуты

        Тег

          также поддерживает глобальные атрибуты в HTML.

          Атрибуты событий

          9Тег 0029

            также поддерживает атрибуты событий в HTML.

            Дополнительные примеры

            Пример

            Установить различные типы списков (с помощью CSS):


            1. Кофе

            2. Чай

            3. Молоко


            1. Кофе

            2. Чай

            3. Молоко

            Попробуйте сами »

            Пример

            Показать все различные типы списков, доступные с помощью CSS:

            Попробуйте сами »

            Пример

            Уменьшение и увеличение высоты строки в списках (с помощью CSS):


               
            1. Кофе

            2. Чай

              3.  
            3. Молоко


               
            1. Кофе

              2.  
            2. Чай

            3. Молоко

            Попробуйте сами »

            Пример

            Вложите неупорядоченный список в упорядоченный список:


               
            1. Кофе

              2.  
            2. Чай
                 

              • Черный чай

                •      
              • Зеленый чай


               

              3.  
            3. Молоко

            Попробуйте сами »

            Связанные страницы

            Учебник по HTML: Списки HTML

            Справочник по HTML DOM: Ol Object 90 003

            Учебное пособие по CSS: списки стилей

            Настройки CSS по умолчанию

            Большинство браузеров будут отображать

              со следующими значениями по умолчанию:

              Пример

              ol {
                display: block;
                тип-стиля-списка: десятичный;
                Верхнее поле: 1em;
               нижнее поле: 1em;
                левое поле: 0;
               правое поле: 0;
                padding-left: 40px;
              }

              Попробуйте сами »

              ❮ Предыдущая Полный справочник HTML Следующий ❯


              ВЫБОР ЦВЕТА

              Лучшие учебники
              Учебник HTML
              Учебник CSS
              Учебное пособие по JavaScript
              Учебное пособие
              Учебное пособие по SQL
              Учебное пособие по Python
              Учебное пособие по W3. CSS
              Учебное пособие по Bootstrap
              Учебное пособие по PHP
              Учебное пособие по Java
              Учебное пособие по C++
              Учебное пособие по jQuery

              Лучшие ссылки
              HTML Reference
              CSS Reference
              JavaScript Reference
              SQL Reference
              Python Reference
              W3.CSS Reference
              Bootstrap Reference
              PHP Reference
              HTML Colors
              Java Reference
              Angular Reference
              Справочник по jQuery

              Основные примеры
              Примеры HTML
              Примеры CSS
              Примеры JavaScript
              Примеры инструкций
              Примеры SQL
              Примеры Python
              Примеры W3.CSS
              Примеры Bootstrap
              Примеры PHP
              Примеры Java
              Примеры XML
              Примеры jQuery

              ФОРУМ | О

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

              Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

              Copyright 1999-2023 Refsnes Data. Все права защищены.
              W3Schools работает на основе W3.CSS.

              h58: Использование ol, ul и dl для списков или групп ссылок

              h58: Использование ol, ul и dl для списков или групп ссылок | Методы для WCAG 2.0

              Методы для WCAG 2.0

              Перейти к содержимому (нажмите Enter)

              • Содержание
              • Введение 9 0318
              • Предыдущий: Техника h56
              • Следующий: Метод h59

              На этой странице:

              • Важная информация о методах
              • Применимость
              • Описание
              • Примеры
              • Ресурсы
              • Связанные методы s
              • Тесты

              —

              Важная информация о методах

              См. Общие сведения о методах для критериев успеха WCAG за важную информацию об использовании этих информативных методов и о том, как они соотносятся с нормативными критериями успеха WCAG 2.0. В разделе «Применимость» объясняется область применения метода, и наличие методов для конкретной технологии не означает, что эту технологию можно использовать во всех ситуациях для создания контента, соответствующего WCAG 2.0.

              Применимость

              HTML, XHTML

              Этот метод относится к:

              • Критерий успеха 1.3.1 (информация и отношения)
                • Как познакомиться 1.3.1 (Информация и отношения)
                • Понимание критерия успеха 1.3.1 (информация и отношения)

              Агент пользователя и примечания по поддержке вспомогательных технологий

              См. примечания по поддержке агента пользователя для h58.

              Описание

              Целью этого метода является создание списков связанных элементов с использованием элементов списка. соответствующие их целям. 9Элемент 0029 ol используется, когда список упорядочен, а элемент ul используется, когда список неупорядочен. Определение списки ( dl ) используются для группировки терминов с их определениями. Хотя использование этой разметки может сделать списки более читабельными, не все списки нуждаются в разметке. Например, предложения, содержащие списки, разделенные запятыми, могут не нуждаться в разметке списка.

              При использовании разметки, которая визуально форматирует элементы в виде списка, но не указывает отношения списка, у пользователей могут возникнуть трудности с навигацией по информации. Пример такого визуального форматирования включает звездочки в содержание в начале каждого элемент списка и использование
              элементов для разделения элементов списка.

              Некоторые вспомогательные технологии позволяют пользователям переходить от списка к списку или от элемента к элементу. Таблицы стилей можно использовать для изменения представления списков при сохранении их честность.

              Структура списка ( ul / ol ) также полезна для группировки гиперссылок. Когда это сделано, это помогает пользователям программ чтения с экрана переходить от первого элемента в списке к концу списка или переходить к следующему списку. Это помогает им обходить группы ссылок, если они захотят.

              Примеры

              Пример 1. Список, показывающий шаги в последовательности

              В этом примере используется упорядоченный список для отображения последовательности шагов в процессе.

              Пример кода: 

               
                
  
              1. В миске смешайте яйца и молоко.
                2. 
  
              2. Добавить соль и перец.
                3.

              Пример 2. Список продуктов

              В этом примере показан неупорядоченный список товаров, которые нужно купить в магазине.

              Пример кода: 

               <ул>
  
            1. Молоко
              2. 
  
            2. Яйца
              3. 
  
            3. Сливочное масло
              4.

      Пример 3: Слово и его определение

      В этом примере используется список определений для группировки определения с термином, который определяется.

      Пример кода: 

       
      
  
      мигать
      
  
      включаться и выключаться от 0,5 до 3 раз в секунду

      Пример 4. Контактная информация с использованием списка определений

      В этом примере список определений используется для разметки пар связанных элементов. Сами пары представляют собой логически связанный список. Поскольку в браузерах отсутствует широкая поддержка стилей CSS для элементов списка определений, элементы span были включены в разметку только для целей оформления и не требуются:

       
      

      имя:
      Джон Доу
      

      тел.:
      01-2345678
      

      факс:
      02-3456789

      электронная почта:
      [email protected]

      Следующие стили CSS можно использовать для форматирования каждого парного элемента в списке на отдельной строке, а также для придания табличному макету:

       dt, dd{float: left;margin: 0;padding: 0; }
dt {очистить: оба; вес шрифта: полужирный}
DT span {дисплей: встроенный блок; ширина: 70 пикселей;}
дд пролет {дисплей: встроенный блок; поле справа: 5px;}

      Это показано в рабочем примере контактной информации с использованием списка определений.

      Пример 5: Использование списков для группировки ссылок

      В этом примере ссылки сгруппированы с использованием ul и li элементы.

      Пример кода: 

        
      Категории товаров
       
<ул>
    
    2. Кухня
      3. 
    
    3. Кровать & Ванна
      4. 
    
    4. Изысканные рестораны
      5. 
    
    5. Освещение
      6. 
    
    6. Хранилище
    7.

      8. Для стилизации элементов списка можно использовать CSS, поэтому этот метод можно использовать с разнообразие визуальных образов.

      Вот стиль, который удаляет маркеры списка и левое заполнение, создающее отступ и размещение отдельных элементов списка по горизонтали.

      Пример кода: 

       ул.навигация {
  стиль списка: нет;
  заполнение: 0;
}
ul.navigation li {
  дисплей: встроенный;
}

      Этот стиль удаляет маркеры списка и левое заполнение и отображает элементы в плавающий блок.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *