Semantiek, wat heb ik er aan?

Info 
Door: Blizt Moeilijkheidsgraad: 2/3
Views:25.471Reacties: 11(Bekijken)
  Log in om zelf te reageren
 Waardering:9.1/10 (11 stemmen)



Inleiding


Op het websitemaken.be forum is de volgende vraag al menig keer gesteld:Quote:

Moet ik divs gebruiken of tabellen?



In dit artikel ga ik probeer uit te leggen, dat deze vraag eigenlijk niet te beantwoorden is en wat semantiek dan wel is.

Dit artikel is dus voor jou, als je:
  • Niet weet wat semantiek is
  • Divs gebruikt voor je layout
  • Tabellen gebruikt voor je layout
  • Door iemand naar dit artikel gestuurd bent
  • Snellere pagina's wilt
  • Betere ranking/plaats in zoekmachines


Wat is semantiek?


Eerst moeten we eens onderzoeken wat semantiek is. De Van Dale geeft deze definitie:

se·man·tiek (de ~ (v.))
Quote:

leer van de betekenis van de woorden en woordgroepen => betekenisleer
[fil.] leer van de interpretatie van formele systemen



Nu klinkt dat nogal "zwaar", dus laten we eens kijken wat het betekent voor ons HTML-kloppertjes. Het komt er in principe op neer dat je het juiste element (<div />, <p />, <table /> etc. etc.) voor het juiste doeleinde gebruikt. Het principe hierachter is heel simpel: als je een paragraaf wilt, dan gebruik je <p /> en voor een lang citaat <blockquote />.

Toch doen weinig mensen dit meer echt goed, maar waarom? Om dat te kunnen snappen moeten we meer weten over de geschiedenis van HTML.

De geschiedenis van HTML


Er was eens ... een man die Tim Berners-Lee heette en op een dag HTML ontwikkelde.

Ok, het duurde iets langer. Tim was bezig met SGML (Standardized General Markup Language) (iets wat net even te ingewikkeld is om in dit artikel op in te gaan) en ontwikkelde toen de subset HTML. Het was nog lang niet zoals we het nu (een goede 15 jaar later) kennen, maar het was er. Het was niet bedoeld om mooie websites te maken, maar om te zorgen dat het complexe SGML simpeler in gebruik werd en de wetenschappers die er mee moesten werken zich zo konden concentreren op inhoud.

Hier hebben we het eigenlijk al te pakken: HTML is bedoeld om inhoud te omschrijven, niet om met flashy kleuren iets moois te maken. Echter, we gaan verder de tijd in. Het is 1995 en het internet wordt niet meer alleen gebruikt om wat documentjes uit te wisselen, maar ieder bedrijf wil een eigen website hebben. En dat moet natuurlijk helemaal in de huisstijl van het bedrijf, maar dat ondersteunde HTML dus niet. Tim en Dan Connolly ontwikkelde samen HTML 2.0, wat al een paar kleine dingetjes meebracht die ik niet zo geweldig vind, maar ach. HTML 2.0 was op zich nog best goed.

Een jaar later, in 1996 werd de grootste fout ooit gemaakt: de ontwikkeling van HTML 3.2. We kregen elementen als <STRIKE /> en <SMALL />, maar het ergste: <font />. Hiermee kon je in de HTML aangeven welke kleur, grootte, lettertype etc. een stukje tekst had; HTML voor de layout dus. Iets waar het niet voor ontwikkeld was.

Ook kregen we tabellen, die vervolgens geheel verkeerd toegepast zouden gaan worden. Een bekend voorbeeld is onderstaande layout:
http://www.websitemaken.be/item_pics/130.png

De bekende "3-koloms-layout", we zien 'm nu nog steeds veel. Wat je deed om zo'n layout te creeëren, was het volgende:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table width="100%">
    <tr>
        <td colspan="3" align="center">1</td>

    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>

        <td colspan="3" align="center">5</td>
    </tr>
</table>


Je hebt dan een tabel met 3 rijen, 1 kolom in de bovenste rij, 3 in de 2e rij en nog 1 kolom in de onderste rij.

Waarom niet?


Dit werkt, is simpel en "iedereen" snapt het. Waarom zouden we hier dan van afstappen? En wat is het alternatief?

De problemen


Het probleem hierbij is, dat de HTML de inhoud niet meer beschrijft, je hebt hier namelijk helemaal niet te maken met tabulaire data, zoals bijvoorbeeld bij een kalender. Bovendien werden deze tabellen vaak genest, genest, genest en dan nog eens genest. Hierdoor onstaan er 2 problemen:

  • Een kleine wijziging (bijvoorbeeld het weghalen van een rij) kan de hele website opbreken. Ik heb dit al menig keer meegemaakt, als ik met dergelijke code moest werken.
  • Pagina's worden onnodig groot. Door de vele code die nodig was, werden pagina's veel groter dan nodig zou moeten zijn. Dit had ook weer 3 nadelen:
  • [list]
  • Om te beginnen een heel simpele: ruimte. Als we bijvoorbeeld kijken naar de pakketten van Nucleus zien we dat je voor 25mb ruimte �60 per jaar betaalt en voor het dubbele (50mb) ook de dubbele prijs: �120 per jaar. Dat is dus �60 per jaar!
  • Ook krijgen we meer bandwidth bij het duurdere pakket van Nucleus. Dit hebben we wel nodig ook, want omdat al onze pagina's veel groter zijn verbruiken we meer bandwidth. Zoals we kunnen lezen in Throwing Tables Out the Window kunnen we 924 GB aan bandbreedte per dag (dat is 329 terabytes per jaar!) kunnen besparen door juist gebruik te maken van HTML en CSS. Reken maar uit ;-).
  • Ten slotte de snelheid. Een pagina van 2KB is nu éénmaal sneller binnen dan één van 40KB.

[/list]

Eigenlijk zijn er 5 problemen dus. Maar dan moet er toch een alternatief zijn?

Het alternatief


Het alternatief is eigenlijk simpel: back to the basics. Terug naar hoe het allemaal begon, de elementen gebruiken om de content te omschrijven. Maar ik hoor je al denken: ik wil niet zo'n lelijke <h1 /> als kop, ik neem wel een <div /> die ik dan class="header" meegeef en style met CSS. Op zo'n moment krijg je sites als dit:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Crystal Labs - Kristalhelder webdesign</title>

<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

<div class="container">

<p id="skip"><a href="#maincontent" title="Skip the header and navigation and go directly to the content">Skip to content</a>
<div class="header">

    <div class="title">Crystal Labs</div>
    <a href="/"><img src="/img/header_ar.jpg" alt="Crystal Labs"></a>
    <div class="navigation">

        <a href="/">Home</a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
        <a href="/diensten">Diensten</a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
        <a href="/profiel">Profiel</a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
        <a href="/portfolio">Portfolio</a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
        <a href="/contact">Contact</a>&amp;nbsp;&amp;nbsp;&amp;nbsp;
    </div>

</div>

<div id="maincontent">
    <div class="subtitel">Kristalhelder webdesign</div>
    Crystal Labs is een webdevelopmentbedrijf opgericht in 2005. Voornamelijk gericht op het MKB verzorgen wij een complete website voor uw bedrijf.<br>
    U kunt gebruiken maken van <a href="producten#cms">ons CMS</a> om de inhoud van uw website te beheren. In combinatie met een <em>uniek design</em> en een <a href="diensten#hosting">plaats op het internet</a> (zogenoemde <a href="termen/hosting">hosting</a>) met bijbehorende <a href="termen/domeinnaam">domeinnaam</a>, zoals bijvoorbeeld uwbedrijf.nl.<br>

    Maar wat dacht u van een <a href="producten#weblog">eigen weblogsysteem</a>? Een erg goede manier om wat meer van uw bedrijf te laten zien. Veel grote bedrijven (onder andere <a href="http://google.com/googleblog/">Google</a>, <a href="http://blogs.msdn.com/default.aspx">Microsoft</a> en de <a href="http://education.apple.com/students/blog/">studentenweblog van Apple</a>) zijn u al voorgegaan.<br>    
    De mogelijkheden zijn legio, dus kijk snel <a href="/diensten">wat wij voor u kunnen betekenen</a>.


</div>

<div id="extra">
    <form id="search-form" action="/zoeken" method="get">    
        <div class="formset">

            <div class="formkop">Zoekmachine</div>
            
            Trefwoord:
            <input type="text" name="keyword">
            
            <input type="submit" value="Zoek">        
        </div>        
    </form>

    
    <div id="lastnews">
        <div class="subkop">Nieuws</div>
        <a href="#">Nieuwsitem 1</a><br>

        <a href="#">Nieuwsitem 2</a><br>
        <a href="#">Nieuwsitem 3</a><br>            
    </div>

    <div id="lastproject">
        <div class="subkop">Laatste project: BackupDB</div>
        Met deze tool is het mogelijk om backups te maken van (meerdere) databases.<br>
        <a href="#">Lees meer over dit project...</a>

    </div>
            
    </div>

    <div id="footer">
        ©2005 Crystal Labs. Alle rechten voorbehouden.<br>
        Parsetime: 0.02237 seconden<p>Deze site draait op <a href="http://crystal-labs.nl">CrystalCMS</a>

    </div>
</div>


Velen zullen blij kijken bij het zien van deze code, want dit is toch wat we al heel de tijd proberen? Nou nee, dat is het niet. DIV is kort voor division, een sectie, een gedeelte. Het is bedoelt om verschillende elementen te groeperen. Dit betekent dus niet dat je geen divs moet gebruiken, in de originele broncode van mijn bedrijf staan ze ook, zie hieronder:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!--- Quirksmode IE! Quirksmode! You know you want it! -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>Crystal Labs - Kristalhelder webdesign</title>

<div id="maincontent">
    <h2>Kristalhelder webdesign</h2>
    <p>Crystal Labs is een webdevelopmentbedrijf opgericht in 2005. Voornamelijk gericht op het <abbr title="Midden- en kleinbedrijf">MKB</abbr> verzorgen wij een complete website voor uw bedrijf.
    <p>U kunt gebruiken maken van <a href="producten#cms">ons <abbr title="Content Managing System">CMS</abbr></a> om de inhoud van uw website te beheren. In combinatie met een <em>uniek design</em> en een <a href="diensten#hosting">plaats op het internet</a> (zogenoemde <a href="termen/hosting">hosting</a>) met bijbehorende <a href="termen/domeinnaam">domeinnaam</a>, zoals bijvoorbeeld uwbedrijf.nl.
    <p>Maar wat dacht u van een <a href="producten#weblog">eigen weblogsysteem</a>? Een erg goede manier om wat meer van uw bedrijf te laten zien. Veel grote bedrijven (onder andere <a href="http://google.com/googleblog/">Google</a>, <a href="http://blogs.msdn.com/default.aspx">Microsoft</a> en de <a href="http://education.apple.com/students/blog/">studentenweblog van Apple</a>) zijn u al voorgegaan.
    
    <p>De mogelijkheden zijn legio, dus kijk snel <a href="/diensten">wat wij voor u kunnen betekenen</a>.




</div>
<!--- maincontent -->

<div id="extra">
    <form id="search-form" action="/zoeken" method="get">

        <fieldset>
            <legend>Zoekmachine</legend>
            
            <label for="keyword">Trefwoord:</label>
            <input type="text" id="keyword" name="keyword">

            
            <input type="submit" id="search-submit" value="Zoek">        
        </fieldset>        
    </form>

    
    <div id="lastnews">

        <h2>Nieuws</h2>
        <ol>
            <li><a href="#">Nieuwsitem 1</a>

            <li><a href="#">Nieuwsitem 2</a>

            <li><a href="#">Nieuwsitem 3</a>
        </ol>    
    </div>

    <!--- div#lastnews -->
        
    <div id="lastproject">

        <h2>Laatste project: BackupDB</h2>

        <p>Met deze tool is het mogelijk om backups te maken van (meerdere) databases.
        <p><a href="#">Lees meer over dit project...</a>
    </div>

    <!--- div#lastproject -->
        
    </div>

<!--- div#extra -->

<div id="footer">
    <p>©2005 Crystal Labs. Alle rechten voorbehouden.
    <p>Parsetime: 0.02237 seconden
    <p>Deze site draait op <a href="http://crystal-labs.nl">CrystalCMS</a></div>

</div><!--- div#container -->


Moet toegeven dat die code ook nog niet optimaal is, maar dat komt binnenkort goed. Nu, kijk eens naar de website van http://www.crystal-labs.nl, ziet de <h2 /> er uit als een 'gewone' <h2 />?

Inderdaad niet. Dit komt door het gebruik van CSS. Met CSS kun je namelijk elk element stylen, niet alleen divs.

Zo kun je voor je navigatie een lijst gebruiken (en kijk nog maar eens, dat horizontale menu zonder rare bolletjes is echt een lijst!), omdat het eigenlijk een lijst met links is. Op deze manier werkt alles ook goed in speech browsers, textbrowsers en als we IE (Internet Explorer) even in quirksmode zetten, ook nog eens crossbrowser.

Semantiek in CSS


Ik zie het je denken: nog meer? Jup, ik was nog niet klaar. :) Hoewel velen dachten met CSS het spreekwoordelijke ei van Columbus hadden gevonden, blijkt dit toch nog tegen te vallen. Wat veel mensen namelijk niet weten, is dat classes en id's in HTML bedoeld zijn om de inhoud te beschrijven, niet om er styles aan te hangen!


Wat je veel ziet is dit:

#Code
1
2
3
4
5
6
7
8
div.linksbovenblauwarial
{
    float:left;
    position:absolute;
    top:0;
    color:blue;
    font-family:arial;
}


Ziet er prima uit op het eerste gezicht, het is toch geldige CSS? Dat is inderdaad waar, maar wat nu als je besluit dat het rechtsonder komt, in rode tekst met lettertype Verdana? Dan klopt de naam van de class niet meer.

Bovendien beschrijf je op deze manier nog steeds niet de inhoud, maar layout. Eerder hadden we afgesproken dat dit niet de bedoeling was, omdat HTML bedoelt is om inhoud te beschrijven. Denk dus na waarom het je linksboven wilt, in het blauw en met lettertype arial. Misschien omdat het een box is met wat extra informatie? Laten we daar eens vanuit gaan. Dan zou heter beter zijn om <div class="extra-informatie"> te gebruiken. Je kunt hier nog steeds dezelfde CSS op toepassen, maar het beschrijft de inhoud beter.

11 reacties
stevenca Geplaatst op 22-06-2009 om 14:50
 

Regular
Heldere (en zeldzame) uitleg aangaande semantiek. Bedankt Blizt...
gloomy Geplaatst op 17-02-2007 om 18:27
 

Regular
effe een kort vraagje :P
ik ben besig met men eigen website en had al een tijdje in me achterhoofd om met divs te gaan werken... alleen had ik 1 probleem.

ik maak mijn websites altijd door een template in photoshop te maken en die daar in delen te knippen. dan op te slaan als web-image. dan krijg je automatisch een website layout in tabellen vorm ( bespaart een hoop tijd) maar als ik emt divs wil werken, kan ik dan meer dan 6 divs naast elkaar plaatsen en dat dan zonder de absolute tag te gebruiken ( zodat alles aangepast word aan de resolutie van eht scherm van de bezoeker. zoja. hoedan? want als ik dit lees lijkt het net of 3 maximaal is doordat er 1 float right heeft , 1 float left en 1 geen float waardoor die in het midden komt.
omarjuul Geplaatst op 15-01-2007 om 15:56
 

Regular
Je moet idd je inhoud scheiden van de de lay-out. Ook de structuur kun je het beste scheiden van de inhoud en lay-out. Dan hou je het overzichtelijker.

Een extra voordeel van css is dat je door het weghalen ervan ook gelijk kunt zien of de inhoud er zonder lay-out ook nog zo uitziet als het moet.

Absoluut (of relatief) positioneren is niet nodig. Je kunt ook met de functie 'float' werken. http://www.sceneone.nl/tips_tricks/3_kolommen_layout.php
hier heb ik geleerd hoe ik css moet gebruiken. Ik heb de link maar even gelijk naar zo'n typisch header-3kolommen-footer-layout uitleg gemaakt, daar gaat het er hier om dacht ik.

Ik werkte eerst met frames en toen begopn ik met css...
Het is even wennen, dat wel, maar nu ben ik er aan gewend en ben ik blij dat ik het 'goed' doe.
Waarschijnlijk ga ik nu dus over op PHP, dat scheelt toch weer wat werk als ik er een pagina bij stop.
Jaspertje Geplaatst op 29-08-2006 om 12:10
 

Regular
Ik geloof dat ik niet helemaal inzie waar het nou om gaat. Ik mag dus geen css of html gebruiken om een layout te vormen? Waarmee dan? Of moet ik layout en inhoud gescheiden houden? Dan krijg je dus nested "inhoud-divs" in "layout-divs". Dat lijkt me ook nogal omslachtig. En alternatieven voor tabellen? Ik neem toch aan dat je niet voor iedere div appart de locatie hoeft te bepalen? Als je relatieve waarden gebruikt word dat helemaal gekkenwerk. Wat begrijp ik niet goed...
Onbekend lid Geplaatst op 02-05-2006 om 21:51
 

Spammer
@ peett: met css kom je een heel eind :). lees zeker de basiscursus op de website...

en om je al op weg te helpen:

#Code
1
<div style="background-image: url("image.jpg");">tekst hier</div>

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder