Liste Neordonate HTML
Tag-ul <ul> definește o listă neordonată (cu buline).
Listă HTML Neordonată
O listă neordonată începe cu tag-ul <ul>, iar fiecare element începe cu tag-ul <li>. Implicit, elementele sunt marcate cu buline.
Exemplu
O listă simplă cu buline.
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>Ul de Bază</title>
</head>
<body>
<ul>
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</body>
</html>
Listă HTML Neordonată - Alegerea Marcajului Elementelor
Proprietatea CSS list-style-type setează stilul marcajului. Valorile includ disc (o bulină, implicit), circle, square, și none (fără marcaj).
Disc
Marcaje setate la buline.
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>Marker Disc</title>
</head>
<body>
<ul style="list-style-type:disc;">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</body>
</html>
Circle
Marcaje setate la cercuri.
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>Marker Cerc</title>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</body>
</html>
Square
Marcaje setate la pătrate.
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>Marker Pătrat</title>
</head>
<body>
<ul style="list-style-type:square;">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</body>
</html>
None
Fără marcaje deloc.
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>Fără Marker</title>
</head>
<body>
<ul style="list-style-type:none;">
<li>Cafea</li>
<li>Ceai</li>
<li>Lapte</li>
</ul>
</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ă cu o sub-listă în interiorul unui element.
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>Listă Imbricată</title>
</head>
<body>
<ul>
<li>Cafea</li>
<li>Ceai
<ul>
<li>Ceai negru</li>
<li>Ceai verde</li>
</ul>
</li>
<li>Lapte</li>
</ul>
</body>
</html>
Listă Orizontală cu CSS
Listele pot fi stilizate în multe moduri cu CSS. O metodă populară este să afișezi o listă orizontal, pentru a crea un meniu de navigare, folosind float:left pe elemente.
Exemplu
Un meniu de navigare orizontal creat dintr-o listă.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Acasă</a></li>
<li><a href="#news">Știri</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">Despre</a></li>
</ul>
</body>
</html>
Rezumatul Capitolului
Pe scurt: folosește elementul <ul> pentru o listă neordonată, proprietatea CSS list-style-type pentru marcaj, și elementul <li> pentru fiecare element. Listele pot fi imbricate, elementele pot conține alte elemente, iar float:left afișează o listă orizontal.
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).