Ol тег – Списки html: теги ul, ol, li, dl, dd, dt | Создание сайтов и заработок в сети

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

Тег — упорядоченный список

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

Описание

Нумерованный (упорядоченный) список — это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.

Для создания нумерованного списка в HTML используется тег <ol> (ol сокращение от англ. ordered list — упорядоченный список), который информирует браузер, что все его содержимое, вплоть до закрывающего тега </ol>, представляет собой нумерованный список. Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.

Элементы для нумерованных списков определяются с помощью тега <li>, каждый такой элемент, помимо текстового содержимого, может включать в себя практически любые HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Атрибуты

reversed:
Указывает, что элементы списка будут идти в порядке убывания (вместо порядка по возрастанию). Возможные значения логического атрибута: 

<ol reversed>
<ol reversed="reversed">
<ol reversed="">

Примечание: атрибут reversed поддерживается только браузерами Chrome и Safari.

start:
Устанавливает начальное целочисленное значение, с которого будет начинаться нумерация элементов в списке. Пример »
type:
Определяет вид маркера, который будет использоваться для элементов списка:
  • 1 — десятичные числа (1, 2, 3, 4 …).
  • A — латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D …).
  • a — латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d …).
  • I — римские цифры в верхнем регистре (I, II, III, IV …).
  • i — римские цифры в нижнем регистре (i, ii, iii, iv …).
Пример »

Тег <ol> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию


ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Пример


<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Молоко</li>
</ol>

Результат данного примера в окне браузера:

Пример использования тега <ol>

| HTML | WebReference

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

Синтаксис

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

Закрывающий тег

Атрибуты

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

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

Пример

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

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

Вид нумерованного списка в браузере

Рис. 1. Вид нумерованного списка в браузере

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

| Справочник HTML

Элемент <ol> (от англ. «ordered list» ‒ «упорядоченный список») создаёт нумерованный (упорядоченный) список. Упорядоченный список может иметь цифровую или буквенную маркировку.

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

Элементы для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.

Примечание: Если к <ol> применяется CSS свойство, то элементы <li> наследуют эти свойства.

Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.

Синтаксис

<ol>
  ...
  <li> ... </li>
  ...
</ol>

Закрывающий тег

Обязателен.

Атрибуты

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

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <ol> со следующими значениями CSS по умолчанию:

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Различия между HTML 4.01 и HTML5

Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.
В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .

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

Два разных упорядоченных HTML списка:

Пример HTML:

Попробуй сам
<ol>
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ol>

<ol start="50">
  <li>Кофе</li>
  <li>Чай</li>
  <li>Какао</li>
</ol>

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

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

Элемент
<ol> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<ol> 1+ 1+ 6+ 1+

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

Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start

Как изменить номер данного элемента списка:
Применение атрибута value

Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type

Как создать вложенные списки:
Вложенные списки

Учебник HTML

HTML уроки: HTML Списки

HTML Элементы


HTML тег ol

Тег <ol> создает упорядоченный (нумерованный) список. Упорядоченный список может иметь цифровую или буквенную маркировку.

Для создания элементов списка используется тег <li>.

Для настройки стилей списка используйте CSS.

Разница между HTML 4.01 и HTML5

Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.

Атрибут reversed был добавлен в HTML5.

Атрибуты compact не поддерживаются в HTML5.

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

Атрибут Описание
compact Включает отображение компактного упорядоченного списка
reversed Устанавливает обратную нумерацию упорядоченного списка
start Определяет стартовое значение первого элемента упорядоченного списка
type Определяет вид маркера для упорядоченного HTML списка

Общие атрибуты

Тег <ol> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Два разных упорядоченных HTML списков:


<ol>
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ol>

<ol start="50">
   <li>Кофе</li>
   <li>Чай</li>
   <li>Молоко</li>
</ol>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <ol> со следующими стилями


ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

seodon.ru | Теги HTML — Тег OL

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Тег <OL> предназначен для создания нумерованных (упорядоченных) списков. Нумерованные списки — это списки, каждый элемент (пункт) которых имеет порядковый номер в виде цифры или буквы.

Атрибуты

Личные атрибуты:

  • start — Устанавливает номер, с которого будет идти нумерация упорядоченного списка.
  • type — Задает тип нумерации элементов (пунктов) списка.

Общие атрибуты:

  • accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
  • class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
  • dir — указывает направление текста внутри элемента.
  • id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
  • lang — указывает язык, на котором написан текст внутри HTML-элемента.
  • style — необходим для применения встроенных стилей CSS к тегу.
  • tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
  • title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.

Тип тега

Назначение: списки.

Модель тега: block (блочный, уровня блока).

Должен содержать: тег или теги <LI>.

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

<ol>
 <li>...</li>
</ol>

Пример HTML: применение тега OL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Применение тега OL</title>
 </head>
 <body>
  <ol>
   <li>Бим</li>
   <li>Бом</li>
   <li>Бум</li>
  </ol>
 </body>
</html>

Результат примера

Результат. Применение тега OL.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Атрибут type | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+2.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Устанавливает вид маркера.

Синтаксис

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

Значения

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

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 1 приведены различные значения атрибута type тега <ol> и результат их применения.

Табл 1. Параметры нумерованного списка
КодПример
<ol type=»A»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»a»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»I»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»i»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»1″> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

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

1

Аналог CSS

list-style-type

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег OL, атрибут type</title>
 </head>
 <body>

  <ol type="a">
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ol>

 </body>
</html>

Атрибут type | HTML | WebReference

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

Синтаксис

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

Значения

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

  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры;
  • арабские цифры.

В табл. 1 приведены различные значения атрибута type элемента <ol> и результат их применения.

Табл 1. Параметры нумерованного списка
КодПример
<ol type=»A»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»a»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»I»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»i»> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк
<ol type=»1″> … </ol>
  1. Чебурашка
  2. Крокодил Гена
  3. Шапокляк

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OL, атрибут type</title>
 </head>
 <body>
  <ol type="a">
   <li>Чебурашка</li>
   <li>Крокодил Гена</li>
   <li>Шапокляк</li>
  </ol>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

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

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