Οι HTML λίστες επιτρέπουν στους web developers να ομαδοποιούν ένα σύνολο σχετικών στοιχείων σε λίστες.
Υπάρχουν τρεις τύποι βασικών λιστών στην HTML:
- Αταξινόμητη λίστα (Unordered List):
Αταξινόμητη λίστα αποτελείται από μια σειρά στοιχείων που παρουσιάζονται χωρίς συγκεκριμένη σειρά. Τα στοιχεία αυτά συνήθως εμφανίζονται με κουκίδες, αλλά μπορεί να προσαρμοστεί η εμφάνισή τους μέσω CSS. Παράδειγμα:
<ul>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ul>
- Ταξινομημένη λίστα (Ordered List):
Ταξινομημένη λίστα αποτελείται από μια σειρά στοιχείων που παρουσιάζονται με συγκεκριμένη σειρά. Τα στοιχεία αυτά συνήθως εμφανίζονται με αριθμούς, αλφαβητικά γράμματα ή άλλα σύμβολα, ανάλογα με την προτίμηση του χρήστη ή τον τύπο της λίστας. Παράδειγμα:
<ol>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ol>
- Λίστα ορισμένων όρων (Definition List):
Η λίστα ορισμένων όρων (Definition List) αποτελείται από ζευγάρια στοιχείων που αποτελούνται από έναν όρο (στοιχείο ορισμού) και μια περιγραφή (στοιχείο περιγραφής). Αυτό το είδος λίστας χρησιμοποιείται συνήθως για να παρουσιάσει ορισμούς ή ερμηνείες.
<dl> <dt>Όρος 1</dt> <dd>Περιγραφή του όρου 1.</dd> <dt>Όρος 2</dt> <dd>Περιγραφή του όρου 2.</dd> <dt>Όρος 3</dt> <dd>Περιγραφή του όρου 3.</dd> </dl>
Στο παραπάνω παράδειγμα, οι όροι (στοιχεία ορισμού) είναι οι “Όρος 1”, “Όρος 2”, “Όρος 3”, και οι αντίστοιχες περιγραφές (στοιχεία περιγραφής) παρέχονται κάτω από κάθε όρο.
[adinserter block=”2″]
Η HTML υποστηρίζει επίσης λίστες περιγραφής (description lists).
Μια λίστα περιγραφής αποτελείται από μια λίστα όρων, με μια περιγραφή για κάθε όρο.
Το στοιχείο <dl> καθορίζει τη λίστα περιγραφής, το στοιχείο <dt> καθορίζει τον όρο (όνομα), και το στοιχείο <dd> περιγράφει κάθε όρο.
Παράδειγμα:
<dl> <dt>Όρος 1</dt> <dd>Περιγραφή του όρου 1.</dd> <dt>Όρος 2</dt> <dd>Περιγραφή του όρου 2.</dd> <dt>Όρος 3</dt> <dd>Περιγραφή του όρου 3.</dd> </dl>
Στο παραπάνω παράδειγμα, οι όροι (στοιχεία <dt>) είναι οι “Όρος 1”, “Όρος 2”, “Όρος 3”, και οι αντίστοιχες περιγραφές (στοιχεία <dd>) παρέχονται κάτω από κάθε όρο.
Μια μη ταξινομημένη λίστα ξεκινά με την ετικέτα <ul>. Κάθε στοιχείο της λίστας ξεκινά με την ετικέτα <li>.
Τα στοιχεία της λίστας θα εμφανίζονται με κουκίδες (μικροί μαύροι κύκλοι) από προεπιλογή:
Παράδειγμα:
<ul> <li>Στοιχείο 1</li> <li>Στοιχείο 2</li> <li>Στοιχείο 3</li> </ul>
Στο παραπάνω παράδειγμα, η μη ταξινομημένη λίστα ξεκινά με την ετικέτα <ul> και κάθε στοιχείο της λίστας περικλείεται ανάμεσα στις ετικέτες <li>. Τα στοιχεία της λίστας θα εμφανιστούν με κουκίδες προεπιλεγμένα.
Η ιδιότητα CSS list-style-type χρησιμοποιείται για να ορίσει το στυλ του δείκτη των στοιχείων της λίστας. Μπορεί να πάρει μία από τις ακόλουθες τιμές:
- disc: Κύκλος (προεπιλεγμένη τιμή)
- circle: Κενός κύκλος
- square: Τετράγωνο
- decimal: Αριθμοί (1, 2, 3, κλπ.)
- decimal-leading-zero: Αριθμοί με προηγούμενο μηδέν (01, 02, 03, κλπ.)
- lower-alpha: Μικρά γράμματα (a, b, c, κλπ.)
- upper-alpha: Κεφαλαία γράμματα (A, B, C, κλπ.)
- lower-roman: Μικρά ρωμαϊκά γράμματα (i, ii, iii, κλπ.)
- upper-roman: Κεφαλαία ρωμαϊκά γράμματα (I, II, III, κλπ.)
Παράδειγμα:
<style>
ul {
list-style-type: square;
}
</style>
<ul>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ul>
Στο παραπάνω παράδειγμα, η ιδιότητα list-style-type: square; εφαρμόζεται στην λίστα ul, και τα στοιχεία της λίστας θα εμφανίζονται με τετράγωνο ως δείκτη.
Οι λίστες μπορούν να εμφωλευτούν (λίστα μέσα σε λίστα):
Παράδειγμα:
<ul>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>
Στοιχείο 3
<ul>
<li>Υποστοιχείο 1</li>
<li>Υποστοιχείο 2</li>
</ul>
</li>
<li>Στοιχείο 4</li>
</ul>
Στο παραπάνω παράδειγμα, η μη ταξινομημένη λίστα έχει τέσσερα στοιχεία. Το τρίτο στοιχείο έχει ένα υποστοιχείο λίστας, η οποία περιλαμβάνει δύο ακόμη στοιχεία. Οι εμφωλευμένες λίστες μας επιτρέπουν να δημιουργούμε ιεραρχίες και να οργανώνουμε το περιεχόμενο μας σε διάφορα επίπεδα.
Οι HTML λίστες μπορούν να στυλοποιηθούν με πολλούς διαφορετικούς τρόπους χρησιμοποιώντας CSS.
Ένας δημοφιλής τρόπος είναι η στυλοποίηση μιας λίστας οριζόντια για τη δημιουργία μιας μπάρας πλοήγησης:
[adinserter block=”3″]
Παράδειγμα:
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
ul li {
margin-right: 10px;
}
</style>
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Υπηρεσίες</a></li>
<li><a href="#">Προϊόντα</a></li>
<li><a href="#">Επικοινωνία</a></li>
</ul>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε CSS για να στυλοποιήσουμε τη λίστα. Οι ετικέτες <ul> και <li> λαμβάνουν συγκεκριμένες ιδιότητες. Με την ιδιότητα display: flex;, η λίστα εμφανίζεται οριζόντια. Η ιδιότητα list-style-type: none; απενεργοποιεί την προεπιλεγμένη εμφάνιση του δείκτη της λίστας. Η ιδιότητα padding: 0; και margin: 0; αφαιρούν τα περιθώρια που υπάρχουν προεπιλεγμένα. Με την ιδιότητα margin-right: 10px;, προσθέτουμε ένα αριστερό περιθώριο ανάμεσα στα στοιχεία της λίστας για να τα χωρίσουμε.
Μια ταξινομημένη λίστα ξεκινά με την ετικέτα <ol>. Κάθε στοιχείο της λίστας ξεκινά με την ετικέτα <li>.
Τα στοιχεία της λίστας θα εμφανίζονται με αριθμούς (προεπιλεγμένα) ως δείκτες:
Παράδειγμα:
<ol> <li>Στοιχείο 1</li> <li>Στοιχείο 2</li> <li>Στοιχείο 3</li> </ol>
Στο παραπάνω παράδειγμα, η ταξινομημένη λίστα ξεκινά με την ετικέτα <ol> και κάθε στοιχείο της λίστας περικλείεται ανάμεσα στις ετικέτες <li>. Τα στοιχεία της λίστας θα εμφανιστούν με αριθμούς ως δείκτες, ανάλογα με την σειρά τους.
Το χαρακτηριστικό type της ετικέτας <ol> ορίζει τον τύπο του δείκτη των στοιχείων της λίστας:
| Τύπος | Περιγραφή |
|---|---|
| type=”1″ | Τα στοιχεία της λίστας θα αριθμούνται με αριθμούς (προεπιλογή) |
| type=”A” | Τα στοιχεία της λίστας θα αριθμούνται με κεφαλαία γράμματα |
| type=”a” | Τα στοιχεία της λίστας θα αριθμούνται με μικρά γράμματα |
| type=”I” | Τα στοιχεία της λίστας θα αριθμούνται με κεφαλαία ρωμαϊκά γράμματα |
| type=”i” | Τα στοιχεία της λίστας θα αριθμούνται με μικρά ρωμαϊκά γράμματα |
Παράδειγμα:
<ol type="A"> <li>Στοιχείο 1</li> <li>Στοιχείο 2</li> <li>Στοιχείο 3</li> </ol>
Στο παραπάνω παράδειγμα, η ετικέτα <ol> έχει το χαρακτηριστικό type=”A”, οπότε τα στοιχεία της λίστας θα αριθμούνται με κεφαλαία γράμματα (A, B, C, κλπ.). Μπορείτε να αλλάξετε την τιμή του type ανάλογα με τον επιθυμητό τύπο δείκτη.
Από προεπιλογή, μια ταξινομημένη λίστα θα αρχίσει την αρίθμηση από τον αριθμό 1. Αν θέλετε να ξεκινήσετε την αρίθμηση από έναν συγκεκριμένο αριθμό, μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό start:
Παράδειγμα:
<ol start="5"> <li>Στοιχείο 5</li> <li>Στοιχείο 6</li> <li>Στοιχείο 7</li> </ol>
Στο παραπάνω παράδειγμα, η ταξινομημένη λίστα ξεκινά από τον αριθμό 5, και κάθε στοιχείο της λίστας αριθμείται ανάλογα. Μπορείτε να ορίσετε την τιμή του start ώστε να ξεκινήσετε την αρίθμηση από οποιονδήποτε αριθμό θέλετε.
Οι λίστες μπορούν να εμφωλευτούν (λίστα μέσα σε λίστα):
[adinserter block=”4″]
Παράδειγμα:
<ol>
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>
Στοιχείο 3
<ol>
<li>Υποστοιχείο 1</li>
<li>Υποστοιχείο 2</li>
</ol>
</li>
<li>Στοιχείο 4</li>
</ol>
Στο παραπάνω παράδειγμα, η ταξινομημένη λίστα έχει τέσσερα στοιχεία. Το τρίτο στοιχείο έχει μια εμφωλευμένη ταξινομημένη λίστα, η οποία περιλαμβάνει δύο ακόμη στοιχεία. Οι εμφωλευμένες λίστες μας επιτρέπουν να δημιουργούμε ιεραρχίες και να οργανώνουμε το περιεχόμενο μας σε διάφορα επίπεδα.
Η HTML υποστηρίζει επίσης λίστες περιγραφής (description lists).
Μια λίστα περιγραφής αποτελείται από μια λίστα όρων, με μια περιγραφή για κάθε όρο.
Το στοιχείο <dl> καθορίζει τη λίστα περιγραφής, το στοιχείο <dt> καθορίζει τον όρο (όνομα), και το στοιχείο <dd> περιγράφει κάθε όρο.
Παράδειγμα:
<dl> <dt>Όρος 1</dt> <dd>Περιγραφή του όρου 1.</dd> <dt>Όρος 2</dt> <dd>Περιγραφή του όρου 2.</dd> <dt>Όρος 3</dt> <dd>Περιγραφή του όρου 3.</dd> </dl>
Στο παραπάνω παράδειγμα, οι όροι (στοιχεία <dt>) είναι οι “Όρος 1”, “Όρος 2”, “Όρος 3”, και οι αντίστοιχες περιγραφές (στοιχεία <dd>) παρέχονται κάτω από κάθε όρο.