Creare un elenco puntato in HTML

Creare un elenco puntato in HTML

Creare un elenco puntato in HTML

Gli elenchi puntati sono molto utili durante lo sviluppo delle pagine web, possono essere utilizzati per creare degli elenchi di elementi, allineati uno sotto l’altro.

Creare un elenco puntato in HTML è molto semplice, avremo bisogno di utilizzare 2 tag:

  • ul
  • li

Il tag ul (unordered list) serve ad indicare che al suo interno è presente una lista non ordinata e che quindi il browser dovrà considerare ogni elemento contenuto come parte di quella lista.

Il tag li (list item) indica invece che il contenuto è uno degli elementi della lista.

Per poter scrivere correttamente una lista non ordinata dovremo aprire il tag ul, ed al suo interno inserire tanti elementi li, quanti sono gli elementi che vogliamo aggiungere alla lista, e quindi chiudere il tag ul.

Ecco un esempio di una lista:

<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ul>

In questo esempio, abbiamo creato 3 elementi, contenuti in una lista non ordinata (quindi visualizzati come elenco puntato).

E’ possibile personalizzare la lista tramite codice CSS, che consiglio di scrivere su un file CSS a parte, da collegare al file HTML, ma per semplicità in questo esempio, andrò ad inserire il codice in CSS direttamente nel codice HTML utilizzando l’attributo style.

<ul style="list-style-type: circle; color: red;">
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ul>

In questo secondo esempio, il codice HTML resta lo stesso, ma abbiamo aggiunto l’attributo style, che permette di aggiungere uno stile in CSS all’elemento.

Nel nostro caso abbiamo aggiunto 2 attributi:

  • List-style-type :permette di cambiare l’aspetto dell’elemento prima della lista (punto, cerchio, numero, ecc.
  • Color: Imposta il colore del testo della lista
Claudio Masci
Claudio Masci

Sono innanzitutto un appassionato di informatica e tecnologia in generale. Lavoro in ambito informatico da circa 16 anni, spaziando in diversi campi, andando dalla programmazione web, allo sviluppo di software, dalla grafica alla modellazione 3d ed al video editing, ho sempre voluto approfondire ogni aspetto e questo mi ha permesso di lavorare in diversi ambiti informatici.

    Rispondi

    X
    Mostra
    facebook
    twitter
    youtube
    reddit
    follow us in feedly
    Flipboard