Списъци – номерирани, неподредени и дефиниращи

Най-често използваните списъци са подредените (ordered list) и неподредените (unordered lists). В този урок ще разгледаме следните видове HTML списъци:

Следват някои примери за прости списъци - тоест без други вложени HTML елементи в тях самите.

  1. Първи предмет от списъка
  2. Втори предмет
  3. Трети предмет
  • Първи предмет от неподредения списък
  • Втори предмет
  • Трети предмет

Неподредени Списъци

Неподредения списък започва с тага <ul>. Всеки ред/предмет от списъка се създава със <li> таг. Всеки предмет (item) обикновено се отбелязва (от браузъра) с малка черна точка (bullet), освен ако не е стилизиран списък чрез CSS.

Как горния HTML код ще изглежда в браузъра:

  • Кафе
  • Мляко

Подредени Списъци

Подредените списъци започват с <ol> таг. Всеки ред/предмет от списъка се създава със <li> таг. Всеки пореден предмет от списъка започва с арабско число (ако не е променено чрез CSS). Възможно е да се използват римски числа или букви.

Как горния HTML код ще изглежда в браузъра:

  1. Кафе
  2. Мляко

Описателни Списъци

Описателните списъци се използват за въвеждането на термини, с описание към всеки един термин Подредените списъци се създават с тага <dl> таг. Всеки термин се подава със <dt> таг, а описанието с <dd>. Всеки пореден предмет от списъка започва с арабско число (ако не е променено чрез CSS). Възможно е да се използват римски числа или букви.

Как горния HTML код ще изглежда в браузъра:

Кафе
- тъмна гореща напитка
Мляко
- бяла студена напитка

Основни забележки и полезни съвети

Във всеки елемент от списъка може да сложите текст, изображения, HTML линкове, други списъци и други HTML елементи. Често списъците се използват за направата на менюта в уеб сайтовете. Стилизирани чрез CSS навигационни менюта, се постига ефекта, който виждате в навигацията на различните уеб страници.

HTML тагове за списъци

Таг Описание
<ol> ordered list - Създава подреден списък
<ul> Дефинира неподреден списък
<li> list item - Дефинира предмет от списъка
<dl> description list - Създава описателен списък
<dt> Създава термин в описателния списък
<dd> Дефинира описание към термин в описателния списък