Λίστες στην HTML (HTML Lists)

Λίστες στην HTML

Οι λίστες στην HTML μπορούν να είναι αριθμημένες <ol> </ol> ή μη αριθμημένες <ul> </ul>. Κάθε μέλος της λίστας έχει τις ετικέτες <li> </li>.

Αριθμημένες Λίστες

Στις αριθμημένες λίστες στην HTML μπορούμε να διαλέξουμε τον τύπο της αρίθμησης που θα χρησιμοποιήσουμε στην ιστοσελίδα μας.

Οι αριθμημένες λίστες στην HTML έχουν τους εξής τύπους:

type=”1″
type=”A”
type=”a”
type=”I”
type=”i”

Αριθμημένη Λίστα type=”1″

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με αριθμούς. Αυτός είναι ο προεπιλεγμένος τύπος αρίθμησης στην περίπτωση που δεν ορίσουμε κάποιο τύπο εμείς.

Παράδειγμα

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Αριθμημένη Λίστα type=”A”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με κεφαλαία γράμματα.

Παράδειγμα

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Αριθμημένη Λίστα type=”a”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με πεζά γράμματα.

Παράδειγμα

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Αριθμημένη Λίστα type=”I”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με κεφαλαία Λατινικά.

Παράδειγμα

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Αριθμημένη Λίστα type=”i”

Σε αυτόν τον τύπο λίστας η αρίθμηση γίνεται με πεζά Λατινικά.

Παράδειγμα

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

Αποτέλεσμα

Μη αριθμημένες Λίστες

Οι μη αριθμημένες λίστες αντί για αριθμούς έχουν δείκτες (markers). Σε αυτές τις λίστες μπορούμε να διαλέξουμε το τύπο του δείκτη που θα χρησιμοποιήσουμε στην ιστοσελίδα μας.

Οι μη αριθμημένες λίστες έχουν τους εξής τύπους:

list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none

Μη αριθμημένη Λίστα list-style-type:disc

Σε αυτόν τον τύπο λίστας οι δείκτες είναι μαύρες κουκκίδες. Αυτός είναι ο προεπιλεγμένος τύπος δεικτών στην περίπτωση που δεν ορίσουμε κάποιο τύπο εμείς.

Παράδειγμα

<ul style="list-style-type:disc">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Μη αριθμημένη Λίστα list-style-type:circle

Σε αυτόν τον τύπο λίστας οι δείκτες είναι κύκλοι.

Παράδειγμα

<ul style="list-style-type:circle">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Μη αριθμημένη Λίστα list-style-type:square

Σε αυτόν τον τύπο λίστας οι δείκτες είναι μαύρα τετράγωνα.

Παράδειγμα

<ul style="list-style-type:square">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα

Μη αριθμημένη Λίστα list-style-type:none

Σε αυτόν τον τύπο λίστας δεν υπάρχουν δείκτες.

Παράδειγμα

<ul style="list-style-type:none">
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

Αποτέλεσμα