Il tag <UL> in HTML creerà una lista "non ordinato" sulla tua pagina. Questo significa che l'elenco non ha alcun ordine particolare, e gli elementi della lista vengono mostrati con le piccole forme chiamate "proiettili" per marcare ogni voce. Questo articolo vi darà alcuni consigli su come <ul> viene utilizzato, la corretta codifica e una tecnica avanzata per migliorare l'aspetto. Sentitevi liberi di copiare il codice esempio nella tua pagina per vedere come funziona.

Pianificazione

L'aggiunta di <ul> nel layout HTML dovrebbe essere fatto per un motivo; di presentare un elenco di elementi che hanno qualcosa in comune, ma non è in alcun ordine particolare. Se la lista è per gli elementi specifici, o se il contenuto circostante si riferisce a elementi nella lista, un "elenco ordinato" --- usando <ol> --- dovrebbe essere usato invece.

Codice Entrando

E 'importante ricordare che <UL> non viene usato da solo. A differenza di <P> o <A>, il tag <UL> deve <LI> per contrassegnare ogni elemento della lista. Sebbene la maggior parte dei browser consente <LI> per essere utilizzato senza il <LI /> tag di chiusura, è necessario utilizzare il <UL /> tag per segnare la fine della lista.

Diversi tipi di proiettile

Per impostazione predefinita, quasi tutti i browser mostreranno un cerchio pieno o "disco" come simbolo proiettile. Questo non è l'unica opzione disponibile. Da standard HTML anziani, è possibile utilizzare il "type =" attributo per usare altre due forme; un cerchio vuoto o di un quadrato pieno.
esempio:
<Ul tipo = "piazza">
<Li> La lista appare con simboli quadrati compilati per proiettili. </ Li>
</ Ul>

Le liste gerarchiche o nidificati

Come molte cose in HTML, elenchi possono essere "annidati" all'interno di ogni altro. Questo ha l'effetto di un elenco secondario, che appare ulteriormente incavata e utilizza una forma differente per il proiettile di default. Una lista annidata deve essere inserito all'interno di un elenco-item della lista "genitore".
esempio:
<Ul>
<Li> Primo elemento nella lista principale. </ Li>
<Li> Questo può essere il nome della sottolista. Si noti il ​​tag di chiusura manca qui.
<Ul>
<Li> Prima voce sub-list. </ Li>
<Li> Secondo elemento sub-list. </ Li>
</ Ul> </ li>
<Li> Terzo elemento nella lista principale. </ Li>
</ Ul>

Liste Migliorare usando i CSS

Come accennato prima, i proiettili possono essere diverse forme. HTML di per sé consente solo tre forme distinte, ma i fogli di stile apre un intero mondo di possibilità. Utilizzando CSS, una piccola immagine può essere utilizzato anche per un proiettile. Assegnare <UL> per un ID o di classe, quindi utilizzare le due regole indicate qui di utilizzare un proiettile su misura.
esempio:
<Style>
ul # myList {list-style-type: none; list-style-image: url (images / arrow.gif); }
</ Style>
...
<Ul id = "myList">
<Li> La lista userebbe [arrow.gif] come un proiettile. </ Li>
<Li> L'immagine stessa non deve essere più grande della lettera "O". </ Li>
</ Ul>