Definitielijsten dl dt en dd tags

uit de cursus Basiskennis HTML

Definitielijsten dl dt en dd tags
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen
Volgende video: Ongeordende lijsten ul tag

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML

perm_identity Belinda | video_library 40 video's | query_builder 2:50:32

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Wat kun je hierna?

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Belangrijke onderwerpen in deze online basiscursus zijn:

  • Leren maken van de juiste mappenstructuur voor webproducties voor elke dag
  • Semantische beteknis van HTML-tags
  • Pagina’s structureren met HTML-tags conform het W3C
  • Inzicht in de reglementen van het W3C
  • Tabellen toepassen

De laatste lijst die we willen behandelen is de definitielijst.

De definitielijst heeft net even wat meer mogelijkheden, zowel in de html en de css.

Als je het vergelijkt met de ordered list en de unordered list.

En sinds html zijn er ook meerdere toepassingen voor de definitielijsten toegestaan.

Ik ga eerst de ouderwetse vorm behandelen en daarna de huidige vorm.

Origineel was de definitielijst bedoeld om een lijst met definities te plaatsen...

en achter elke definitie de lijst met de bijbehorende verklaring.

Het eerste wat je doet is het aangeven waar de lijst begint en eindigt. En dat doe je met de tag

.

Staat voor definition list. Dus hier begint mijn definitielijst en hier eindigt mijn definitielijst

.

Daarna ga je structureren wat zijn de termen en wat zijn de bijbehorende verklaringen.

In dit voorbeeld is 'literatuur' de term en dat geef je aan met de tag

, definition term.

En aan het einde weer einde dt

. De verklaring staat er direct achter.

En dat geef je aan met het html element

, defenition declaration.

Ik spring even vooruit en ik laat het hele eindresultaat zien. voor de mensen die graag even mee willen typen?

Die kunnen dit alvast overnemen en dan gaan we zo het voorbeeld bekijken in de browser.

Ik bekijk een voorbeeld in Firefox, ik ga naar voorvertoning in Firefox.

Ik sla de wijzigingen op.

En dit is de standaard wijze waarop een browser een defenition list weergeeft.

Termen worden op een eigen regel geplaatst.

En de verklaringen worden met een inspringing eronder geplaatst.

Maar met css kun je straks de lijst, de termen en de verklaringen helemaal naar eigen inzicht gaan vormgeven.

Dit was de oorspronkelijke wijze waarop het WC voorschreef wat een definitielijst moest zijn en mocht zijn.

Nu met html zijn er veel meer mogelijkheden bijgekomen.

En dat komt omdat, in het verleden, de definitielijst door webdevelopers...

...vaker werd gebruikt voor andere doeleinden namelijk beschrijvingen van biografiën,

...wat ingewikkeldere inhoudsopgaves etcetera

En destijds was er al de behoefte om meerdere verklaringen voor één term te kunnen geven en ook een ruimere...

...invulling voor wat een term is. En ik ga even doorkijken naar het volgende voorbeeld.

En dit is een voorbeeld van wat nu dus is toegestaan.

Dit is een lijst van een drietal Nederlandse auteurs. Arnon Grunberg, Hoes en Noord.

En deze auteurs die hebben één of meerdere boeken geschreven en die wil ik vervolgens kwijt als zijnde verklaringen.

Maar het is geen verklaring, het is een lijst van boeken.

Geschreven door de auteur.

En dat is nog wel een regel voor een definitielijst. De verklaringen, dat mogen er dus nu meerdere zijn.

En ook de lengte van een verklaring hoeft niet perse kort te zijn. Mag uit meerdere paragrafen bestaan.

Maar er moet wel een duidelijke relatie zijn tussen de verklaringen behorende bij de term. En in dit geval is die er.

Want Arnon Grunberg is de schrijver van deze drie boeken onder andere.

De regels zijn verder grotendeels hetzelfde gebleven, dus ja ik geef aan...

...waar begin mijn lijst en waar eindigt mijn lijst en dat doe ik met de tag

. Hier begint deze en daar eindigt die

.

De term, die start nog steeds met

en eindigt met

.

En dan mag je vervolgens ruimere invulling geven aan

en in dit geval zelfs meerdere.

Ik spring weer even vooruit en ik laat een voorbeeld zien van het eindresultaat

Mensen die dit willen over typen die kunnen dit nu doen.

En dan pikken we het vervolgens weer op en bekijken we een voorvertoning in de browser.

Dan bekijk ik ditmaal een voorbeeld in voorvertoning Google Chrome.

Ik sla de wijzigingen op.

En feitelijk zie je geen verschil in de wijze waarop de browser dit voorvertoond, dus dat is hetzelfde gebleven.

De termen staan links lijnend op een eigen regel.

En met een inspringing volgen vervolgens de verklaringen of bijbehorende uitleggen of bijbehorende begrippen.