Най-често използваните списъци са подредените (ordered list) и неподредените (unordered lists). В този урок ще разгледаме следните видове HTML списъци:
Следват някои примери за прости списъци – тоест без други вложени HTML елементи в тях самите.
- Първи предмет от списъка
- Втори предмет
- Трети предмет
- Първи предмет от неподредения списък
- Втори предмет
- Трети предмет
Неподредени Списъци
Неподредения списък започва с тага <ul>. Всеки ред/предмет от списъка се създава със <li> таг. Всеки предмет (item) обикновено се отбелязва (от браузъра) с малка черна точка (bullet), освен ако не е стилизиран списък чрез CSS.
Как горния HTML код ще изглежда в браузъра:
- Кафе
- Мляко
Подредени Списъци
Подредените списъци започват с <ol> таг. Всеки ред/предмет от списъка се създава със <li> таг. Всеки пореден предмет от списъка започва с арабско число (ако не е променено чрез CSS). Възможно е да се използват римски числа или букви.
Как горния HTML код ще изглежда в браузъра:
- Кафе
- Мляко
Описателни Списъци
Описателните списъци се използват за въвеждането на термини, с описание към всеки един термин Подредените списъци се създават с тага <dl> таг. Всеки термин се подава със <dt> таг, а описанието с <dd>. Всеки пореден предмет от списъка започва с арабско число (ако не е променено чрез CSS). Възможно е да се използват римски числа или букви.
Как горния HTML код ще изглежда в браузъра:
- Кафе
- – тъмна гореща напитка
- Мляко
- – бяла студена напитка
Основни забележки и полезни съвети
Във всеки елемент от списъка може да сложите текст, изображения, HTML линкове, други списъци и други HTML елементи. Често списъците се използват за направата на менюта в уеб сайтовете. Стилизирани чрез CSS навигационни менюта, се постига ефекта, който виждате в навигацията на различните уеб страници.
HTML тагове за списъци
| Таг | Описание |
|---|---|
| <ol> | ordered list – Създава подреден списък |
| <ul> | Дефинира неподреден списък |
| <li> | list item – Дефинира предмет от списъка |
| <dl> | description list – Създава описателен списък |
| <dt> | Създава термин в описателния списък |
| <dd> | Дефинира описание към термин в описателния списък |