Come utilizzare l'elenco delle descrizioni in HTML?

Come Utilizzare L Elenco Delle Descrizioni In Html



L'elenco delle descrizioni fornisce un modo semantico per strutturare e presentare le informazioni creando una relazione tra i termini e le descrizioni corrispondenti. Rende i dati o le informazioni più accessibili e comprensibili. I creatori possono utilizzare elenchi di descrizioni in luoghi come glossari, dizionari, sezioni FAQ, specifiche del prodotto, ecc. Questo articolo illustra la procedura per l'utilizzo di un elenco di descrizioni in HTML.

Come utilizzare l'elenco delle descrizioni in HTML?

L'elenco di descrizione è composto da '

”, “
', E '
” e viene utilizzato per rappresentare una raccolta di termini e le definizioni corrispondenti. Presenta/visualizza il contenuto in una forma strutturata in cui la descrizione va oltre un semplice elenco puntato. Le proprietà CSS possono anche essere applicate all'elenco delle descrizioni per creare un'interfaccia visivamente accattivante.







Visita il seguente frammento di codice per creare un elenco di descrizioni in HTML:



< corpo >
< div >
< h2 > Quote di mercato dei laptop h2 >
< dl >
< dt > HP dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 30 % gg >
< dt > Dell dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 24 % gg >
< dt > Lenovo dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 14 % gg >
dl >
div >
corpo >


La spiegazione del frammento di codice sopra:



    • In un primo momento, il genitore” div ” è stato creato un elemento che funge da contenitore per l'elemento della lista di descrizioni e altri elementi HTML come “

      ”.

    • Successivamente, l'elenco delle descrizioni '
      Il tag ” viene utilizzato per configurare l'ambiente per l'elenco delle descrizioni.
    • Quindi, il nome/termine descrittivo '
      Il tag ” viene utilizzato per definire la descrizione degli elementi la cui descrizione verrà aggiunta.
    • Successivamente, i dati descrittivi '
      ” viene inserito il tag che contiene la descrizione/informazione relativa all'elemento della descrizione.

Dopo la fine della fase di compilazione, gli elementi HTML appaiono sulla pagina web in questo modo:






L'output mostra che l'elenco di descrizioni è stato generato.

Esempio 1: assegnare più descrizioni a un singolo termine



È possibile creare la tabella descrittiva in cui è presente più di una descrizione per un singolo termine. Può essere particolarmente utile se esiste più di un significato o metodo con cui il termine descrittivo può essere spiegato.

Il codice per lo scenario di cui sopra è mostrato di seguito:

< div >
< h2 > Quote di mercato dei laptop h2 >
< dl >
< dt > HP dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 30 % In 2018 gg >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 23 % In 2017 gg >
< dt > Dell dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 24 % In 2018 gg >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 27 % In 2017 gg >
< dt > Lenovo dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 14 % In 2018 E 9 % In 2017 gg >
dl >
div >


Nel codice sopra:

    • Innanzitutto, l'elenco delle descrizioni viene creato con l'aiuto di ' dl ”, “ dt ' E ' gg ' elementi.
    • Successivamente, più '
      'i tag sono utilizzati sotto un singolo' dt elemento '. Assegna più descrizioni a un singolo termine.

Dopo la fase di compilazione:


L'output mostra che sono state aggiunte più descrizioni per un singolo termine.

Esempio 2: Assegna più termini a una singola descrizione

Gli sviluppatori possono anche creare un elenco descrittivo composto da più termini descrittivi con dati descrittivi singoli. È particolarmente utile quando più termini sono simili o hanno la stessa funzionalità. Usando questa tecnica, tutti questi termini possono essere descritti contemporaneamente:

< div stile = 'margine: 20px' >
< h2 > Quote di mercato dei laptop h2 >
< dl >
< dt > HP dt >
< dt > EliteBook dt >
< dt > proBook dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 30 % In 2018 gg >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 23 % In 2017 gg >
< dt > Lenovo dt >
< gg > Nella categoria Sistemi desktop e laptop ha una quota di 14 % In 2018 E 9 % In 2017 gg >
dl >
div >


Nel blocco di codice sopra, viene creato l'elenco di descrizioni e più '

'i tag vengono utilizzati con un singolo'
etichetta '.

Al termine della fase di compilazione:


L'istantanea sopra mostra che più termini vengono assegnati con dati di descrizione singola.

Conclusione

L'elenco delle descrizioni viene creato utilizzando l'elenco delle descrizioni '

” tag che crea il contenitore per le voci della lista e la loro descrizione. Inoltre, il “
Il tag ” denota il nome dell'elemento di cui verrà fornita la descrizione. Mentre il '
Il tag ” memorizza la descrizione corrispondente. Questo articolo ha dimostrato l'utilizzo di un elenco di descrizioni in HTML.