Cum să creezi liste în HTML — ghid complet

In this tutorial, you'll learn about Cum să creezi liste în HTML. We cover key concepts, practical examples, and best practices.

Listele HTML sunt fundația organizării conținutului pe web — de la meniuri de navigare și instrucțiuni pas-cu-pas până la glosare și termeni tehnici.

The Problem

Începătorii folosesc adesea <br> sau paragrafe separate pentru a simula liste, pierzând structura semantică, accesibilitatea și stilizarea pe care listele le oferă.

The Wrong Way

Mere
Pere
Prune

Probleme: Fără elemente de listă, conținutul e doar text — cititoarele de ecran nu anunță existența unei liste, iar CSS nu poate viza elementele individual.

The Right Way

<h3>Fructe preferate</h3>
<ul>
  <li>Mere</li>
  <li>Pere</li>
  <li>Prune</li>
</ul>

<h3>Top 3 filme</h3>
<ol>
  <li>Inception</li>
  <li>Matrix</li>
  <li>Interstellar</li>
</ol>

<h3>Termeni tehnici</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Step-by-Step Fix

1. Alege tipul de listă potrivit

2. Cuibărește liste (nesting)

<ul>
  <li>Fructe
    <ul>
      <li>Mere</li>
      <li>Banane</li>
    </ul>
  </li>
  <li>Legume
    <ul>
      <li>Morcovi</li>
      <li>Ardei</li>
    </ul>
  </li>
</ul>

3. Personalizează listele ordonate

<ol type="A">   <!-- A, B, C -->
<ol type="a">   <!-- a, b, c -->
<ol type="I">   <!-- I, II, III -->
<ol type="i">   <!-- i, ii, iii -->
<ol start="5">  <!-- începe de la 5 -->
<ol reversed>  <!-- numărătoare inversă -->

Prevention Tips

• Folosește <ul> pentru navigare și meniuri
• Folosește <ol> doar când ordinea contează (rețete, instrucțiuni)
• Nu cuibări mai mult de 3 niveluri — devine greu de citit
• <dl> e perfect pentru metadata și glosare

Common Mistakes

1. Liste fără <li> — elementele direct în <ul>/<ol> fără <li> nu sunt valide
2. <br> în loc de listă — rupe liniile manual, fără structură semantică
3. Niveluri incorecte — închiderea greșită a <ul>/<ol> duce la cuibărire invalidă
4. Listă ordonată pentru orice — nu totul trebuie numerotat; folosește <ul> pentru elemente fără ordine
5. <dl> fără <dt> — lista de definiții trebuie să aibă perechi <dt>/<dd>

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.