Как разместить элементы списка горизонтально? Примеры стильного оформление ul li списков CSS Сопоставьте html тег с описанием ol.

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

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

Теперь мы продолжим изучение тегов. Я буду предполагать, что читатель уже ознакомлен с материалом указанных выше статей.

Как всегда, план работы:

1. Абзацы
2. Разрывы строк
   
3. Списки , и элементы списков
4. Заголовки
5. Горизонтальные линейки

   ---

Абзацы

Текст почти всегда состоит из абзацев. Абзац — это элемент текста, несущий законченную мысль.

В html абзац, как можно судить из заголовка, обозначается . Буква «p» взята из слова «paragraph», что как-раз обозначает «абзац».

Рассмотрим пример:

Текст первого абзаца. Он содержит мысль. Но вот мысль закончилась.

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

Как видно, применение абзацев очень просто и не требует особых комментариев. Если посмотреть этот код в браузере, то мы увидим две строки, между которыми есть одна пустая строка. В русских текстах, абзац принято отделять не пустой строкой, а смещением первой строки вправо. Но в Интернете часто применяется именно такое форматирование, поэтому часто его оставляют и в русскоязычных текстах. Однакое, если такое поведение не устраивает, его можно поменять при помощи CSS.

Разрывы строк

Иногда требуется перевести строку, не заканчивая при этом мысль, не закрывая абзац. То есть, просто перейти на новую строку. Для этого есть одиночный тег
. Вот пример его применения:

Ветер весело гуляет

И кораблик подгоняет

Он бежит себе в волнах
На поднятых парусах.

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

Списки ,

и элементы списков

Иногда в тексте нужно перечислить что-то. Для этой цели применяются три тега: ul, ol, li. Все эти теги контейнерные, но тег всегда содержится в одном из контейнеров или , и не имеет смысла вне них. Контейнер ul применяется, когда нам не важен порядок перечисляемых позиций, и мы не хотим акцентировать внимание на порядке, в котором они идут. А тег ol, наоборот, акцентирует внимание на последовательности следования элементов, автоматически нумеруя каждую строку. Рассмотрим пример:

• Булка


• Пирожок


• Буханка


• Пирог

На экране браузера этот код будет выглядеть так:

• Булка
• Пирожок
• Буханка
• Пирог

Если мы просто заменим тег ul на тег ol, то получим нумерованый список:

1. Булка


2. Пирожок


3. Буханка


4. Пирог

Теперь это выглядит так:

1. Булка
2. Пирожок
3. Буханка
4. Пирог

Никто не запрещает вкладывать один список в другой, формируя вложенные списки с подсписками:

Инструменты:

• Пила


• Отвертки
  
  
  
  1. Прямая
  
  
  2. Крестовая
  
  
  
  


• Дрель

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

Конечно, как и все остальное, внешний вид этих элементов может быть изменен до неузнаваемости при помощи CSS.

Заголовки

Конечно, абзацы помогают в структурировании документов. Но для того, чтобы разбить большой текст на меньшие логические части, можно озаглавить каждую из них. Каждая часть может содержать еще подчасти, со своими заголовками нижнего уровня, и так далее. Для задания заголовка, служат теги , где «x» — число от 1 до 6. Заголовок тем ниже уровнем, чем больше это число. То есть, заголовок самого верхнего уровня будет называться h1, а самого нижнего — h6. По-умолчанию, текст, находящийся в этих заголовках, отображается большим шрифтом с отступами. Этот текст отображается на всю строку, то есть теги hx являются блочными. У тега h1 шрифт самый крупный, а у тега h6 — самый мелкий. Как правило, на странице один, максимум — два тега верхнего уровня h1. С понижением уровня, количество тегов возрастает. Но редко какой веб-мастер сможет разбить текст так, что ему понадобятся заголовки 5 или 6 уровня. Даже 4 уровень применяется редко.

Меньше слов, больше дела!

Элемент

(от англ. "unordered list" ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент
применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.

Тег

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

Пункты для нумерованных списков определяются с помощью тега

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

  Примечание: Если к

  применяется CSS свойство, то элементы
  • наследуют эти свойства.

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

    .

    Синтаксис

    ...
    • ...
    ...

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

    Обязателен.

    Атрибуты

    compactУстарел в HTML5 Сокращает отступы и расстояния между строками. type HTML5 Устанавливает вид маркера списка.

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

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

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

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

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

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

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

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

    Неупорядоченный HTML список:

    Пример HTML:

    Попробуй сам
    • Кофе
    • Чай
    • Какао

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

    Спецификация	Статус
    WHATWG HTML Living Standard (WHATWG)	Живой стандарт
    HTML 4.01 (W3C)	Рекомендация
    HTML5 (W3C)	Рекомендация
    HTML 5.1 (W3C)	Рекомендация

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

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

    Как сделать, чтобы список начинался с номера, отличного от 1.

    Списки бывают нумерованными и ненумерованными.

    Нумерованные списки выводятся кодом:

    Список с цифрами
    1. пункт 1
    2. пункт 2
    3. пункт 3

    Не нумерованные списки выводятся кодом:

    Список с галочками или другими символами
    • пункт 1
    • пункт 1
    • пункт 1

    Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.

    Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.

    Для нумерованного списка прописываются стили нумерации для каждого пункта.

    Стандартные арабские цифры описываются значением decimal.

    list-style-type: decimal; /*арабские цифры*/

    Для маркерованного списка указывается стиль символов — квадратики или кружочки.

    list-style-type: circle; /*кружки*/
    list-style-type: square; /*квадраты*/

    Каждому пункту меню можно назначить изображение.

    list-style-image: url(‘путь к изображению’);

    Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.
    

    Где стили списков прописаны в шаблоне Twenty Eleven?

    Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

    Стандартный код выглядит вот так:

    Как оформить нумерованный список?

    Нумерованный список с использованием фона

    Посмотрите вот на такое симпатичное оформление нумерованного списка.

    Нравится? Давайте повторим.

    Найдите стили для тега ol. Пропишите к нему новые свойства.

    Ol { padding: 0px 0 0 20px; margin: 0.5em 0 1.571em 1.9em; color: #2E2E2E; list-style-type: none; font: 15px/17px Verdana, Arial, Helvetica, sans-serif; z-index: 2; counter-reset: point; } ol li { margin-bottom: 4px; line-height: 1.6; color: #2E2E2E; position: relative; } ol li:before { margin-bottom: 4px; counter-increment: point 1; line-height: 1.6; height: 24px; margin-left: -36px; left: 0px; width: 24px; margin-top: 1px; background: #BDC3C7; content: counter(point); text-align: center; position: absolute; font-weight: bold; }

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

    list-style-type: none; — отключает вывод стандартных цифр
    counter-reset: point; — задает переменную для счетчика нумерации
    position: relative; — размещает нумерацию возле самих пунктов

    before — псевдоэлемент для тега ol li. Имеет следующие стили:
    content: counter(point); — выводит значение переменной
    counter-increment: point 1; — увеличивает счетчик на 1
    position: absolute;
    background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
    margin – внешние отступы
    padding – внутренние отступы
    color – цвет текста элемента
    background – фон
    text-align – выравнивание текста
    font-weight – толщина (насыщенность) шрифта

    В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.

    Нумерованный список с уникальным изображением для каждого пункта

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

    Как это реализовано? Давайте рассмотрим следующий код:

    /*первый номер*/ ol li:first-child { list-style-image: url(путь к изображению с цифрой 1); } /*второй номер*/ ol li:nth-child(2n) { list-style-image: url(путь к изображению с цифрой 2); } /*третий номер*/ ol li:nth-child(3n) { list-style-image: url(путь к изображению с цифрой 3); } /*четвертый номер*/ ol li:nth-child(4n) { list-style-image: url(путь к изображению с цифрой 4); } /*Далее прописываем точно также только для следующих номеров пунктов*/

    В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.

    Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).

    Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).

    Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.

    Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.

    Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.
    

    Как оформить маркированный (ненумерованный) список?

    Маркированный список ul li с чередующимися иконками

    Мне очень понравился вот такой маркированный список

    Ul { padding: 11px 0 5px 0; } ul li { padding-left: 32px; margin-bottom: 10px; font: normal 15px Verdana, sans-serif; color: #2E2E2E; line-height: 1.6; border-bottom: 1px dashed #ccc; padding-bottom: 10px; } ul li:before { content: ""; position: absolute; width: 27px; height: 24px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px 2px no-repeat; list-style-type: circle; } ul li:nth-child(2n):before { content: ""; position: absolute; width: 27px; height: 43px; margin-left: -35px; margin-top: -2px; background: url("images/sprite.jpg") 0px -17px no-repeat; list-style-type: circle; }

    Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

    Для эксперимента можно назначить отступы:

    Ul li{ list-style-image: url(images/radio.png); margin-left: 30px; }

    Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

    В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.

    Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром.

    Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.
    

    Как вывести на странице несколько списков с разным оформлением?

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

    Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.

    Вот, например, один симпатичный вариант оформления содержания:

    В HTML вы пропишите список так:

    Содержание
    1. пункт 1
    2. пункт 2
    3. пункт 3

    В CSS вы пропишите стили так:

    Ol#sod{ padding: 0px 20px 10px 51px; margin: 0.5em 0 0em 1em; color: #2E2E2E; list-style-type: none; background: #f1f4f5; border-left: #BDC3C7 4px solid; display: inline-block; } ol#sod li{} ol#sod li:before{ font-weight:normal !important }

    Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.

    Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.

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

    Как создать ссылки-якоря в списке содержания?

    Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.

    Содержание
    1. Заголовок 1
    2. Заголовок 2
    3. Заголовок 3

    А в тексте статьи нужно написать так:

    Заголовок 1… Заголовок 2… Заголовок 3…

    Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.

    Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.

    Агеева Вероника.

    Возможно вас еще заинтересует:

    Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.

    Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .

    Маркированные списки на основе тэгов UL и LI

    Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

    Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.

    Давайте посмотрим, например, маркированный вариант, который может выглядеть так:

    • Первая строка
    • Вторая
    • Последний элемент

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

    Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

    Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

    1. — закрашенный кружок (по умолчанию);
       • — не закрашенный кружок;
         • – квадрат

    В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

    Пример маркированного списка с различными типами маркера для каждого пункта:

    

    1. Маркер в виде закрашенного диска
    2. Маркер в виде не закрашенного диска
    3. Квадрат

    Нумерованные списки в Html на основе тэга OL

    Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.

    Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:

    

    1. Первая строка
    2. Второй пункт
    3. Третья строка

    Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

    1. — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
       1. — заглавные буквы в качестве нумерации;
          1. — строчные буквы;
             1. — заглавные римские цифры;
                1. — строчные римские цифры;

                   Пример нумерованного списка с различными типами нумерации для каждого пункта:

                   

                   1. с нумерацией большими римскими цифрами
                   2. Нумерация маленькими латинскими буквами
                   3. Нумерация малыми римскими цифрами

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

                   1. Первый элемент, номер которого задан в теге OL атрибутом start="23"
                   2. Следующий пункт, с номером на единицу большим
                   3. Еще на единицу больше

                   Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:

                   1. Первый пункт с номером один
                   2. Этот элемент получит номер, указанный в атрибуте value="32"
                   3. Пункт с большим номером

                   Оформление внешнего вида списков в CSS (таблицах стилей)

                   Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства.

                   Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.

                   • Первый пункт
                   • Второй
                   • Последний

                   Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .

                   Специальные и вложенные списки в Html коде

                   Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.

                   Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).

                   Первый термин

                   Описание

                   Второй термин

                   Его описание

                   

                   Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).

                   Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.

                   Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.

                   Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:

                   

                   1. Первый пункт основного нумерованного
                   2. Второй пункт
                      • Первый элемент вложенного маркированного
                      • Второй
                      • Третий и последний пункт маркированного
                   3. Третий элемент нумерованного

                   Удачи вам! До скорых встреч на страницах блога сайт

                   Вам может быть интересно

                   Как вставить в HTML ссылку и картинку (фото) - теги IMG и A Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
                   Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
                   Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
                   Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
                   Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
                   Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
                   Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
                   Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
                   Iframe и Frame - что это такое и как лучше использовать фреймы в Html
                   Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)

                   HTML теги

                   Значение и применение

                   Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега

                   (сокращенное от английского ordered list - упорядоченный список). Каждый элемент списка начинается с тега
                   1. (элемент списка).

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

                      Атрибут			Opera		IExplorer	Edge
                      start , type	Да	Да	Да	Да	Да	Да
                      reversed	Да	Да	Да	Да	Нет	Нет

                      Атрибуты

                      Атрибут	Значение	Описание
                      compact	compact	Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height : 80% ). Используйте CSS вместо данного атрибута.
                      	reversed	Указывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
                      start	number	Определяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = "A" и type = "a" ), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = "4" , будет соответствовать букве "D" и список начнётся именно с неё. При использовании значения start = "27" счетчик обнуляется, при этом список становится двухзначным ("27" = "AA", "28" = "AB", "29" = "AC"...).
                      type	1 (по умолчанию) A (большие) a (строчные) I (римские большие) i (римские маленькие)	Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка.

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

                      1. Первый пункт Второй пункт
                      2. Третий пункт

                      Выглядеть на странице это будет соответственно так:

                      1. Первый пункт.
                      2. Второй пункт.
                      3. Третий пункт.

                      Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега

                      .

                      Например:

                      Ещё один интересный атрибут - type , который позволит Вам задать буквенную нумерацию ("A" – большие, "a" – строчные), либо нумерацию из римских цифр ("I" – в верхнем регистре, "i" – в нижнем регистре).

                      Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):

                      >
                      1. Первый пункт Второй пункт
                      2. Третий пункт
                      >
                      1. Первый пункт Второй пункт
                      2. Третий пункт
                      >
                      1. Первый пункт Второй пункт
                      2. Третий пункт
                      >
                      1. Первый пункт Второй пункт
                      2. Третий пункт

                      Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка

                      3. ):
                         1. Первый пункт
                            1. Первый пункт Второй пункт
                            2. Третий пункт
                            Второй пункт
                            3. Третий пункт

                            Выглядеть на странице это будет соответственно так.