Kolejnym z elementów będzie list. Posiadamy 2 rodzaje list <ol></ol> czyli listę numerowaną i <ul></ul> czyli listę nie numerowaną. Niezależnie od od typu listy jej poszczególne elementy zawieramy w tagach <li></li>
A oto przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h3>lista numerowana</h3>
<ol>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
<h3>lista nienumerowana</h3>
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</body>
</html> A oto jego rezultat
Jednym z atrybutów listy jest type definiuje on typ listy na przykład jeśli chcemy aby lista była numerowana cyframi rzymskimi ustawiamy atrybut type=”I” lub type=”i” w zależności od tego jakiej wielkości chcemy znaki
A oto przykładowe wartości parametru type:
type=”I” dla dużych cyfr rzymskich
type=”i” dla małych cyfr rzymskich
type=”A” dla dużych liter alfabetu
type=”a” dla małych liter alfabetu
type=”sque” dla kwadratów
type=”circle” dla kół pustych w środku (okręgów)
type=”disc” dla kół pełnych w środku
I przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h3>listy numerowana</h3>
<ol type="I">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
<ol type="i">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
<ol type="A">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
<ol type="a">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ol>
<h3>lista nienumerowana</h3>
<ul type="disc">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
<ul type="circle">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
<ul type="sque">
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
</ul>
</body>
</html> A oto jego rezultat:
Tag <li></li> też posiada swoje atrybuty jednym z nich jest atrybut value=”” pozwala on ustawić konkretny numer jaki będzie wyświetlany przed tym elementem dodatkowo wartości elementów dalej będą liczone od tej wartości
A oto przykładowy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h3>lista numerowana</h3>
<ol>
<li>element 1</li>
<li value="55"> element 2 ale wyświetlany jako 55</li>
<li>element 3 ale wyświetlany jako 56</li>
</ol>
</body>
</html> A oto jego rezultat:
Można też zagnieżdżać listy w sobie czy to nienumerowane w numerowanych czy numerowane w nienumerowanych albo numerowane w numerowanych czy nienumerowane w numerowanych
a oto jak to wygląda w praktyce
<!DOCTYPE html>
<html lang="pl">
<head>
<title>tytuł strony</title>
<meta charset="UTF-8">
<meta name="keywords" content="słowo1, słowo2, słowo3">
<meta name="description" content="Opis strony">
</head>
<body>
<h3>lista numerowana</h3>
<ol>
<li>element 1</li>
<li>lista 1
<ol>
<li>lista 2
<ul>
<li>lista 3
<ul>
<li>koniec</li>
</ul>
</li>
</ul>
</li>
<li>lista 4
<ul>
<li>lista 5
<ol>
<li>koniec</li>
</ul>
</li>
</ul>
</li>
<li>nic</li>
</ol>
</li>
<li>element 3</li>
</ol>
</body>
</html> A oto rezultat
test.exe