HTML semantics: Definitie lijst

March 15th, 2013 | 5 min read | HTML5, Web, Web semantics

In mijn vorige tutorial heb ik jullie uitgelegd wat de voor- en nadelen zijn van HTML semantics door ze uit te leggen aan de hand van een voorbeeld rond forms. In die tutorial heb ik ook aangehaald dat één van de nadelen van semantics is dat je soms uren tijd kan spenderen om het juiste HTML element te vinden terwijl je in die tijd een werkende oplossing zou kunnen opleveren.

Het doel van deze reeks tutorials rond HTML semantics is om dat probleem op te lossen, door te documenteren wat je als HTML element kan kiezen zodat je geen uren meer moet zoeken, maar gewoon mijn tutorials moet lezen ;). HTML semantics kunnen namelijk heel handig zijn, je gaat toch ook geen websites meer designen met tables om de structuur van de pagina te bepalen?

Definitie lijst

Het komt vaak voor dat je een data beschrijving hebt waarbij je enerzijds een term hebt en anderzijds de definitie of de beschrijving van deze term. Een goed voorbeeld hiervan is een woordenboek waarbij je enerzijds het woord hebt en anderzijds de betekenis ervan.

Je kan heel veel oplossen door gewoon

<span>

tags te gebruiken, maar daardoor verlies je eigenlijk de context waarin dit situeert. Je kan met een eenvoudige

<span>

namelijk niet zeggen van, “ik hoor eigenlijk bij dat woord”. De oplossing hiervoor is her gebruik van definitie lijsten.

Het voorbeeld

In dit voorbeeld ga ik de stijl van een woordenboek nabootsen. Stel dat we het woord “programmeren” in de Vandale zouden opzoeken dan zou je het volgende kunnen tegen komen:

  • (computer) programma’s maken
  • (radio, tv) een planning maken van de uit te zenden programma’s

Uiteraard kunnen we dit ook zeer eenvoudig in HTML omzetten, bijvoorbeeld:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>definition-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>pro&middot;gram&middot;me&middot;ren</h1> (werkwoord; programmeerde, heeft geprogrammeerd)
        <ol>
            <li>(computer) programma's maken</li>
            <li>(radio, tv) een planning maken van de uit te zenden programma's</li>
        </ol>
    </body>
</html>

Alhouwel dat dit zeker geen slechte start is, kan je bepaalde zaken wel duidelijker maken. Het bijschrift “(werkwoord; programmeerde, heeft geprogrammeerd)” staat bijvoorbeeld in geen enkele context, en “(computer)” en “programma’s maken” staat ook gewoon samen, terwijl deze twee zaken eigenlijk een apart doel hebben.

Definitie lijsten

Een definitie-lijst heeft de volgende syntax:

<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

Een definitie-lijst kan je gebruiken indien je in een context zit waarbij je enerzijs een term (

<dt>

) en anderzijds een beschrijving (

<dd>

) hebt. Voor ons voorbeeld geeft dat:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>definition-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <dl>
            <dt><h1>pro&middot;gram&middot;me&middot;ren</h1> (werkwoord; programmeerde, heeft geprogrammeerd)</dt>
            <dd>
                <ol>
                    <li>(computer) programma's maken</li>
                    <li>(radio, tv) een planning maken van de uit te zenden programma's</li>
                </ol>
            </dd>
        </dl>
    </body>
</html>

Uiteraard kan je dat nog verder gaan opsplitsen, zo kan je ook nog redeneren dat eigenlijk “(computer)” opnieuw een term (eigenlijk een sub-term) is en “programma’s maken” een beschrijving is. Je krijgt dan:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>definition-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <dl>
            <dt><h1>pro&middot;gram&middot;me&middot;ren</h1> (werkwoord; programmeerde, heeft geprogrammeerd)</dt>
            <dd>
                <ol>
                    <li>
                        <dl>
                            <dt>(computer)</dt>
                            <dd>programma's maken</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>(radio, tv)</dt>
                            <dd>een planning maken van de uit te zenden programma's</dd>
                        </dl>
                    </li>
                </ol>
            </dd>
        </dl>
    </body>
</html>

Hiermee overschrijden we misschien de lijn van wat nuttig is of niet, maar in het volgend hoofdstuk waarbij ik de HTML ga stylen zal het duidelijk worden waarom ik gekozen heb om de definitie-lijst nog iets verder op te splitsen.

Styling

Je kan in HTML heel vaak overdrijven, een voordeel van (lichtjes) te overdrijven is echter wel dat je op eenvoudige manier bepaalde zaken kan stylen zonder daarmee onrechtstreeks andere zaken mee te stylen. Een voorbeeld om deze definitie-lijst te stylen is:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>definition-semantics-example</title>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <style type="text/css">
            dl, dl dd ol li dl dt, dl dd ol li dl dd, dl dt small {
                font-size: 15px;
            }

            dl dt h1, dl dd ol li {
                color: #046380;
                font-style: normal;
                font-size: 22px;
            }

            dl dt h1 {
                display: inline;
            }

            dl small, dl dd ol li dl dt, dl dt {
                font-style: italic;
                color: #777;
            }

            dl dd ol li dl * {
                display: inline;
                margin-left: 0;
            }

            dl dd ol li dd {
                color: #555;
            }
        </style>
        <dl>
            <dt><h1>pro&middot;gram&middot;me&middot;ren</h1> (werkwoord; programmeerde, heeft geprogrammeerd)</dt>
            <dd>
                <ol>
                    <li>
                        <dl>
                            <dt>(computer)</dt>
                            <dd>programma's maken</dd>
                        </dl>
                    </li>
                    <li>
                        <dl>
                            <dt>(radio, tv)</dt>
                            <dd>een planning maken van de uit te zenden programma's</dd>
                        </dl>
                    </li>
                </ol>
            </dd>
        </dl>
    </body>
</html>

Zoals je kan zien komt het hier wel van pas om de verdere opsplitsing te maken in sub-definitie lijsten. Het resultaat ziet er nu uit als in onderstaande afbeelding.

final-result

Daarmee is ook deze tweede tutorial rond HTML semantics afgelopen. De broncode en de demo kan je hieronder bekijken.

Download project

Download – definition-semantics-example.tar.gz (11 kB)

Demo

Back to tutorialsContact me on TwitterDiscuss on Twitter

Profile picture

Dimitri "g00glen00b" Mestdagh is a consultant at Cronos and tech lead at Aquafin. Usually you can find him trying out new libraries and technologies. Loves both Java and JavaScript.