Когато в HTML страницата е нужно да се направи изброяване на някакви елементи, в тези случаи е подходящо да се използват специалните тагове на HTML за списъци. Чрез таговете за списъци информацията ще се представи в подреден вид на страницата.
Могат да се изработват три основни вида списъци: неподредени (unordered list), подредени (ordered list) и описващи (description list).
Неподредени списъци
Неподреден е списъка, в който елементите не са номерирани чрез арабски цифри, римски цифри или букви. Тагът за такъв списък е ul:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>
При задаване на този код браузърът изобразява списъка с автоматичен отстъп от лявото поле. Не е нужно и да се изписва тага за преминаване на следващ ред <br>, тъй като това също става автоматично. Автоматично се добавя и по един празен ред над и под списъка.
Знакът, който се появява пред всеки ред в списъка, е по подразбиране черен запълнен кръг. Ако желаете да използвате други символи трябва да ги зададете в CSS стила.
Възможните стойности са три:
- disc (запълнен кръг като този, който е по подразбиране)
- circle (незапълнен кръг)
- square (запълнен квадрат).
Пример за неподреден списък с незапълнени кръгчета:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>
изглед в браузъра:
- Първи елемент от списъка
- Втори елемент от списъка
- Трети елемент от списъка
Пример за неподреден списък със запълнени квадратчета:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<li>Трети елемент от списъка</li>
</ul>
изглед в браузъра:
- Първи елемент от списъка
- Втори елемент от списъка
- Трети елемент от списъка
Влагане един в друг на неподредени списъци
Неподредените списъци могат да се влагат един в друг. Кодът за такова влагане може да бъде например следния:
<ul>
<li>Първи елемент от списъка</li>
<li>Втори елемент от списъка</li>
<ul>
<li>Първи поделемент на 2-рия елемент от списъка</li>
<li>Втори поделемент на 2-рия елемент от списъка</li>
</ul>
<li>Трети елемент от списъка </li>
</ul>
изглед в браузъра:
- Първи елемент от списъка
- Втори елемент от списъка
- Първи поделемент на 2-рия елемент от списъка
- Втори поделемент на 2-рия елемент от списъка
- Трети елемент от списъка
Елементите от вложения списък автоматично биват изобразявани с още по-голям отстъп от лявото поле и с незапълнен кръг като символ пред редовете.
Подредени списъци
Подредените списъци извършват подредбата на елементите по един от следните начини:
- чрез арабски цифри
- чрез големи римски цифри
- чрез малки римски цифри
- чрез главни латински букви
- чрез малки латински букви
За да направите подреден списък с арабски цифри, трябва да изпишете следния код:
<ol>
<li>Първи номериран елемент от списъка</li>
<li>Втори номериран елемент от списъка</li>
<li>Трети номериран елемент от списъка</li>
</ol>
Обърнете внимание, че в кода не се изписват никакви цифри – те се задават автоматично.
Автоматичното задаване важи само за списъците, номерирани с арабски цифри. За всеки от останалите подредени списъци е нужно изрично да се укаже техния тип, като се използва CSS стил.
За да зададете номериране с големи римски цифри, използвайте следните настройки в стила.
Пример за подреден списък с големи римски цифри:
<ol>
<li>Първи елемент от списъка, номериран с големи римски цифри </li>
<li>Втори елемент от списъка, номериран с големи римски цифри </li>
<li>Трети елемент от списъка, номериран с големи римски цифри </li>
</ol>
изглед в браузъра:
- Първи елемент от списъка, номериран с големи римски цифри
- Втори елемент от списъка, номериран с големи римски цифри
- Трети елемент от списъка, номериран с големи римски цифри
Пример за подреден списък с малки римски цифри:
<ol>
<li>Първи елемент от списъка, номериран с малки римски цифри</li>
<li>Втори елемент от списъка, номериран с малки римски цифри</li>
<li>Трети елемент от списъка, номериран с малки римски цифри</li>
</ol>
изглед в браузъра:
- Първи елемент от списъка, номериран с малки римски цифри
- Втори елемент от списъка, номериран с малки римски цифри
- Трети елемент от списъка, номериран с малки римски цифри
Пример за подреден списък с малки гръцки букви:
<ol>
<li>Първи елемент от списъка, обозначен с големи букви</li>
<li>Втори елемент от списъка, обозначен с големи букви</li>
<li>Трети елемент от списъка, обозначен с големи букви</li>
</ol>
изглед в браузъра:
- Първи елемент от списъка, обозначен с големи букви
- Втори елемент от списъка, обозначен с големи букви
- Трети елемент от списъка, обозначен с големи букви
Пример за подреден списък без символи:
<ol>
<li>Първи елемент от списъка, обозначен с големи букви</li>
<li>Втори елемент от списъка, обозначен с големи букви</li>
<li>Трети елемент от списъка, обозначен с големи букви</li>
</ol>
изглед в браузъра:
- Първи елемент от списъка, обозначен с големи букви
- Втори елемент от списъка, обозначен с големи букви
- Трети елемент от списъка, обозначен с големи букви
HTML таговете (т.е. командите), техните атрибути и присвоените стойности на атрибутите, задължително трябва да се изписват на латиница, така че не забравяйте да превключвате клавиатурата си, ако основния текст в страницата ви е на кирилица. Някои от буквите в латинската азбука и кирилицата не се различават при изписването им и е честа грешка в кода на езика да се вмъкват букви на кирилица. При такава грешка браузърът не разчита кода.
Влагане на подредени списъци
Подредените списъци също могат да се влагат един в друг, а освен това те могат да се влагат в неподредени списъци и обратно – неподредените списъци да се влагат в подредени.
Пример за влагане на един подреден списък в друг подреден списък:
<ol>
<li>Първи номериран елемент от списъка</li>
<li>Втори номериран елемент от списъка</li>
<ol>
<li>Първи поделемент обозначен с главна буква</li>
<li>Втори поделемент обозначен с главна буква</li>
</ol>
<li>Трети номериран елемент от списъка</li>
</ol>
изглед в браузъра:
- Първи номериран елемент от списъка
- Втори номериран елемент от списъка
- Първи поделемент обозначен с главна буква
- Втори поделемент обозначен с главна буква
- Трети номериран елемент от списъка
Пример за влагане на подреден списък в неподреден списък:
<ul>
<li>Първи неномериран елемент от списъка</li>
<li>Втори неномериран елемент от списъка</li>
<ol>
<li>Първи номериран поделемент от списъка</li>
<li>Втори номериран поделемент от списъка</li>
</ol>
<li>Трети номериран елемент от списъка </li>
</ul>
изглед в браузъра:
- Първи неномериран елемент от списъка
- Втори неномериран елемент от списъка
- Първи номериран поделемент от списъка
- Втори номериран поделемент от списъка
- Трети номериран елемент от списъка
Списъци за описване на име=стойност елементи
Описващите списъци (description lists) се използват, за да акцентират върху даден термин, като покажат описанието му с отстъп от лявото поле на браузъра.
Описващият списък може да се използва за групи от термини с дефиниции, въпроси с отговори и всякакви други групи от елементи име=стойност.
При тези списъци не се изобразяват символи в началото на реда. Но вие може да укажете собствени символи, като ги зададете чрез тага за показване на изображения или с CSS стил.
Тези списъци започват с началния таг за <dl>
Следва тага за задаване на име <dt>
След това се изписва тага за стойност <dd>
И трите тага трябва да завършват със съответните си затварящи тагове.
Пример за описващ списък:
<dl>
<dt>Домейн</dt>
<dd>- това е името на уебсайта в Уеб</dd>
<dt>Хостинг</dt>
<dd>- това е мястото, на което се намират файловете на сайта</dd>
</dl>
изглед в браузъра:
- Домейн
- – това е името на уебсайта в Уеб
- Хостинг
- – това е мястото, на което се намират файловете на сайта
За да зададете символ по ваше желание в началото на реда на дефиницията, трябва да разполагате с някакъв файл, например image.png, и да напишете код, подобен на следния:
<dl>
<dt>Домейн</dt>
<dd><img src="image.png" alt="info" /> това е името на уебсайта в Уеб
</dd>
</dl>
изглед в браузъра:
- Домейн
- това е името на уебсайта в Уеб
Влагане на описващи списъци
Описващите списъци също могат да се влагат един в друг, както и в останалите два вида списъци и обратно – подредените и неподредените списъци могат да се влагат в описващи списъци. Например:
<dl>
<dt>Заглавие на описващ списък</dt>
<dd>Съдържание на първа дефиниция.</dd>
<dd>Съдържание на втора дефиниция.</dd>
<ul>
<li>Първи неномериран елемент на 2-ра дефиниция</li>
<li>Втори неномериран елемент на 2-ра дефиниция</li>
<ol>
<li>Първи номериран поделемент</li>
<li>Втори номериран поделемент</li>
</ol>
</ul>
</dl>
изглед в браузъра:
- Заглавие на описващ списък
- Съдържание на първа дефиниция.
- Съдържание на втора дефиниция.
- Първи неномериран елемент на 2-ра дефиниция
- Втори неномериран елемент на 2-ра дефиниция
- Първи номериран поделемент
- Втори номериран поделемент