Tabel / div?
Nu komen we op een nogal heikel punt voor velen. Wanneer we (laten we het simpel houden) 2 kolommen op een website willen hebben, gebruiken velen daar een tabel voor. Dat is semantisch fout. Waarom? Laten we de specs er weer eens bij halen, dit keer voor het <table> element:
Quote:
The table element represents data with more than one dimension, in the form of a table.
Het table element gebruik je dus alleen wanneer je data (gegevens e.d.) hebt met meer dan 1 dimensie. (dus dat de gegevens op de een of andere manier een relatie met elkaar hebben). Is de indeling van een website data? In zekere zin wel. Maar hebben deze een relatie met elkaar, of met andere woorden, is dit meer dan 1 dimensie? Nee. Dus gebruiken we geen tabellen.
Laat ons je niet afschrikken om het table element te gebruiken, wanneer je data hebt die prima in een tabel passen, is het juist wel correct om deze te gebruiken.
Genoeg over tabellen, wat gebruiken we dan wel voor een indeling van een website? Het div element is hier het antwoord. Volgens de specs:
Quote:
The div element has no special meaning at all. It represents its children. (…)
Oftewel, je bent vrij om het altijd te gebruiken, wanneer er sprake is van inhoud. Maar bij de specs staat nog een opmerking:
Quote:
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. (…)
Oftewel, wanneer je een ander element vind dat beter bij de inhoud past, gebruik dat dan. dat vermindert het gebruik van een div element aanzienlijk: je gebruikt het vaak alleen maar om te stijlen. Je selecteert als het ware een blok met een div. div komt van division (gedeelte), dus het is eigenlijk wel passend, je neemt een gedeelte van je site.
Inmiddels heb je hopelijk ook al door waarom je een division moet gebruiken voor de indeling van een website: het vertegenwoordigt alle soorten inhoud, en er zijn geen andere elementen voor. Dat laatste is inmiddels al weer wat achterhaald, want in HTML 5 zijn er nieuwe elementen bijgekomen voor bijvoorbeeld header, footer, etc. Deze geven een veel betere semantische betekenis en daardoor zul je divisions bijna nergens tegenkomen in HTML5 code’s.
Dus hoe delen we nu de site in? Simpel, je creëert een aantal divjes na elkaar, en met CSS geef je ze de plaats die je wilt. Het is helemaal niet erg om CSS de opmaak helemaal te laten bepalen, daar is CSS immers voor. Je geeft met het divje aan dat hier een blok zit, en met CSS geef je de plaats en styling aan. Oftewel HTML structuur, CSS presentatie. Precies waar de talen voor bedoelt zijn.
Stukje code dan nog, er is nog een deel CSS opgenomen om tot de opmaak van 2 tabellen te komen. Omdat deze tutorial niet over CSS gaat, wordt dit hier ook niet uitgelegd. Een tutorial die zich focust op een site indeling met CSS vind je hier.
Code (php)
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
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
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>semantisch site indeling</title>
<style>
#content {
width : 900px;
height : 900px;
float : left;
}
#menu {
width : 200px;
height : 900px;
float : left;
}
</style>
</head>
<body>
<div id="content">
Hier een content div
</div>
<div id="menu">
Hier een menu div
</div>
</body>
</html>
<html>
<head>
<meta charset=utf-8>
<title>semantisch site indeling</title>
<style>
#content {
width : 900px;
height : 900px;
float : left;
}
#menu {
width : 200px;
height : 900px;
float : left;
}
</style>
</head>
<body>
<div id="content">
Hier een content div
</div>
<div id="menu">
Hier een menu div
</div>
</body>
</html>
« vorige pagina | volgende pagina »