Come fare un elenco puntato in HTML

Cos’è un elenco puntato?

Un elenco puntato nella web typography è un abbellimento usato per introdurre una voce di un elenco. Infatti, un elenco di parole con un puntino alla sua sinistra, è quello a cui pensiamo subito quando immaginiamo un elenco puntato. ma questo è troppo riduttivo nel web design. Allora vediamo quando usare un elenco puntato e come usarlo bene.

Quando usare un elenco puntato?

Come ho già detto nel paragrafo precedente un elenco puntato può sicuramente essere un abbellimento testuale che mette in evidenza i punti di una lista in maniera più efficace e gradevole alla vista ma anche un elemento di puro design o meglio di ux design. Infatti questo elemento può essere sfruttato per creare gallerie immagini, menu di navigazione e molto altro che ti dirò qui di seguito. Ma adesso andiamo al sodo, ti dirò tecnicamente come si crea usando il solo codice html, il quale può essere usato sia su siti classici che su quelli dinamici ad esempio per migliorare l’aspetto di un blog WordPress già esistente.

Come fare un elenco puntato in HTML

Questo è un esempio di un elenco puntato in html, ecco come si fa:

• testuale
• bottoni
• immagini
• voci di menù

Potresti aver bisogno di creare un menù in una barra di navigazione del tuo sito da posizionare in un’area specifica per migliorare la UX, allora dovrai fare un elenco puntato orizzontale. Se vuoi fare la differenza ti consiglio di installare GetBootstrap sul tuo sito web per ottenere un elenco puntato orizzontale cosi come qui sotto:
Codice da copiare ed incollare sul tuo sito per creare un menu orizzontale costruito grazie ad un elenco puntato html.

• Link 1
• Link 2
• Link 3

<!-- Copia questo codice ed incollalo sulla tua pagina web -->

<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">Link 1</li>
<li class="list-group-item">Link 2</li>
<li class="list-group-item">Link 3</li>
</ul>

<!-- Copia fin qui -->