Lists
Υπάρχουν τρία είδη λίστων, οι μη διατεταγμένες, οι διατεταγμένες και οι λίστες ορισμού. Για τη δημιουργία των δύο πρώτων χρησιμοποιείται το <ul> (unordered list) και το <ol> (ordered list). Ανάμεσα τους χρησιμοποιούμε το tag <li> για να δηλώσουμε ένα αντικείμενο της λίστας. Για παράδειγμα:
<h4>Μη διατεταγμένη λίστα</h4>
<ul>
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ul>
<h4>Διατεταγμένη λίστα</h4>
<ol>
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
<li>Αντικείμενο 4</li>
<li>Αντικείμενο 5</li>
</ol>
Ο παραπάνω κώδικα έχει το εξής αποτέλεσμα:
Δημιουργία μη διατεταγμένης και διατεταγμένης λίστας
Παρατηρούμε ότι ο browser βάζει στη μία περίπτωση bullets και στην άλλη (τη διατεταγμένη) αρίθμηση ώστε να καταλαβαίνει ο χρήστης ότι τα παραπάνω αντικείμενα ανήκουν σε μία λίστα με κοινές ιδιότητες.
Μπορούμε να ορίσουμε το σύμβολο (ή το είδος αρίθμησης για διατεταγμένη λίστα) που εμφανίζεται μπροστά από κάθε αντικείμενο. Αυτό υλοποιείται με τη χρήση της ιδιότητας 'type' για τα tag <ul>, <ol>. Π.χ.
<h4>Μη διατεταγμένες λίστες</h4>
<ul type="circle">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ul>
<ul type="disc">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ul>
<ul type="square">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ul>
<h4>Διατεταγμένες λίστες</h4>
<ol type="1">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ol>
<ol type="a">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ol>
<ol type="A">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ol>
<ol type="i">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ol>
<ol type="I">
<li>Αντικείμενο 1</li>
<li>Αντικείμενο 2</li>
<li>Αντικείμενο 3</li>
</ol>
Λίστες με διαφορετικά σύμβολα και αρίθμηση
Για τη δημιουργία μίας λίστας ορισμού, χρησιμοποιείται το tag <dl> (definition list) και τα αντικείμενά της δηλώνονται με το tag <dt>. Κάθε αντικείμενο της λίστας ορισμού έχει και μία περιγραφή που δηλώνεται με το tag <dd>. Π.χ.
<h4>Λίστα ορισμού</h4>
<dl>
<dt>Apache</dt>
<dd>Web Server</dd>
<dt>PHP</dt>
<dd>Server-side scripting language</dd>
<dt>MySQL</dt>
<dd>Database Management System</dd>
</dl>
Δημιουργία λίστας ορισμού
Εμφωλευμένες λίστες
Ένα σημαντικό στοιχείο είναι η δυνατότητα εμφωλευμένων λιστών, δηλαδή ένα αντικείμενο μιας λίστας να αποτελεί το ίδιο μια νέα λίστα. Με αυτό τον τρόπο, μπορεί να υπάρξει μία δενδρική δομή κατηγοριών, πράγμα χρήσιμο σε αρκετές περιπτώσεις.
<h4>Εμφωλευμένες λίστες</h4>
<ul>
<li>Κατηγορία 1</li>
<li>Κατηγορία 2
<ul>
<li>Υποκατηγορία 1 της κατηγορίας 2</li>
<li>Υποκατηγορία 2 της κατηγορίας 2</li>
<li>Υποκατηγορία 3 της κατηγορίας 2</li>
</ul>
</li>
<li>Κατηγορία 3</li>
<li>Κατηγορία 4</li>
</ul>
Εμφωλευμένες λίστες