Z pewnością lista HTML to jeden z podstawowych elementów struktury stron internetowych, używana do porządkowania informacji w logiczny i czytelny sposób. Co więcej w HTML istnieją trzy główne typy list:
<ul>– listy nieuporządkowane<ol>– listy uporządkowane<dl>– listy definicji
Ponadto każdy z tych typów ma swoje zastosowanie i strukturę. Dlatego w tym artykule przedstawię każdy z nich, wraz z przykładami.
Lista HTML nieuporządkowana (<ul>)
Lista nieuporządkowana używana do wyświetlania elementów w formie punktów. Każdy element listy jest oznaczony znacznikiem <li>.
Struktura listy nieuporządkowanej
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>- Element 1
- Element 2
- Element 3
Przykład listy nieuporządkowanej
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista Nieuporządkowana</title>
</head>
<body>
<h1>Moje Ulubione Owoce</h1>
<ul>
<li>Jabłka</li>
<li>Banany</li>
<li>Winogrona</li>
<li>Truskawki</li>
</ul>
</body>
</html>W tym przykładzie lista nieuporządkowana przedstawia ulubione owoce użytkownika.
Lista HTML uporządkowana (<ol>)
Lista uporządkowana używana do wyświetlania elementów w formie numerowanej. Każdy element listy również jest oznaczony znacznikiem <li>.
Struktura listy uporządkowanej
<ol>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ol>- Element 1
- Element 2
- Element 3
Przykład listy uporządkowanej
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista Uporządkowana</title>
</head>
<body>
<h1>Kroki do Piekarzenia Ciasta</h1>
<ol>
<li>Przygotuj składniki</li>
<li>Rozgrzej piekarnik do 180°C</li>
<li>Wymieszaj składniki</li>
<li>Wlej ciasto do formy</li>
<li>Piecz przez 30 minut</li>
</ol>
</body>
</html>W przykładzie wyżej lista uporządkowana przedstawia kolejne kroki pieczenia ciasta.
Lista HTML definicji (<dl>)
Lista definicji używana do wyświetlania par terminów i ich definicji. Każdy termin jest oznaczony znacznikiem <dt>, a jego definicja znacznikiem <dd>.
Struktura listy definicji
<dl>
<dt>Termin 1</dt>
<dd>Definicja 1</dd>
<dt>Termin 2</dt>
<dd>Definicja 2</dd>
</dl>- Termin 1
- Definicja 1
- Termin 2
- Definicja 2
Przykład listy definicji
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista Definicji</title>
</head>
<body>
<h1>Lista Definicji Technologicznych</h1>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - język znaczników używany do tworzenia stron internetowych.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets - język stylizacji używany do opisu wyglądu dokumentu napisanego w HTML.</dd>
<dt>JavaScript</dt>
<dd>Język programowania, który umożliwia dynamiczne interakcje na stronach internetowych.</dd>
</dl>
</body>
</html>W tym przykładzie lista definicji przedstawia terminy technologiczne i ich definicje.
Zagnieżdżanie list
Listy mogą być również zagnieżdżane, tworząc listy w listach. Można to zrobić zarówno z listami nieuporządkowanymi, jak i uporządkowanymi.
Przykład zagnieżdżonej listy nieuporządkowanej
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zagnieżdżona Lista Nieuporządkowana</title>
</head>
<body>
<h1>Lista Zakupów</h1>
<ul>
<li>Owoce
<ul>
<li>Jabłka</li>
<li>Banany</li>
<li>Winogrona</li>
</ul>
</li>
<li>Warzywa
<ul>
<li>Marchewki</li>
<li>Brokuły</li>
<li>Szpinak</li>
</ul>
</li>
<li>Nabiał
<ul>
<li>Mleko</li>
<li>Jogurt</li>
<li>Ser</li>
</ul>
</li>
</ul>
</body>
</html>W tym przykładzie mamy listę zakupów, w której owoce, warzywa i nabiał mają swoje podlisty.
Stylizacja list za pomocą CSS
Ponadto listy możemy stylizować za pomocą CSS, aby pasowały do estetyki strony. Dodatkowo możemy zmieniać style markerów, odstępy między elementami, kolory i wiele innych.
Przykład stylizacji listy
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylizowana Lista</title>
<style>
ul {
list-style-type: square; /* Zmienia marker na kwadrat */
padding-left: 20px;
}
ol {
list-style-type: upper-roman; /* Zmienia numerację na rzymską */
padding-left: 20px;
}
dl {
font-family: Arial, sans-serif;
}
dt {
font-weight: bold;
}
dd {
margin-left: 20px;
}
</style>
</head>
<body>
<h1>Stylizowana Lista</h1>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
<ol>
<li>Element A</li>
<li>Element B</li>
<li>Element C</li>
</ol>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
</body>
</html>- Element 1
- Element 2
- Element 3
- Element A
- Element B
- Element C
- Term 1
- Definition 1
- Term 2
- Definition 2
W przykładzie powyżej listy nieuporządkowane mają markery w kształcie kwadratów, listy uporządkowane używają rzymskich cyfr, a listy definicji mają pogrubione terminy i wcięte definicje.
Lista HTML – podsumowanie
Podsumowując lista HTML jest nieodzownym narzędziem do organizowania informacji na stronach internetowych. Co więcej poprzez odpowiednie użycie list nieuporządkowanych, uporządkowanych i definicji, możemy przedstawiać informacje w przejrzysty i zrozumiały sposób. Dodatkowo znajomość podstawowych struktur i możliwości stylizacji pozwala na tworzenie atrakcyjnych i funkcjonalnych stron internetowych. Teraz, gdy poznałeś różne rodzaje list i sposoby ich użycia, możesz z łatwością organizować treści na swoich stronach internetowych.