De beschrijvingslijst biedt een semantische manier om informatie te structureren en te presenteren door een relatie te creëren tussen termen en hun overeenkomstige beschrijvingen. Het maakt de gegevens of informatie toegankelijker en begrijpelijker. De makers kunnen beschrijvingslijsten gebruiken op plaatsen zoals woordenlijsten, woordenboeken, FAQ-secties, productspecificaties, enz. Dit artikel demonstreert de procedure voor het gebruik van een beschrijvingslijst in HTML.
Hoe gebruik ik een beschrijvingslijst in HTML?
De beschrijvingslijst bestaat uit “ ”, “ ', En ' ”-tags en wordt gebruikt om een verzameling termen en de bijbehorende definities weer te geven. Het presenteert/toont de inhoud in een gestructureerde vorm waarin de beschrijving verder gaat dan een eenvoudige lijst met opsommingstekens. De CSS-eigenschappen kunnen ook worden toegepast op de beschrijvingslijst om een visueel aantrekkelijke interface te creëren.
Ga naar het onderstaande codefragment om een beschrijvingslijst in HTML te maken:
< lichaam >
< div >
< h2 > Marktaandelen voor laptops h2 >
< dl >
< dt > PK dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 30 % dd >
< dt > Dell dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 24 % dd >
< dt > Lenovo dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 14 % dd >
dl >
div >
lichaam >
De uitleg van het bovenstaande codefragment:
-
- Eerst de ouder “ div Er is een ”-element gemaakt dat fungeert als een container voor het beschrijvingslijstelement en andere HTML-elementen zoals “ ”.
- Vervolgens de beschrijvingslijst '
- Vervolgens de beschrijving naam/term ' ” tag wordt gebruikt om de beschrijving te definiëren van de items waarvan de beschrijving zal worden toegevoegd.
- Daarna de beschrijvingsgegevens ' ” tag is ingevoegd die de beschrijving/informatie bevat met betrekking tot het beschrijvingsitem.
Na het einde van de compilatiefase verschijnen de HTML-elementen als volgt op de webpagina:
De uitvoer laat zien dat de beschrijvingslijst is gegenereerd.
Voorbeeld 1: wijs meerdere beschrijvingen toe aan een enkele term
Er kan een beschrijvingstabel worden gemaakt waarin er meer dan één beschrijving voor een enkele term is. Het kan met name handig zijn als er meer dan één betekenis of methode is waarmee de beschrijvende term kan worden uitgelegd.
De code voor het bovenstaande scenario wordt hieronder weergegeven:
< div >< h2 > Marktaandelen voor laptops h2 >
< dl >
< dt > PK dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 30 % in 2018 dd >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 23 % in 2017 dd >
< dt > Dell dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 24 % in 2018 dd >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 27 % in 2017 dd >
< dt > Lenovo dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 14 % in 2018 En 9 % in 2017 dd >
dl >
div >
In bovenstaande code:
-
- Eerst wordt de beschrijvingslijst gemaakt met behulp van ' dl ”, “ dt ' En ' dd ” elementen.
- Vervolgens meerdere “ ”-tags worden gebruikt onder één enkele “ dt ”-element. Het wijst meerdere beschrijvingen toe aan een enkele term.
Na de compilatiefase:
De uitvoer laat zien dat er meerdere beschrijvingen zijn toegevoegd voor een enkele term.
Voorbeeld 2: wijs meerdere termen toe aan een enkele beschrijving
De ontwikkelaars kunnen ook een beschrijvingslijst maken die bestaat uit meerdere beschrijvingstermen met enkele beschrijvingsgegevens. Het is vooral handig wanneer meerdere termen vergelijkbaar zijn of dezelfde functionaliteit hebben. Door deze techniek te gebruiken, kunnen al deze termen in één keer worden beschreven:
< div stijl = 'marge: 20px' >< h2 > Marktaandelen voor laptops h2 >
< dl >
< dt > PK dt >
< dt > EliteBoek dt >
< dt > proBoek dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 30 % in 2018 dd >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 23 % in 2017 dd >
< dt > Lenovo dt >
< dd > In de categorie Desktopsystemen en laptops heeft een aandeel van 14 % in 2018 En 9 % in 2017 dd >
dl >
div >
In het bovenstaande codeblok wordt de beschrijvingslijst gemaakt en meerdere ' ”-tags worden gebruikt met een enkele “ ' label.
Na het einde van de compilatiefase:
De bovenstaande snapshot laat zien dat meerdere termen zijn toegewezen met enkele beschrijvingsgegevens.
Conclusie
De beschrijvingslijst wordt gemaakt met behulp van de beschrijvingslijst ' ”-tag die de container maakt voor de lijstitems en hun beschrijving. Verder is de “ ” tag geeft de itemnaam aan waarvan de beschrijving zal worden gegeven. Terwijl de ' ”-tag slaat de bijbehorende beschrijving op. Dit artikel heeft het gebruik van een beschrijvingslijst in HTML gedemonstreerd.