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

Уроки HTML+CSS: Списки

В данной записи мы с вами научимся создавать списки. Списки это полезный «материал» для сайта. С помощью списков вы можете сделать много уровневое меню или аккордеоны.

Списки в HTML делятся на 2 типа:

  1. Маркированный
  2. Нумерованный

Все виды списков имеют одинаковую структуру.

<тип списка>
   <li>Элемент списка</li>
</тип списка>

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

Для создания маркированного списка используется тег <ul></ul>. Все элементы данного списка будут определяться простым маркером(точкой).

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

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

Для создания нумерованного списка используется тег <ol></ol>. Все элементы данного списка будут определяться нумерацией.

<ol>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <li>Третий элемент</li>
</ol>
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

<ol>
   <li>Первый элемент</li>
   <li>Второй элемент</li>
   <ul>
      <li>Элемент второго уровня</li>
      <li>Элемент второго уровня</li>
   </ul>
   <li>Третий элемент</li>
</ol>
  1. Первый элемент
  2. Второй элемент
    • Элемент второго уровня
    • Элемент второго уровня
  3. Третий элемент

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

Информация была взята с сайта — https://html5book.ru

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime