Beskrivningslistan ger ett semantiskt sätt att strukturera och presentera information som skapar en relation mellan termer och deras motsvarande beskrivningar. Det gör data eller information mer tillgänglig och begriplig. Skaparna kan använda beskrivningslistor på platser som ordlistor, ordböcker, FAQ-sektioner, produktspecifikationer, etc. Den här artikeln visar proceduren för att använda en beskrivningslista i HTML.
Hur man använder beskrivningslista i HTML?
Beskrivningslistan består av ' ”, “ ', och ' ”-taggar och den används för att representera en samling termer och deras motsvarande definitioner. Den presenterar/visar innehållet i en strukturerad form där beskrivningen går utöver en enkel punktlista. CSS-egenskaperna kan också tillämpas på beskrivningslistan för att skapa ett visuellt tilltalande gränssnitt.
Besök kodavsnittet nedan för att skapa en beskrivningslista i HTML:
< kropp >
< div >
< h2 > Laptop marknadsandelar h2 >
< dl >
< dt > Hp dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 30 % dd >
< dt > Dell dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 24 % dd >
< dt > Lenovo dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 14 % dd >
dl >
div >
kropp >
Förklaringen av ovanstående kodavsnitt:
-
- Till en början, föräldern ' div ”-element har skapats som fungerar som en behållare för beskrivningslistelementet och andra HTML-element som ” ”.
- Därefter kommer beskrivningslistan '
- Sedan, beskrivningens namn/term ' ”-taggen används för att definiera beskrivningen av de objekt vars beskrivning kommer att läggas till.
- Därefter visas beskrivningsdata ' ”-tagg infogas som innehåller beskrivningen/informationen relaterad till beskrivningsobjektet.
Efter slutet av kompileringsfasen visas HTML-elementen på webbsidan så här:
Utdata visar att beskrivningslistan har skapats.
Exempel 1: Tilldela flera beskrivningar till en enskild term
Beskrivningstabellen kan skapas där det finns mer än en beskrivning för en enskild term. Det kan vara särskilt användbart om det finns mer än en betydelse eller metod med vilken beskrivningstermen kan förklaras.
Koden för ovanstående scenario visas nedan:
< div >< h2 > Marknadsandelar för bärbara datorer h2 >
< dl >
< dt > Hp dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 30 % i 2018 dd >
< dd > I kategorin stationära system och bärbara datorer har en andel av 23 % i 2017 dd >
< dt > Dell dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 24 % i 2018 dd >
< dd > I kategorin stationära system och bärbara datorer har en andel av 27 % i 2017 dd >
< dt > Lenovo dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 14 % i 2018 och 9 % i 2017 dd >
dl >
div >
I ovanstående kod:
-
- Först skapas beskrivningslistan med hjälp av ' dl ”, “ dt ' och ' dd ' element.
- Nästa, flera ' '-taggar används under en enda ' dt ' element. Den tilldelar flera beskrivningar till en enda term.
Efter sammanställningsfasen:
Resultatet visar att flera beskrivningar har lagts till för en enda term.
Exempel 2: Tilldela flera termer till en enda beskrivning
Utvecklarna kan också skapa en beskrivningslista som består av flera beskrivningstermer med enstaka beskrivningsdata. Det är särskilt användbart när flera termer är lika eller har samma funktionalitet. Genom att använda denna teknik kan alla dessa termer beskrivas på en gång:
< div stil = 'marginal: 20px' >< h2 > Laptop marknadsandelar h2 >
< dl >
< dt > Hp dt >
< dt > Elitbok dt >
< dt > proBook dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 30 % i 2018 dd >
< dd > I kategorin stationära system och bärbara datorer har en andel av 23 % i 2017 dd >
< dt > Lenovo dt >
< dd > I kategorin stationära system och bärbara datorer har en andel av 14 % i 2018 och 9 % i 2017 dd >
dl >
div >
I kodblocket ovan skapas beskrivningslistan och flera ' '-taggar används med en enda ' '-tagg.
Efter slutet av kompileringsfasen:
Ovanstående ögonblicksbild visar att flera termer tilldelas en enda beskrivningsdata.
Slutsats
Beskrivningslistan skapas med hjälp av beskrivningslistan ' ”-taggen som skapar behållaren för listobjekten och deras beskrivning. Dessutom har ' ”-taggen anger objektnamnet vars beskrivning kommer att tillhandahållas. Medan ' ”-taggen lagrar motsvarande beskrivning. Den här artikeln har demonstrerat användningen av en beskrivningslista i HTML.