De blockquote en definition list.

Bron: http://www.sceneone.nl/tekst/blockquote.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

De <blockquote> en het <dl> element zijn beiden zeer geschikt om je teksten wat mee op te vrolijken en een beetje variatie aan te brengen in wat langere stukken tekst.
Daarnaast (en eigenlijk om te beginnen) zijn het beiden elementen die met een bepaalde bedoeling in het leven geroepen zijn.

De blockquote

Bedoeld om stukken tekst te benadrukken. Je kunt een stuk tekst benadrukken door het cursief te maken, vetgedrukt of te onderstrepen. Al deze manieren gaan alleen op voor een heel kort stukje tekst: 1 á 2 woorden, hooguit een kort zinnetje. Als je een langer stuk tekst hebt wat je wilt laten uitspringen kun je daar beter de blockquote voor gebruiken:

CSS: blockquote{
border: 1px solid #000;
}
HTML: <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

bekijk het resultaat

Doordat ik een border om de blockquote heen gezet heb kun je duidelijk zien dat hij een margin aan alle kanten heeft waardoor hij inspringt en opvalt.
Je begrijpt dat je in je css allerlei opmaak van de blockquote kunt beschrijven:

CSS: blockquote{
color: #B36B00;
border: 1px dotted #B36B00;
background: #FFE6BF;
margin: 15px 75px 15px 75px;
padding: 5px;
}
HTML: <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<blockquote>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</blockquote>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

bekijk het resultaat

Het dl element

De letters dl staan voor definition list. Het dl element is dan ook een list. Oorspronkelijk gemaakt om termen op te sommen en te omschrijven.
En wel op de volgende manier:

CSS: GEEN HTML: <dl>
<dt>Eerste term</dt>
<dd>Omschrijving van de eerste term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
<dt>Tweede term</dt>
<dd>Omschrijving van de tweede term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
<dt>Derde term</dt>
<dd>Omschrijving van de derde term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
</dl>

bekijk het resultaat

Je ziet dat de definition list al een aantal eigenschappen van zichzelf heeft. Ik heb in mijn css geen enkele opmaak voor de <dl> beschreven en toch gebeurd er van alles. Als je precies wilt uitzoeken wat nou eigenlijk de natuurlijke eigenschappen van de <dl> zijn kun je dat op dezelfde manier doen als ik met de unordered list gedaan heb in het onderdeel over de list.

Omdat de <dl> in feite bestaat uit 3 elementen: de parent <dl> en de twee children <dt> en <dd> zijn er heel wat mogelijkheden om via je css de definition list van een aardige opmaak te voorzien. Je kunt immers al die elementen direct vanuit je css aanspreken:

CSS: dl{
margin: 15px;
padding: 10px;
border: 2px solid #12127D;
background: #C8C8FF;
}

dt{
font-weight: bold;
color: #12127D;
padding: 0 0 0 10px;
}

dd{
color: #1919B3;
padding: 0 0 20px 25px;
background: url(../_img/uitroepteken.gif) no-repeat 0 0;
}
HTML: <dl>
<dt>Eerste term</dt>
<dd>Omschrijving van de eerste term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
<dt>Tweede term</dt>
<dd>Omschrijving van de tweede term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
<dt>Derde term</dt>
<dd>Omschrijving van de derde term Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</dd>
</dl>

bekijk het resultaat

Zoals je ziet kun je met eenvoudige middelen een aardig visueel effect voor elkaar krijgen. En het mooie is dat je er in je markup niets meer voor nodig hebt dan een html element.
je hebt geen tabel nodig om de boel te structureren. Geen aparte <td> voor je plaatje en een aparte <td> voor je tekst. Sterker nog, het plaatje zit helemaal niet in je markup, maar in je css.
Ziedaar de kracht van css en de flexibiliteit van html elementen. Als je maar begrijpt hoe ze in elkaar steken en wat je er allemaal mee kunt.

naar het begin van de pagina