Раздел: Сайтостроение / HTML /

Теги для создания списков в HTML

Вёрстка сайта с нуля 2.0 Вёрстка сайта с нуля 2.0

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

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

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

А теперь с каждым из них познакомимся подробнее.

Упорядоченные списки HTML

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

Вот пример упорядоченного списка:

<ol>
  <li>Элемент 1 упорядоченного списка</li>
  <li>Элемент 2 упорядоченного списка</li>
  <li>Элемент 3 упорядоченного списка</li>
</ol>

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

Упорядоченные списки HTML

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

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

Вот пример неупорядоченного списка:

<ul>
  <li>Элемент 1 неупорядоченного списка</li>
  <li>Элемент 2 неупорядоченного списка</li>
  <li>Элемент 3 неупорядоченного списка</li>
</ul>

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

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

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

Список определений немного сложнее. Он заключается в теги <dl> и </dl>. Но каждый элемент такого списка состоит из двух частей - заголовка (имени) и списка значений (или определений). Заголовок заключается в теги <dt> и </dt> (закрывающий тег необязателен), а значение (или определение) заключается в теги <dd> и </dd> (закрывающий тег также необязателен). Пример:

<dl>
  <dt>Список значений</dt>
    <dd>Значение 1</dd>
    <dd>Значение 2</dd>
  <dt>Список определений</dt>
    <dd>Определение 1</dd>
    <dd>Определение 2</dd>
</dl>

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

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

Совмещение разных списков и вложенные списки

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

<ol>
  <li>Элемент 1</li>
  <ul>
    <li>Элемент 1-1</li>
    <li>Элемент 1-2</li>
    <ul>
      <li>Элемент 1-2-1</li>
      <li>Элемент 1-2-2</li>
    </ul>
  </ul>
  <li>Элемент 2</li>
</ol>

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

Совмещение разных списков и вложенные списки

Если вам показалось, что в этой статье на вас свалилось слишком много тегов и вам сложно их запомнить, то прочитайте статью о том, как легче запоминать теги.

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


Как создать свой сайт Как создать свой сайт

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

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение - ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика