1. Начало
  2. Уеб сайт
  3. Уеб разработка
  4. HTML
  5. Списъци в HTML (неподредени, подредени, описващи)

Списъци в HTML (неподредени, подредени, описващи)

Когато в 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-рия елемент от списъка
  • Трети елемент от списъка

Елементите от вложения списък автоматично биват изобразявани с още по-голям отстъп от лявото поле и с незапълнен кръг като символ пред редовете.

Подредени списъци връзка към този раздел

Подредените списъци извършват подредбата на елементите по един от следните начини:

  1. чрез арабски цифри
  2. чрез големи римски цифри
  3. чрез малки римски цифри
  4. чрез главни латински букви
  5. чрез малки латински букви

За да направите подреден списък с арабски цифри, трябва да изпишете следния код:

<ol>
<li>Първи номериран елемент от списъка</li>
<li>Втори номериран елемент от списъка</li>
<li>Трети номериран елемент от списъка</li>
</ol>

Обърнете внимание, че в кода не се изписват никакви цифри – те се задават автоматично.

Автоматичното задаване важи само за списъците, номерирани с арабски цифри. За всеки от останалите подредени списъци е нужно изрично да се укаже техния тип, като се използва CSS стил.

За да зададете номериране с големи римски цифри, използвайте следните настройки в стила.

Пример за подреден списък с големи римски цифри:

<ol>
<li>Първи елемент от списъка, номериран с големи римски цифри </li>
<li>Втори елемент от списъка, номериран с големи римски цифри </li>
<li>Трети елемент от списъка, номериран с големи римски цифри </li>
</ol>

изглед в браузъра:

  1. Първи елемент от списъка, номериран с големи римски цифри
  2. Втори елемент от списъка, номериран с големи римски цифри
  3. Трети елемент от списъка, номериран с големи римски цифри

Пример за подреден списък с малки римски цифри:


<ol>
<li>Първи елемент от списъка, номериран с малки римски цифри</li>
<li>Втори елемент от списъка, номериран с малки римски цифри</li>
<li>Трети елемент от списъка, номериран с малки римски цифри</li>
</ol>

изглед в браузъра:

  1. Първи елемент от списъка, номериран с малки римски цифри
  2. Втори елемент от списъка, номериран с малки римски цифри
  3. Трети елемент от списъка, номериран с малки римски цифри

Пример за подреден списък с малки гръцки букви:

<ol>
<li>Първи елемент от списъка, обозначен с големи букви</li>
<li>Втори елемент от списъка, обозначен с големи букви</li>
<li>Трети елемент от списъка, обозначен с големи букви</li>
</ol>

изглед в браузъра:

  1. Първи елемент от списъка, обозначен с големи букви
  2. Втори елемент от списъка, обозначен с големи букви
  3. Трети елемент от списъка, обозначен с големи букви

Пример за подреден списък без символи:

<ol>
<li>Първи елемент от списъка, обозначен с големи букви</li>
<li>Втори елемент от списъка, обозначен с големи букви</li>
<li>Трети елемент от списъка, обозначен с големи букви</li>
</ol>

изглед в браузъра:

  1. Първи елемент от списъка, обозначен с големи букви
  2. Втори елемент от списъка, обозначен с големи букви
  3. Трети елемент от списъка, обозначен с големи букви

HTML таговете (т.е. командите), техните атрибути и присвоените стойности на атрибутите, задължително трябва да се изписват на латиница, така че не забравяйте да превключвате клавиатурата си, ако основния текст в страницата ви е на кирилица. Някои от буквите в латинската азбука и кирилицата не се различават при изписването им и е честа грешка в кода на езика да се вмъкват букви на кирилица. При такава грешка браузърът не разчита кода.

Влагане на подредени списъци

Подредените списъци също могат да се влагат един в друг, а освен това те могат да се влагат в неподредени списъци и обратно – неподредените списъци да се влагат в подредени.

Пример за влагане на един подреден списък в друг подреден списък:

<ol>
<li>Първи номериран елемент от списъка</li>
<li>Втори номериран елемент от списъка</li>

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

<li>Трети номериран елемент от списъка</li>
</ol>

изглед в браузъра:

  1. Първи номериран елемент от списъка
  2. Втори номериран елемент от списъка
    1. Първи поделемент обозначен с главна буква
    2. Втори поделемент обозначен с главна буква
  3. Трети номериран елемент от списъка

Пример за влагане на подреден списък в неподреден списък:

<ul>
<li>Първи неномериран елемент от списъка</li>
<li>Втори неномериран елемент от списъка</li>

<ol>
<li>Първи номериран поделемент от списъка</li>
<li>Втори номериран поделемент от списъка</li>
</ol>

<li>Трети номериран елемент от списъка </li>
</ul>

изглед в браузъра:

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

Списъци за описване на име=стойност елементи връзка към този раздел

Описващите списъци (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>

изглед в браузъра:

Домейн
info-icon това е името на уебсайта в Уеб
Влагане на описващи списъци

Описващите списъци също могат да се влагат един в друг, както и в останалите два вида списъци и обратно – подредените и неподредените списъци могат да се влагат в описващи списъци. Например:

<dl>
<dt>Заглавие на описващ списък</dt>
<dd>Съдържание на първа дефиниция.</dd>
<dd>Съдържание на втора дефиниция.</dd>

<ul>
<li>Първи неномериран елемент на 2-ра дефиниция</li>
<li>Втори неномериран елемент на 2-ра дефиниция</li>

<ol>
<li>Първи номериран поделемент</li>
<li>Втори номериран поделемент</li>
</ol>
</ul>
</dl>

изглед в браузъра:

Заглавие на описващ списък
Съдържание на първа дефиниция.
Съдържание на втора дефиниция.
  • Първи неномериран елемент на 2-ра дефиниция
  • Втори неномериран елемент на 2-ра дефиниция
    1. Първи номериран поделемент
    2. Втори номериран поделемент
Обновена: 18.03.2022

Беше ли Ви полезна тази статия?

Вижте още