Список определений html

Список определений — это один из самых запутанных и непонятных уголков стандарта HTML 4. Одни считают, что <dl> следует использовать только для разметки списка терминов (глоссарий). Их аргументы — это само название тега и описание в спецификациях.

W3C трактует тег dl довольно кратко:

Списки определений отличаются от других типов списков лишь тем, что списки <dl> состоят из двух частей: термин и описание. Термин задается элементом <dt> и может содержать текст и/или элементы строчного уровня (inline content). Описание задается элементом <dd>, который может содержать элементы уровня блок.

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

Другое применение dl, это например, для разметки диалогов, где dt — это имя говорящего, а dd его текст.

Мне ближе второе мнение. Правильность его подтверждается еще и тем, что в HTML 5 dl описан уже немного иначе:

dl представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение.

Все вроде предельно понятно.

Когда

Когда вовремя вспомнишь об этом теге в очередной верстке.

Где

Несколько примеров, где dl будет на своем месте:

Глоссарии

Диалоги

Анонсы новостей

Формы

Характеристики

Вывод

Видишь ассоциативные связи, состоящие из пар имя-значение — смело применяй <dl>. Это будет логически (семантически) правильно.

Поправки на HTML5

update 15.04.11 by SelenIT С приходом HTML5 у нас как разработчиков прибавилось семантических тегов. В связи с чем область применения <dl> сократилась. Если быть точнее, то для списка новостей лучше использовать конструкцию из независимых логических блоков <section> или <article>. Для даты в таком случае используется тег <time>. А для диалогов появился специальный тег <dialog>.

Материалы

• W3C :: HTML 4 :: Definition lists
• cs.tut.fi
• xhtml.com
• maxdesign.com.au
• W3C :: HTML 5 :: The dl element

xiper.net

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

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>  

  
 

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

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

Здесь: type – символы списка:

• A — прописные латинские буквы (A, B, C . . .);
• a — строчные латинские буквы (a, b, c . . .);
• I — большие римские цифры (I, II, III . . .);
• i — маленькие римские цифры (i, ii, iii . . .);
• 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

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

Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу <li> следующим образом:

<li value="7"> 

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

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Форматирование нумерованных списков с помощью CSS

Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ol style="list-style-type:lower-roman"> 

Стили оформления нумерованных списков

Пример	Значение	Описание
а, Ь, с	lower-alpha	Строчные буквы
А, В, С	upper-alpha	Прописные буквы
i, ii, iii	lower-roman	Римские цифры, набранные строчными буквами
I, II, III	upper-roman	Римские цифры, набранные прописными буквами

На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:

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

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

 

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

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

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

Вложенные списки

Любой список может быть вложен в другой. Внутри элемента <li> допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента <li> уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.

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

Форматирование маркированных списков

Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:

<ul style="list-style-type:square"> 

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

Значение	Описание
disc	маркер в форме кружков с заливкой
circle	маркер в форме кружков без заливки
square	маркер в форме квадрата с заливкой
none	пункты списка без маркера

В следующем примере рассмотрены различные стили оформления маркированных списков:

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

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

<ul style="list-style-image: url(images/Star.png);">

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

Списки определений (описаний)

Списки определений очень удобны для создания, например, вашего личного словаря терминов. У каждого пункта списка определений есть две части: термин и его определение.
Вы помещаете весь список в элемент <dl> (от англ. Definition List – список определений). Он включает в себя теги <dt> (от англ. Definition Term – определяемое слово, термин) и <dd> (от англ. Definition Description – описание определяемого термина).
Списки определений часто используют в научно-технических и учебных изданиях, оформляя с их помощью глоссарии, словари, справочники и т.д.

Общая структура списка описаний имеет следующий вид:

<dl>  <dt>Первый термин</dt>  <dd>Описание первого термина</dd>  <dt>Второй термин</dt>  <dd>Описание второго термина</dd> </dl>

В следующем примере показано одно из возможных использований списка определений:

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

	Элемент <dl> содержит только элементы <dt> и <dd>. Вы не мо жете поместить блочные элементы (например, абзацы) внутрь термина <dt>, но определения <dd> могут содержать любой элемент потокового контента.

---

wm-school.ru

Создание HTML-списков

• Содержание:
• 1. Маркированный список <ul>
• 2. Нумерованный список <ol>
• 3. Список определений <dl>
• 4. Вложенный список
• 5. Многоуровневый нумерованный список

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

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

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

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

<ul>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ul>

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

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

Блок списка также имеет стили браузера по умолчанию:

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

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>

Атрибут	Описание, принимаемое значение
reversed	Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
start	Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция <ol start="10"> первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, <ol type="I" start="10">.
type	Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения: 1 — значение по умолчанию, десятичная нумерация. A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D). a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d). I — нумерация римскими заглавными цифрами (I, II, III, IV). i — нумерация римскими строчными цифрами (i, ii, iii, iv).

<ol>   <li>Microsoft</li>   <li>Google</li>   <li>Apple</li>   <li>IBM</li>  </ol>

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

dl {margin-top: 1em; margin-bottom: 1em;}

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

<dl>   <dt>Режиссер:</dt>   <dd>Петр Точилин</dd>   <dt>В ролях:</dt>   <dd>Андрей Гайдулян</dd>   <dd>Алексей Гаврилов</dd>   <dd>Виталий Гогунский</dd>   <dd>Мария Кожевникова</dd>  </dl>

4. Вложенный список

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

<ul>   <li>Пункт 1.</li>   <li>Пункт 2.   <ul>   <li>Подпункт 2.1.</li>   <li>Подпункт 2.2.    <ul>   <li>Подпункт 2.2.1.</li>   <li>Подпункт 2.2.2.</li>   </ul>   </li>    <li>Подпункт 2.3.</li>   </ul>   </li>   <li>Пункт 3.</li>  </ul>

5. Многоуровневый нумерованный список

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

<ol>   <li>пункт</li> <!-1.->   <li>пункт    <ol>   <li>пункт</li> <!-2.1.->   <li>пункт</li> <!-2.2.->   <li>пункт   <ol>   <li>пункт</li> <!-2.3.1.->   <li>пункт</li> <!-2.3.2.->   <li>пункт</li> <!-2.3.3.->    </ol>   </li> <!-2.3.->   <li>пункт</li> <!-2.4.->    </ol>   </li> <!-2.->   <li>пункт</li> <!-3.->    <li>пункт</li> <!-4.->   </ol>

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

ol {  /* убираем стандартную нумерацию */  list-style: none;   /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */   counter-reset: li;   }  li:before {  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */  counter-increment: li;   /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */  content: counters(li,".") ". ";   }

html5book.ru

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

Данный вид списка используется наиболее часто. Маркированный список в HTML создается при помощи тегов <ul> <li>. При этом напротив каждого элемента списка добавляется маркер, по умолчанию это маркер в виде кружка. При помощи тегов <ul></ul> создается контейнер, внутри которого располагаются элементы списка: <ul><li></li></ul>.

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

Можете попробовать создать HTML страничку, используя данный код и у вас, в результате получится следующий список:

Как вы можете заметить, каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик. У тега <UL> есть атрибут type, при помощи которого, и задается стиль маркера. Данный атрибут имеет следующие значения:

• disc — круг;
• circle — окружность;
• square — квадрат.

Значение disc используется по умолчанию.

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

В результате список примет, следующий вид:

Создание маркированного списка с маркерами в виде квадратиков:

Список будет иметь вид:

Атрибут type можно применять не только к тегу <UL>, но и к тегу <LI>. Таким образом можно создать список с разнообразными маркерами.

В результате получится следующее:

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

Нумерованные списки в HTML представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки при помощи тега <OL> и вложенных в его тегов <LI>

Выглядит такой список следующим образом:

По умолчанию нумерация производится арабскими цифрами. Но у тега <OL> есть атрибут type, при помощи значений которого нумерацию можно делать заглавными (type=»A») или строчными (type=»a») латинскими буквами, римскими цифрами в верхнем (type=»I») и нижнем (type=»i») регистре.

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

Нумерация арабскими цифрами:

Вид списка:

Нумерация заглавными латинскими буквами:

Вид списка:

Нумерация строчными буквами латинского алфавита:

Вид списка:

Нумерация римскими цифрами в верхнем регистре:

Вид списка:

Нумерация римскими цифрами в нижнем регистре:

Вид списка:

Список определений в HTML.

Особым видом списков являются списки определений. Они отличаются тем, что каждый элемент списка состоит из двух элементов, термина и текста который раскрывает его значение. Создаются данные списки при помощи тегов <DL><DT><DD>. Тег <DL> создает контейнер для списка, тег <DT> устанавливает термин, а тег <DD> описание или определение термина.

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

В результате получится следующий список:

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

Вложенные или многоуровневые списки в HTML.

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

Например, вот код, при помощи которого в элементы маркированного списка вложены нумерованные списки.

Вложенный список будет иметь такой вид:

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

Материал подготовлен сайтом: WebMasterMix.ru

webmastermix.ru

Списки в HTML (XHTML)

 Списки в HTML (XHTML) используются для оформления и форматирования видимой текстовой части html-документа. Дополнительно, на основании кодов списков, в HTML-разметке веб-страницы создаются и группируются элементы управления и навигации – кнопочки и менюшки (простые и выпадающие). Коды списков языка гипертекстовой разметки HTML ничем не отличаются от кодов списков XHTML…

1. Код и видимая часть списков HTML
2. Виды списков в HTML
   
   • Маркированный список
   • Нумерованный список
   • Список определений
   • Многоуровневые (вложенные) списки
   • Ненумерованные и немаркированные списки
   • Выпадающие списки
3. Теги списков в HTML
   <ul>,<ol>,<li>,<dl>, dt>,<dd>
4. Как создать список в html
5. Примеры списков html
   
   • Маркированный | Теги <ul> и <li>
   • Нумерованный | Теги <ol> и <li>
   • Многоуровневые (вложенные) списки
   • Список определений | Теги <dl>, <dt> и <dd>
   • Ненумерованные и немаркированные списки

Код и видимая часть списков HTML

Равно как и все объекты веб-страницы, списки в HTML имеют две составляющие – код списка и его видимую часть (интерпретацию кода). Код списка HTML невидим пользователю. Код записывается в HTML-разметку веб-документа и интерпретируется браузером непосредственно на экран монитора пользователя – это будет видимая часть списка.

Виды списков в HTML

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

Теги списков в HTML

Для создания кода списков в HTML используются теги:
<ul>, <ol> и <li>, а также <dl>, <dt> и <dd>
Все теги парные – закрывающий тег обязателен.
Теги списков в HTML создают и обозначают:

• <ul> – маркированный список
• <ol> – нумерованный список
• <li> – элементы (строки) маркированного и нумерованного списков
• <dl> – список определений
• <dt> – элемент-термин в списке определений
• <dd> – элемент-описание в списке определений

Как создать список в html

Чтобы создать список в веб-документе, нужно в его HTML-разметке написать html-код списка. Код любого html-списка начинается и заканчивается обрамляющими (оборачивающими) тегами (ol, ul, dl) которые указывают браузеру на вид списка. Между оборачивающими (обрамляющими) тегами располагаются элементы списка, обёрнутые, в свою очередь – тегами элементов списка (li, dd, dt).

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

Маркированный html-список | Теги <ul> и <li>

Код маркированного списка начинается с открывающего тега <ul>. Потом идут элементы, обрамлённые парными тегами <li></li>. Код маркированного списка заканчивается закрывающим тегом </ul>. Пример кода маркированного списка:

Маркированный (неупорядоченный) список по-англицки звучит, как Unordered List. Становится понятной аббревиатура его обрамляющего тега – <ul> (Unordered List). Написание тега <ul> заглавными литерами – <UL>. В спецификации HTML нет верхнего регистра. Правильно писать – <ul>

Нумерованный html-список | Теги <ol> и <li>

Код нумерованного списка ничем не отличается от кода маркированного списка, с той разницей, что обрамляющие список теги <ul> заменяются на <ol> (анг. Ordered List – нумерованный, упорядоченный список). Код нумерованного списка открывает тег <ol>. Внутри находятся элементы, обрамлённые парными тегами, вида <li>элемент</li>. Закрывается код нумерованного списка тегом </ol>. Пример кода нумерованного списка:

Многоуровневые (вложенные списки)

Вложенные (многоуровневые, ступенчатые) списки в HTML представляют наибольший интерес. Чтобы создать многоуровневый вложенный список в HTML, нужно в код одного списка вставить код другого списка. Код вложенного списка вставляется в виде отдельного элемента, между тегами <li></li>. Порядок и степень вложения не имеет значения. Допускается вкладывать маркированный список в нумерованный и наоборот, на любую глубину и пока не надоест. Браузер всё вытерпит. Пример кода многоуровневого списка со вложенными списками (код основного списка обозначен синим цветом, первого вложенного – жёлтым, второго вложенного – зелёным):

Список определений | Теги <dl>, <dt> и <dd>

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

Код списка определений начинается открывающим тегом <dl> (анг. Definition Lists – список определений). После него идёт элемент-термин списка, который требуется объяснить – этот элемент обрамлён парным тегом <dt></dt>. Дальше идёт текстовый объясняющий элемент списка, он обрамлён парным тегом <dd></dd>. Код списка определений заканчивается закрывающим тегом </dl>. Пример кода списка определений:

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

Элементы списка определений не имеют бу́ллетов – специальных типографских знаков. В HTML, списки определений существует исключительно для создания описаний и оформления текстовой видимой части веб-документа. Маркированный и нумерованный списки значительно универсальней и разнообразней. Управление их внешним видом производится при помощи атрибутов тегов списка и атрибутов тегов элементов (строк) списка. Дополнительно, маркированный и нумерованный списки используются в html-разметке веб-страниц для создания и группирования элементов управления и навигации.

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

Список без ничего – без нумерации, маркировки и прочих списочных причиндалов (бу́ллетов), получится из маркированного или нумерованного списка, после присвоения последнему свойства list-style:none;

Более сложный способ скрыть/убрать бу́ллеты (маркеры) у списка – это добавить ему свойство overflow: hidden;, которое обрезает выступающую за пределы списка маркировку (нумерацию, или что там у него есть). Прим. Обрезание маркеров (overflow: hidden;) работает только за пределами списка – свойство list-style-position: outside; Это свойство устанавливается дефолтными настройками по-умолчанию для всех видов браузеров и, если специально нигде не указано другое (list-style-position:inside;) то тогда добавляем просто overflow: hidden;. Пример кода немаркированного и ненумерованного списка (<ul> или <ol>, не важно):

tehnopost.info

Список определений

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

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

Список определений создается с помощью тега <dl> (Definition List), внутри которого указывается тег <dt> (Definition Term), выделяющий термин, и тег <dd> (Definition Description), содержащий описание к данному термину:

  <html>   <body>     <h4>Список определений:</h4>   <dl>   <dt>Кофе</dt><dd>Бодрящий горячий напиток</dd>   <dt>Молоко</dt><dd>Полезный холодный напиток</dd>   </dl>     </body>  </html>  

Попробовать »

Внутри элемента <dd> вы можете размещать абзацы, строки, изображения, ссылки, другие списки и т.д.

Вложенные списки

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

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

  <html>   <body>     <h4>Вложенный список:</h4>   <ul>   <li>Кофе</li>   <li>Чай   <ol>   <li>Черный чай</li>   <li>Зеленый чай</li>   </ol>   </li>   <li>Молоко</li>   </ul>     </body>  </html>  

Попробовать »

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

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

puzzleweb.ru

Что такое списки в HTML, какие они бывают

Список (HTML) — текстовое перечисление однородных членов предложения, оформленное в виде списка.

Какие бывают списки?

• Нумерованный список;
• Маркированный список (не нумерованный);
• Многоуровневый список;
• Список определений;
• Выпадающий список.

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

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

Пример:

Список это однородные ответы, отвечающие на один и тот же вопрос обобщающего текста.

Пример:

Разница очень заметна, не так ли? Правильный список такой, что легко «складывается» в предложение с простым перечислением однородных членов.

Где применяются списки?

1. Нумерованные списки — применяются при необходимости перечислить элементы списка в определенном порядке, либо чтобы упростить ссылку на конкретный элемент списка (в дипломе, печатном документе, проектной работе);
2. Маркированные списки — применяются при перечислении однородных элементов в произвольном порядке, т.е. если порядок не имеет значения;
3. Многоуровневые списки используются для детализации информации отдельных элементов;
4. Список определений в HTML используется при необходимости форматирования словаря.

HTML-практикум ч.1: как сделать упорядоченный нумерованный список

Нумерованные списки создаются при помощи тегов <ol></ol> и <li></li>, причем последний является тегом для перечисления однородных членов и помещается внутри тега <ol></ol> (ol — ordered list).

Соответственно, <li></li> — начало и конец элемента списка, а <ol></ol> — начало и конец самого нумерованного списка.

Покажу на примере. Код:

Результат:

По умолчанию форматирование нумерации элементов нумерованного списка осуществляется так: 1, 2 и т.д. Стиль нумерации задается при помощи атрибута list-style-type. Смотрите, что получится, если применить стиль ко всему списку «list-style-type: upper-roman;» и затем «list-style-type: lower-alpha;».

Вы также можете использовать не CSS, а напрямую прописать атрибут TYPE, вот так:

TYPE может принимать значения:

• «A» — для нумерации A, B..
• «a» — для нумерации a, b..
• «I» — для нумерации I, II..
• «i» — для нумерации i, ii..
• «1» — для нумерации 1. 2. и далее по порядку.

Есть дополнительные атрибуты «start» и «value». Start — для задания номера первого элемента списка (все последующие считаются относительно него), value — для присвоение определенного номера любому из элементов списка.

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

Пример кода:

Результат:

HTML-практикум ч.2: маркированный список

Маркированные списки создаются при помощи тегов <ul></ul> и <li></li>, последний как вы знаете является тегом для перечисления однородных членов и помещается внутри тега <ul></ul> (ul — unordered list).

Соответственно, <li></li> — начало и конец каждого из элементов списка, а <ul></ul> — начало и конец самого маркированного списка.

По умолчанию маркированные элементы списка отображаются в виде черных кружочков.

Код:

Результат:

Вы также можете выставить для элементов <li> атрибут type: disc (закрашенные кружочки), square (квадратики) или circle (незакрашенные кружочки или окружности). Тогда список примет такой вид:

Те же самые атрибуты можно применить и ко всему списку сразу, добавив CSS-свойство к тегу <ul>. Т.к. disc используется по умолчанию, я возьму circle: «list-style-type: circle;».

Код:

Результат:

HTML-практикум ч.3: как сделать неупорядоченный ненумерованный список без маркеров

Это очень просто. Неупорядоченные списки также создаются при помощи тегов <ul></ul> и <li></li>, — как вы уже знаете в этом случае нумерации не будет. Но будут маркеры, то есть список будет маркированным. Но и маркеры несложно убрать, это делается при помощи стиля в CSS: «list-style-type: none;».

Код:

Результат:

HTML-практикум ч.4: вложенный многоуровневый древовидный список

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

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

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

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

Код:

Результат:

HTML-практикум ч.5: как сделать список определений

Списки определений создаются при помощи тегов <dl></dl>, <dt></dt> и <dd></dd>.

• <dl></dl> (dl — description list) — обозначает начало и конец списка определений;
• <dt></dt> (dl — description term) — обозначает начало и конец одного термина;
• <dd></dd> (dd — definition description) — обозначает начало и конец одного определения/пояснения для одного термина.

Такой список по умолчанию получается многоуровневым и древовидным.

Пример кода:

Результат:

Итог

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

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

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

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

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

blogwork.ru

Списки определений

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

Каждое определение и термин является группой определения (или группой имя-значение). Можно иметь любое требуемое количество групп определений, но в каждой группе должны быть как минимум один термин и как минимум одно определение. Нельзя иметь термин без определения или определение без термина.

Можно ассоциировать более одного термина с одним определением, или наоборот. Например, термин «кофе» может иметь несколько значений, и можно показать их одно за другим:

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

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

Поэтому списки определений используют одну пару элементов <dl></dl>, охватывающую группы тегов <dt></dt> и <dd></dd>. Необходимо располагать парами как минимум одну группу тегов <dt></dt> с одной группой <dd></dd> ; теги <dt></dt> должны всегда быть первыми по порядку.

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

Который выводится следующим образом:

В этом примере мы соединяем более одного термина с определением и наоборот:

Что будет представлено следующим образом:

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

Выбор типа списка

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

1. Определяются термины (или соединяются другие пары имя/значение)?
   • Если да, используйте список определений.
   • Если нет, не используйте список определений — перейдите к следующему вопросу.
2. Важен ли порядок элементов списка?
   • Если да, используйте упорядоченный список.
   • Если нет, используйте неупорядоченный список.

Различие между списками HTML и текстом

Можно задаться вопросом, в чем различие между списком HTML и каким-то текстом с маркерами или числами, написанными вручную. Существует несколько преимуществ использования списка HTML:

• Если потребуется изменить порядок элементов списка в упорядоченном списке, то вы просто перемещаете их в коде HTML. Если числа будут написаны вручную, то придется все просмотреть и изменить число каждого элемента, чтобы исправить порядок — что достаточно скучно, по крайней мере!
• Использование списка HTML позволяет правильно оформить стиль списка. Если используется просто большой текст, то окажется значительно труднее оформить стиль отдельных элементов каким-либо более-менее полезным образом.
• Использование списка HTML создает для контента подходящую семантическую структуру, а не просто «спискообразный» визуальный эффект. Это имеет важные преимущества, так как позволяет считывателям экрана сообщить пользователям с недостатками зрения, что они читают список, а не просто прочитать путаную смесь текста и чисел.

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

Вложенные списки

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

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

Отметим, что вложенный список начинается после элемента <li> и текста, содержащего список элемента («Глава один»); а заканчивается перед элементом </li>, содержащего список элемента. Вложенные списки часто формируют основу для навигационного меню Web-сайта, так как они являются удобным способом определения структуры Web-сайта.

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

Пошаговый пример

Давайте рассмотрим пошаговый пример, чтобы собрать все это вместе. Рассмотрим следующий сценарий:

Мы создаем небольшой Web-сайт для Кулинарной школы. На основной странице мы покажем список классифицированных рецептов, связанный ссылками со страницами рецептов. Каждая страница рецепта перечисляет требуемые ингредиенты, замечания по этим ингредиентам и метод приготовления. Тремя категориями являются «Cakes» (включающая рецепты для «Plain Sponge», «Chocolate Cake» и «Apple Tea Cake»); «Biscuits» (включающая рецепты «ANZAC Biscuits», «Jam Drops» и «Melting Moments»); и «Quickbreads» (включающая рецепты для «Damper» и «Scones»). Клиенту все равно в каком порядке будут выводиться категории и рецепты, он просто хочет, чтобы люди понимали, какие позиции являются категориями, а какие являются рецептами.

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

Разметка основной страницы

Создайте правильно сформированную страницу HTML, включая doctype, элементы html , head и body, и сохраните его как stepbystep-main.html. Добавьте основной заголовок ( h1 ) » HTML Cooking School», и подзаголовок ( h2 ) «Recipes»:

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

Отступ для элементов li делает код удобнее для чтения, но не является обязательным.

Теперь нужно добавить рецепты в качестве подпунктов, например, «Plain Sponge», «Chocolate Cake» и «Apple Tea Cake» являются частью категории «Cakes». Для этого необходимо в каждой позиции списка создать вложенный список. Так как порядок неважен, то снова подходит неупорядоченный список. Чтобы упростить материал для учебного руководства, все рецепты можно соединить с одной страницей рецептов:

www.intuit.ru