C, PHP, VB, .NET

Когато ни се налага да изброяваме поредица от елементи, то ние използваме т.нар. "списъци". Езикът HTML позволява доста възможности за осъществяване на такава функционалност.

1. Подредени списъци: Може би са по-добре познати са като "номерирани списъци". Чрез тях изреждаме стойности една след друга, като всяка си има пореден уникален номер. По подразбиране номерът следва числата 1, 2, 3, 4, ...

Пример:

<div style="margin-left:50px">Нужни продукти:
<ol>
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ol>
</div>

Резултат:

Съществуват и други видове номерация. Тя зависи от стойността на стил "list-style-type". Възможните стойности са 'lower-alpha' (малки букви a,b,c,d,...), 'upper-alpha' (главни букви A,B,C,D,...), 'lower-roman' (малки римски числа i,ii,iii,iv,v,...), 'upper-roman' (главни римски числа I,II,III,IV,V,...) и 'decimal' (по подразбиране числа 1,2,3,4,...). Ето един пример:

<div style="margin-left:50px">Нужни продукти:
<ol style="list-style-type:upper-roman">
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ol>
</div>

Резултат:

Възможно е да приложите същата промяна на стил и на елементите <li>, но това е много по-рядко практикувано, понеже не е естествено номерацията да се променя вътре в самия списък. Имаме възможност и за вложени списъци:

<div style="margin-left:50px">Задачи:
<ol style="list-style-type:decimal">
	<li>Задача 1
		<ol style="list-style-type:lower-alpha">
			<li>Подточка a</li>
			<li>Подточка b</li>
			<li>Подточка c</li>
		</ol>
	</li>
	<li>Задача 2
		<ol style="list-style-type:lower-alpha">
			<li>Подточка a</li>
			<li>Подточка b</li>
			<li>Подточка c</li>
		</ol>
	</li>
</ol>
</div>

Резултат:

2. Неподредени списъци: Това са списъците, в които просто изреждаме стойностите и те нямат уникална номерация.

Пример:

<div style="margin-left:50px">Необходими продукти:
<ul>
	<li>Картофи</li>
	<li>Моркови</li>
	<li>Зеле</li>
</ul>
</div>

Резултат:

И тук е валиден стилът list-style-type. Възможните стойности са circle, square и disc. Ще демонстрираме тези стилове директно чрез промяна на изброените стойности:

<div style="margin-left:50px">Необходими продукти:
<ul>
	<li style="list-style-type:circle">Картофи</li>
	<li style="list-style-type:square">Моркови</li>
	<li style="list-style-type:disc">Зеле</li>
</ul>
</div>

Резултат:

Тук ни е дадена възможност и за още един стил - list-style-image. Като стойност се приема релативен или пълен URL до картинка. Така в неподредения списък вместо disc, square или circle ще се появи посочената от нас картинка.

3. Списъци с обяснения: Използват се за "дефиниране" на обекти. Например когато желаем да обясним дадени термини. Списъците с обяснения се ограждат с <dl> (definition list), последвано от двойки <dt> (definition term) и <dd> (definition description).

Пример:

<div style="margin-left:50px">Напитки:
<dl>
	<dt>Бира</dt>
		<dd>Газирано слабо алкохолно пиво</dd>
	<dt>Ракия</dt>
		<dd>Силно спиртно алкохолно питие</dd>
	<dt>Кола</dt>
		<dd>Газирана безалкохолна напитка</dd>
</dl>
</div>

Резултат:

4. Вложени списъци: Вече показахме пример с подредени списъци. Можем и още по-общо да влагаме и различни типове списъци. Ето един пример:

<div style="margin-left:50px">Програма:
<ul>
   <li>Понеделник:
        <ol>
            <li>Числени методи</li>
            <li>Дискретна математика</li>
        </ol>
	</li>
   <li>Сряда:
        <ol>
           <li>Числени методи</li>
           <li>Програмиране на C#</li>
           <li>Частни диференциални уравнения</li>
       </ol>
	</li>
</ul>
</div>

Резултат: