Liste Ordonate HTML
Tag-ul <ol> definește o listă ordonată. O listă ordonată poate fi numerotată sau alfabetică.
Listă HTML Ordonată
O listă ordonată începe cu tag-ul <ol>, iar fiecare element începe cu tag-ul <li>. Implicit, elementele sunt marcate cu numere.
Exemplu
O listă numerotată de bază.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listă ordonată de bază</title>
</head>
<body>
<ol>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Listă HTML Ordonată - Atributul Type
Atributul type al <ol> setează tipul marcajului: type="1" pentru numere (implicit), type="A" pentru litere mari, type="a" pentru litere mici, type="I" pentru cifre romane mari, și type="i" pentru cifre romane mici.
Numere
Numerotată cu cifre.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Numere</title>
</head>
<body>
<ol type="1">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Litere mari
Numerotată cu litere mari.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Litere Mari</title>
</head>
<body>
<ol type="A">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Litere mici
Numerotată cu litere mici.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Litere Mici</title>
</head>
<body>
<ol type="a">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Cifre romane mari
Numerotată cu cifre romane mari.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Cifre Romane Mari</title>
</head>
<body>
<ol type="I">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Cifre romane mici
Numerotată cu cifre romane mici.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Cifre Romane Mici</title>
</head>
<body>
<ol type="i">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Controlul Numărării Listei
Implicit, o listă ordonată începe numărarea de la 1. Pentru a începe de la alt număr, folosește atributul start.
Exemplu
O listă care începe numărarea de la 50.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atributul start</title>
</head>
<body>
<ol start="50">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ol>
</body>
</html>
Liste HTML Imbricate
Listele pot fi imbricate, ceea ce înseamnă că o listă poate fi pusă în interiorul alteia.
Notă: Un element de listă (<li>) poate conține și o listă nouă, precum și alte elemente, cum ar fi imagini și linkuri.
Exemplu
O listă ordonată cu o sub-listă în interiorul unui element.
Output: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listă ordonată imbricată</title>
</head>
<body>
<ol>
<li>Cafea</li>
<li>Ceai
<ol>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ol>
</li>
<li>Lapte</li>
</ol>
</body>
</html>
Rezumatul Capitolului
Pe scurt: folosește elementul <ol> pentru o listă ordonată, atributul type pentru stilul de numerotare, și elementul <li> pentru fiecare element. Listele pot fi imbricate, iar elementele pot conține alte elemente.
Tag-uri HTML pentru Liste
Tag-urile legate de liste sunt: <ul> (o listă neordonată), <ol> (o listă ordonată), <li> (un element de listă), <dl> (o listă de descriere), <dt> (un termen), și <dd> (descrierea termenului).