Езика HTML ви дава възможност да използвате три вида списъци - подредени, неподредени и списъци с обяснения. Подредените списъци са номерирани и изглеждат така :
[html]<ol>
<li>Иван
<li>Георги
<li>Захари
</ol>[/html]
Неподредените списъци използват вместо номерация, някакъв символ. Например точка:
[html]<ul>
<li>Иван
<li>Георги
<li>Захари
</ul>[/html]
Списъците с обяснения не използват символ или цифра пред текста. Вместо това поставят обяснителен текст след всеки елемент от списъка:
Иван счетоводител
Георги касиер
Захари шофьор
Подреден списък можете да създадете с елемента <ol> и съответно затварящия </ol>. Елементите на списъка се задават с елемента <li>, който може да се използва като двойка елементи или като единичен елемент. Нека направим един такъв списък :
Пример:
<html>
<head>
<title>Подреден списък</title>
</head>
<body>
да не забравя да купя:
<ol>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ol>
</body>
<html>
Вижте как ще изглежда :
[html]
да не забравя да купя:
<ol>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ol>
[/html]
Въпреки, че не сме задали да се показват номера 1. 2. 3. , те се добавят автоматично в списъка. Ако искате списъка да се показва с римски вместо с арабски цифри, трябва да добавите атрибут type на елемента <ol>. Атрибута type показва какви символи да се визуализират преди елементите на списъка. Стойностите на атрибута type за подредените списъци са :
type=1 за:
1.
2.
3.
type=a за:
a.
b.
c.
type=A за:
A.
B.
C.
type=i за:
i.
ii.
iii.
type=I за:
I.
II.
III.
Така че ако искате вместо
1. захар
2. яйца
3. сода каустик за тъщата
на екрана да се вижда
I. захар
II. яйца
III. сода каустик за тъщата
трябва да добавите към елемента <ol> type=I . С други думи трябва да напишете <ol type=I>. Ако пропуснете атрибута type, по подразбиране ще се показва списък от типа 1. 2. 3.
Неподреден списък се създава с двойката елементи <ul></ul>. Този списък за разлика от подредения не е номериран, а използва някакъв символ за всеки елемент от списъка, например точка.
Да направим горния пример да се показва като неподреден списък:
Пример:
<html>
<head>
<title>Неподреден списък</title>
</head>
<body>
да не забравя да купя:
<ul>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ul>
</body>
<html>
Тогава на екрана ще се вижда следното:
[html]
да не забравя да купя:
<ul>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ul>
[/html]
При неподредените списъци също можете да използвате атрибута type. Валидните стойности за него са disk, square и circle. Вижте как ще изглежда същия списък, само че с различни стойности на type :
<ul type=disk>[html]
<ul type=disk>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ul>[/html]
<ul type=circle>[html]
<ul type=circle>
<li>захар
<li>яйца
<li>сода каустик за тъщата
</ul>[/html]
Списъците с обяснения се създават с двойката елементи <dl></dl>. Елементите на списъка се задават с <dt>, а обяснението към него с <dd>. Примера в началото на страницата с имената и професиите ще изглежда по следния начин:
Пример:
<html>
<head>
<title>Списък с обяснения</title>
<head>
<body>
<dl>
<dt>Иван
<dd>счетоводител
<dt>Георги
<dd>касиер
<dt>Захари
<dd>данъчен инспектор
</dl>
</body>
</html>
Ако желаете, можете да влагате един в друг списъци от един вид или от различни видове. Ще ви дам пример с вложени един в друг подреден и неподреден списък, като този например :
[html]
<ol>
<li>Да купя за вкъщи:
<ul type=circle>
<li>сладолед
<li>торта
</ul>
<li>Да купя за офиса:
<ul type=circle>
<li>дискети
<li>химикалки
<li>нова мишка
</ul>
</ol>
[/html]
HTML документа на горния пример изглежда ето така :
Пример:
<html>
<head>
<title>вложени списъци</title>
</head>
<body>
<ol>
<li>Да купя за вкъщи:
<ul type=circle>
<li>сладолед
<li>торта
</ul>
<li>Да купя за офиса:
<ul type=circle>
<li>дискети
<li>химикалки
<li>нова мишка
</ul>
</ol>
</body>
</html>
Можете да използвате и собствени картинки при неподредените списъци. За да ви покажа, направих една картинка -червена точка с размер 9х9 пиксела.
дискети
химикалки
нова мишка
Така списъка стана доста по хубав.
Пример:
<html>
<head>
<title>Списък с картинка</title>
</head>
<body>
<ul imagesrc="redpoint.gif">
<li>дискети</li>
<li>химикалки</li>
<li>нова мишка</li>
</ul>
</body>
</html>
Изполвайки атрибута imagesrc на елемента <ul> зададох на списъка името на файла, който да се показва пред елементите. Картинката е файл с име redpoint.gif и трябва да се намира в основната папка, където разполагате HTML документите си. Можете да я сложите и в подпапка, но тогава трябва да зададете и пътя до нея, например: <ul imagesrc="images/redpoint.gif"> ако подпапката се казва images. Ако сте забелязали, в края на тази страница използвам също списък, само че със сини точки и включени хиперлинкове към други страници.
Индекс 
Последни снимки 
Регистрирайте се 
