Списки в html

Как создать автоматическое содержание

Более эффективный и эргономичный способ. При этом обязательно выполнение одного условия – документ должен быть разбит на разделы с заголовками. Следует выполнить следующие шаги:

Найти на вкладке «Главная» опцию «Стили».

Применить соответствующие стили к названиям глав, которые требуется внести в оглавление. К примеру, для разделов – «Заголовок 1», а для подразделов – «Заголовок 2» и т.д.

• Установить курсор в месте, где будет содержание.
• Во вкладке «Ссылки» клацнуть по опции «Оглавление». В раскрывшемся списке выбрать «автособираемый» вариант 1 или 2.

Оглавление будет меняться по умолчанию при редактировании названий разделов, подразделов, их последовательности и номеров страниц.

Самый простой способ перехода к нужному разделу без пролистывания нескольких десятков страниц – открыть страницу с оглавлением, зажать клавишу Ctrl и щелкнуть левой кнопкой мышки по определенной главе.

Если переход не работает, следует включить гиперссылки через параметры:

• Перейти на страницу с содержанием.
• Во вкладке «Ссылки» нажать на опцию «Оглавление» и выбрать в конце списка одноименный пункт.

Поставить галочку в поле «Гиперссылки вместо номеров страниц». Нажать «Ок».

На экране появится уведомление. Согласиться, кликнув по «Да».

Как отформатировать?

Если внешний вид стандартного содержания по какой-то причине не устраивает, можно настроить его самостоятельно:

• Клацнуть по «Оглавлению» во вкладке «Ссылки» и выбрать одноименный пункт.
• В открывшемся окне с настройками меняются такие параметры, как заполнитель (точки возле разделов), номера страниц (их скрытие, отображение), уровни.

Щелкнув по параметру «Изменить», откроется новое окно, где задается шрифт и размер.

Можно поменять уровни подразделов: установить курсор перед заголовком, во вкладке «Ссылки» выбрать вариант «Добавить текст» и кликнуть по желаемому уровню.

Как обновить?

Часто в процессе проверки текста требуется отредактировать названия заголовков. Чтобы автоматически обновить оглавление, следует:

• Во вкладке «Ссылки» кликнуть по опции «Обновить страницу».
• Выбрать вариант: обновить текст целиком или только номера страниц.

Также обновить разделы и номера страниц возможно, если щелкнуть правой кнопкой мышки по содержанию и выбрать «Обновить поле».

Виды

В тексте используются два вида списков: нумерованный и маркированный. Активно применяются оба вида. Хотя различить их можно визуально, но они несут разную смысловую нагрузку.

Нумерованный список в HTML используется при перечислении заранее известного количества пунктов, и обосабливаются они друг от друга цифрами. Часто приводится их количество в предшествующем списку предложении. Пример: «Над профессиональным сайтом работают три вида специалистов:

1. Веб-дизайнер.
2. Специалист по контенту.
3. Веб-программист.»

Маркированный список обосабливает пункты друг от друга маркерами — мелкими графическими элементами (точки, галочки). Применяется в тех случаях, когда количество перечислений не определено и подразумевается существование других: «Наиболее доступно для новичков, изучающих HTML, в своих книгах излагают материал следующие авторы:

• Ч. Муссиано;
• Б. Хеник;
• Н. Комолова;
• Е. Полонская».

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

Нумерованные списки в HTML

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

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

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

Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

2.1
Стандартные маркеры для нумерованного списка

Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

2.2
Своя нумерация в списке HTML

Кроме обычного вывода нумерованного списка мы также можем начать свою нумерацию с любой цифры. Для этого необходимо задать дополнительный атрибут «start»
. Такая нумерация работает на всех видах маркеров у нумерованных списков. Как это выглядит на практике:

Вот как это будет отображаться на реальном сайте:

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

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

Полезные материалы по спискам HTML

Здесь находится информация, для которой необходимо понимание свойств CSS. Для этого рекомендую изучить следующие уроки: . Все примеры будут сразу с исходным кодом и разбиты по вкладкам HTML (структура), CSS (стили) и Result (результат).

4.1
Как сделать список HTML в строку

4.2
Как сделать список HTML без значка

4.3
Как сделать список в HTML по центру

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

4.4
Как сделать список в HTML с картинками

Достаточно лишь одного свойства CSS list-style-image
. Внутри url указать адрес до иконки. Хочу лишь заметить, что изображение лучше сразу подбирать маленькое, потому что от него зависит высота строки списка:

4.5
Маркированный список HTML свой маркер

В этом случае необходимо заранее подключить шрифтовые иконки (например, FontAwesome
). Тогда можно сделать любую иконку вместо стандартного маркера:

4.6
Как сделать список в HTML в несколько столбцов

Чтобы сделать список в несколько столбцов мы воспользуемся свойством CSS column-count
(свойство поддерживается только в следующих браузерах: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Также необходимо задать высоту для списка, чтобы увидеть разбиение на несколько столбцов:

Нумерованный список

Чтобы создать нумерованный список, в HTML используется парный тег <ol> … </ol>. Между ними (вместо трех точек) прописываются пункты списка, заключенные в теги <li> … </li> — тоже парные. Пример:

По умолчанию на выходе получаются арабские цифры, но с помощью определенных параметров тега <li> можно изменить стиль нумерованного списка HTML. Синтаксис разметки — <li type=»A»>. Имеется четыре типа нумерованных списков HTML, которые нагляднее представить в виде таблицы:

То, как сделать нумерованный список в HTML (в том числе цифры с круглой скобкой), рассматривается в процессе изучения CSS.

Многоуровневый список

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

Вот пример многоуровневого списка:

<!DOCTYPE html>
<html>
<head>
    <title>Многоуровневый список</title>
</head>
<body>
<strong>Языки программирования делятся на:</strong>
<ul>
  <li>Структурные</li>
    <ol>
      <li>Pascal</li>
      <li>Oberon</li>
      <li>C</li>
        <ol>
          <li>Go</li>
          <li>Limbo</li>
        </ol>
      <li>Lua</li>
    </ol>
  <li>Объектно-ориентированные</li>
    <ol>
      <li>C++</li>
      <li>Java</li>
    </ol>
  <li>Функциональные</li>
    <ol>
      <li>Lisp</li>
      <li>Python</li>
    </ol>
</ul>
</body>
</html>

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Маркированный список

В маркированном списке каждый пункт помечается специальным маркером. Маркированный список создаётся
с помощью тэга <ul>, а каждый пункт списка с помощью
тэга <li>. Стандарт HTML5 позволяет
не ставить закрывающий тэг у пунктов списка. Но я рекомендую всё же закрывать все парные тэги.
Так код будет более универсальным.

Пример маркированного списка:

+

<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>

Атрибут type устанавливает внешний вид маркера. Может принмаать следующие
значения:

type=»disc» — в виде круга (по умолчанию)

type=»circle» — в виде окружности

type=»square» — в виде квадрата

Установим атрибут type для списка.

<ul type="circle">

Маркированные списки в HTML

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

А вот так выглядит в браузере:

1.1
Стандартные маркеры для маркированного списка

На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

1.2
Маркер списка в виде пустого круга

Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type
и задали его нашему маркированному списку:

Сразу смотрим как этот код будет выглядеть в браузере:

1.3
Маркер списка в виде квадрата

Посмотрим также и последний пример с квадратным маркером для HTML списка:

Обратите внимание на маркер, он стал квадратным:

Важное замечание:
сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML

HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

Ошибка будет следующая:

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

Многоуровневые списки

Если какие-то пункты списка должны содержать подпункты, необходимо использовать вложенные списки. Для этого в каждый такой элемент списка, где требуются подпункты, вкладывается ещё один список, то есть в HTML-элемент или вкладывается элемент или , в зависимости от того, какого типа должен быть вложенный список.

Пример разметки многоуровневого маркированного списка:

<ul>
  <li>Первый пункт списка.</li>
  <li>Второй пункт списка.
    
    <ul>
      <li>Первый подпункт второго пункта.</li>
      <li>Второй подпункт второго пункта.</li>
      <li>Третий подпункт второго пункта.</li>
    </ul>
    
  </li>  
  <li>Третий пункт списка.</li>
</ul>

Вид в браузере:

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

Пример разметки многоуровневого нумерованного списка:

<ol>
  <li>Первый пункт списка.</li>
  <li>Второй пункт списка.
    
    <ol type="a">
      <li>Первый подпункт второго пункта.</li>
      <li>Второй подпункт второго пункта.</li>
      <li>Третий подпункт второго пункта.</li>
    </ol>
    
  </li>  
  <li>Третий пункт списка.</li>
</ol>

Вид в браузере:

Нумерованные html-списки

В HTML 5 используется три вида списков: нумерованный, маркированный и список определения.

Нумерованный список формируется парным тегом
<ol>
(от англ. ordered list – упорядоченный список). Сам элемент
«ol» используется, как контейнер для пунктов списка, которые формируются парными тегами
<li>
(от англ. list item – пункт списка)
и располагаются друг за другом.

По умолчанию пункты списка нумеруются браузером по порядку, начиная с единицы. Если нумерацию нужно начать не с единицы, то используется
атрибут start, который задает число, с которого будет начинаться нумерованный список. В
качестве значения атрибут принимает целые числа. Можно также изменить порядок нумерации на обратный. Для этого служит атрибут
reversed, который используется без значений. Атрибут введен в HTML 5 и работает
во всех браузерах, кроме IE.

Имеется также возможность устанавливать вид маркера нумерованного списка. Для этого используется атрибут
type, который может принимать значения «A | a | I | i | 1», которые,
соответственно, означают:

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

Поскольку все перечисленные значения, и не только, могут быть с легкостью установлены через стили CSS, использование
атрибута type, по мнению автора, не целесообразно, хотя и допускается в HTML 5.

Использование нумерованного списка показано в примере №1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Нумерованный список</title>
</head>
<body>
	<em style="color: green">Весенние месяцы по порядку:</em>
	
	<ol start="3" title="Весенние месяцы">
		<li>март</li>
		<li>апрель</li>
		<li>май</li>
	</ol>
	
	<em style="color: red">Летние месяцы в обратном порядке:</em>
	
	<!-- Перечисляем в обратном порядке. В IE не работает! -->
	<ol start="8" reversed>
		<li>август</li>
		<li>июль</li>
		<li>июнь</li>
	</ol>
</body>
</html>

Пример №1. Использование элемента «ol»

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

Графические маркеры.

В HTML есть возможность создать список с графическими маркерами. Одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое – когда разработчик сам подбирает маркер в соответствии с дизайном страницы. Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.
Чтобы заменить обычный маркер на графический, заменим свойство list-style-type на свойство list-style-image и укажем URL–адрес картинки:

Пример: Графические маркеры

• Результат
• HTML-код
• Попробуй сам »

Знаки зодиака

• Овен
• Телец
• Близнeцы

Обратите внимание на размер картинки — он не должен быть слишком большим, обычно 10-25 пикселей.

OL, упорядоченные списки (или нумерованные списки)

упорядоченный список пронумерованный списком элементов, составляющих список. Тег для открытия упорядоченного списка — <ol>, и в этом случае элементы идентифицируются тегом <li> :

<ol>
	<li>первый элемент</li>
	<li>второй элемент</li>
	<li>третий элемент</li>
</ol>

Тип атрибута, чтобы описать тип списка

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

Start и value, управлять нумерацией

Может случиться, что для разных нужд мы хотим начать нумерацию с определенного значения, в этом случае мы используем два атрибута:

Вот простой пример:

<ol start="10">
  <li>элемент</li>
  <li>элемент</li>
  <li value="30">элемент</li>
  <li>элемент</li>
</ol>

Простой пример многоуровневого списка

• Первый элемент списка
• Второй элемент списка
  • Первый элемент вложенного списка
  • Второй элемент вложенного списка
  • Третий элемент вложенного списка
• Третий элемент списка
• Четвертый элемент списка
• Пятый элемент списка

Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения «Ordered List» — нумерованный список.

Синтаксис тега

Маркированный список.

Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).

По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.

Давайте рассмотрим примеры использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <ul></title>
	</head>
	<body>
		<ul>
			<li>Светлое</li>
			<li>Тёмное</li>
			<li>Пятница</li>
		</ul>
	</body>
</html>

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

• Светлое
• Тёмное
• Пятница

Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style.
Более подробно этот атрибут будет рассмотрен в следующей статье «HTML стили».

Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера.
Возможные значения свойства:

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример изменения типа маркера маркированного списка</title>
	</head>
	<body>
		<ul style = "list-style-type:none">  <!-- маркер отсутствует -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:disc">  <!-- маленький черный круг -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:circle">  <!-- круг пустой внутри -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>
		<ul style = "list-style-type:square">  <!-- маркер в форме квадрата -->
			<li>Первый пункт</li>
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</ul>		
	</body>
</html>

Результат нашего примера:

Рис. 15 Маркированные списки.

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

• Первый пункт
  • Первый пункт
    • Первый пункт
      • Первый пункт
      • Второй пункт
      • Третий пункт
    • Второй пункт
    • Третий пункт
  • Второй пункт
  • Третий пункт
• Второй пункт
• Третий пункт

Практика работы со списками

На видео ниже вы можете увидеть всю работу со списками HTML на практике:

Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.

Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

Что такое маркированный список? Это специальный список, который не содержит в себе каких-либо упорядоченных действий, но тем не менее содержит схожие по смыслу элементы. И выделяются такие списочки какими либо значками, например маркерами, дефисами и т.д. Вот у меня на блоге они у меня представлены в виде указательного пальца и использую я его, когда перечисляю что-либо. Давайте посмотрим не примере.

Компьютерные комплектующие:

• Материнская плата
• Оперативная память
• Жесткий диск
• Видеокарта
• И т.д.

Давайте теперь посмотрим как это всё воспроизвести в html

Чтобы делать такие списки, нам нужно будет использовать два парных .

— unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.

— list item (пункт списка). В эти теги заключается каждый элемент списка.

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

• Peugeot
• Opel

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

Списки в html

В коде html используют теги, чтобы оформить различного рода перечни и перечисления.

Нумерованный список в html, пример: По умолчанию он отображается в браузере с такими атрибутами

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.

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

Html список нумерованный многоуровневый

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

Пример разметки: Список второго уровня поместили внутрь тега <li>, только потом его закрыли.

Теги для маркированного списка

Пункты маркированного списка создаются тегами <li>.
Браузеры формируют блоки списков автоматически, с такими атрибутами В маркированном списке html можно ставить галочки вместо маркеров точек. В таблицу css поместите этот код Тогда список будет выглядеть так
Так же как нумерованные, маркированные списки можно делать многоуровневыми.

Может ли многоуровневый список включать как нумерованные так и маркированные списки? Ответ: да. Вот пример разметки
Надо добавить в стили код

ol ol{
 list-style-type: lower-alpha;
}

Свойство list-style-type: lower-alpha заменит нумераторы цифр внутреннего списка на строчные латинские буквы. Селектор ol ol выберет все списки, которые имеют уже второй уровень вложенности. 

Советы копирайтерам по составлению списков

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

Что они могут объединять в списки? ОДНОТИПНЫЕ ХАРАКТЕРИСТИКИ:

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

Чтобы пользователь уделил равное внимание всем пунктам списка, делайте предложения (пунктики перечня) примерно одной длины. Для перечисления (статистики) берите только реальные цифры

Вот пример списка на одностраничном сайте, его даже можно считать УТП. Его появление на первом экране полностью оправданно.

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

Как оформлять списки в тексте

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

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

Пример — 6 лучших курортов для бюджетного отдыха, 5 простых продуктов для быстрого похудения.

Чтобы нумерованные и маркированные списки выглядели логично, аккуратно, грамотно, каждый пункт начинайте с одной части речи (с глагола или существительного). 

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

Чтобы не повторяться, не нарушить принципы Seo, не попасть под фильтр Баден-Баден (переспам), ключевые слова заменяйте синонимами, либо хотя бы вставляйте стандартные названия не по порядку.

Вот плохой пример, над этим тестом надо серьезно поработать. 

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

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

Если набирается всего пара буллетов, укажите их в одном предложении

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

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

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

Cписки в html wordpress

Функции движка позволяют легко преобразовать текст в перечень. В отличие от html страниц на блогах WordPress все значительно проще. Достаточно выделить текст, нажать в меню кнопку и создать нумерованный или маркированный список.

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

Что такое маркированный список (или ненумерованный список)

Маркированный список это первый вид списка, который мы рассмотрим.

Как создать маркированный список — ul что это за тег?

Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:

<ul type="square">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
</ul>

Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.

Атрибут type

Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя нумерованный список CSS позволяет задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и  создавая нумерованный список HTML):

Элементы списка — тег <li>

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

Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:

Отступ маркированного списка

Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.

Нумерованный список

Чтобы создать нумерованный список используйте теги <ol> и <li>. Тег ol — это контейнер нумерованного списка. Тег li — элемент списка.

1. Выучить HTML
2. Добавить CSS
3. Освоить JavaScript

Исходный код нумерованного списка

Типы нумерации в HTML списке

В HTML доступны 5 типов нумерации в списках. Чтобы изменить тип нумерации используйте атрибут type. Тип нумерации можно задавать как для списка в целом, так и для конкретных его элементов.

Разные типы нумерации в списках:

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

Пронумерованный список HTML страницы.

Для того, чтобы создать нумерованный список следует применить теги:<ol><li>……</li></ol>.

<ol> — начало списка

<li> — начало отдельного элемента списка

</li> — конец отдельного элемента списка

</ol> — конец списка

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Нумерованный список HTML страницы </title>
</head>
<body>

<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>

</body>
</html>

По умолчанию нумерованный список нумеруется по порядку 1,2,3…

Результат:

Атрибут TYPE и START для нумерованных списков.

Если к тегу <ol> добавить атрибут TYPE, можно добавить стиль нумерации пунктов списка

«A» – заглавные буквы A, B, C …»a» – строчные буквы a, b, c …»I» – большие римские числа I, II, III …»i» – маленькие римские числа i, ii, iii …»1″ – арабские числа 1, 2, 3 …

Если к тегу <ol> добавить атрибут START, можно задать любое число, с которого будет идти нумерация.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Пронумерованный список HTML страницы </title>
</head>
<body>

<!-- пример списка с арабскими числами -->
Чтобы создать сайт, нужно знать:
<ol type="1" >
<li> html </li>
<li> css </li>
<li> и ознакомиться с php </li>
</ol>

<!-- пример списка с большими римскими числами -->
Если хотите быстро создать сайт, изучите такие программы:
<ol type="I" >
<li> Adobe Dreamweaver </li>
<li> WordPress </li>
<li> Photoshop </li>
</ol>

<!-- пример списка с маленькими буквами -->
Чтобы увеличить посещаемость сайта, нужно:
<ol type="a" >
<li> добавлять постоянно новые статьи </li>
<li> добавлять постоянно новые статьи</li>
<li> и еще раз добавлять постоянно новые статьи</li>
</ol>
<!-- пример списка не с начала -->
Чтобы стать успешным:
<ol type ="1" start="2" >
<li> не бойся начать все заново </li>
<li> не бойся делать ошибки </li>
<li> не останавливайся на начатом</li>
</ol>
</body>
</html>

Результат:

Переходим к уроку 5 — «Как сделать ссылку в HTML«

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

• Как узнать id компьютера
  Дата: 29 марта 2013
  Прокомментировано:90
  просмотров: 325687

• Размеры форматов листов А0 – А7
  Дата: 23 января 2013
  Прокомментировано:3
  просмотров: 272067

• Смешные логические загадки с подвохом, отгадки прилагаются
  Дата: 12 ноября 2014
  Прокомментировано:5
  просмотров: 204811

• Установка windows 7 на ноутбук
  Дата: 18 декабря 2012
  Прокомментировано:169
  просмотров: 185225

• Как включить или отключить Aero в Windows 7
  Дата: 1 июня 2013
  Прокомментировано:6
  просмотров: 160064

Итог

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

Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».

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

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

Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.