Войти
Регистрация

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

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

Здравствуйте, дорогие друзья!

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

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

В исходном виде, если список не стилизовать, он выглядит обычно так:

  • Первый элемент
  • Второй элемент
  • Третий элемент
  • ..............
  • n-й элемент

Характеризующий признак списков это наличие маркеров или номеров.

Создадим маркерованный список. Данный список начинается с тега <ul>. Этот тег парный и имеет закрывающий тег </ul>. Элементы списка пишутся внутри этого тега в теге <li>

<ul>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
</ul>

Результат следующий:

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

Создадим нумерованный список. Все тоже самое, только тег списка меняется с <ul> на <ol>:

<ol>
  <li>Первый элемент списка</li>
  <li>Второй элемент списка</li>
  <li>Третий элемент списка</li>
</ol>

В итоге мы получим:

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

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

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?