' Списки в HTML | Шнайдер блог

Списки в HTML

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

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

Маркированный список формируется за счет контейнера <ul>, а каждый новый пункт начинается тегом <li>. Например:

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

Маркеры могут быть трех видов. Чтобы выбрать нужный, используйте атрибут type тега <url>:

  • Круг (идет по умолчанию): <ul type="disc">.
  • Окружность: <ul type="circle">.
  • Квадрат: <ul type="square">.

Например:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Маркированный список</title>
</head>
<body>
 <p><strong>Круг</strong></p>
<ul type="disc">
  <li>Круг</li>

</ul>

<p><strong>Окружность</strong></p>

<ul type="circle">

<li>Окружность</li>

</ul>

<p><strong>Квадрат</strong></p>  

<ul type="square">

<li>Квадрат</li>

</ul>
</body>
</html>

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

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

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

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

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

  • Прописные латинские буквы (A, B, C, ...): <ol type="A">.
  • Строчные латинские буквы (a, b, c, ...): <ol type="a">.
  • Прописные римские числа (I, II, III, ...): <ol type="I">.
  • Строчные римские числа (i, ii, iii, ...): <ol type="i">.

Например:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Нумерованный список</title>
</head>
<body>
 <p><strong>Арабские числа</strong></p>

<ol>
<li>Арабские числа</li>

</ol>

<p><strong>Прописные латинские буквы</strong></p>

<ol type="A">

<li>Прописные латинские буквы</li>

</ol>

<p><strong>Строчные латинские буквы</strong></p>

<ol type="a">

<li>Строчные латинские буквы</li>

</ol>

<p><strong>Прописные римские числа</strong></p>

<ol type="I">

<li>Прописные римские числа</li>

</ol>

<p><strong>Строчные римские числа</strong></p>

<ol type="i">

<li>Прописные римские числа</li>

</ol>

</body>
</html>

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

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

Список определений включает в себя термин и определение. Задается он при помощи закрывающегося тега <dl>. Термин контейнера — <dt>, определение — <dd>. Структура выглядит так:

<dl>
 <dt>Термин 1</dt>
   <dd>Определение 1</dd>
 <dt>Термин 2</dt>
   <dd>Определение 2</dd>
</dl>

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

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Список определений</title>
</head>
<body>
 <dl>
  <dt>HTML</dt>
    <dd>HTML ー это стандартный язык разметки документов.</dd>

<dt>Тег</dt>
    <dd>Тег ー метка, информирующая браузер о том, как он должен “выводить” сайт.</dd>

<dt>Браузер</dt>
    <dd>Браузер ー это программа для просмотре web-страниц.</dd>
    </dl>
</body>
</html>

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