Een Menu

Laten we beginnen met een menu. Vrijwel iedere website heeft een menu, om je op een duidelijke manier te laten navigeren. Velen zullen hierbij alle links onder elkaar zetten met achter elke link een <br> tag. Maar semantisch is dit niet juist.

Een menu is 1 blok die bestaat uit meerdere menu-items. De semantische betekenis die hier het dichtst bij komt is die van een lijst. Een menu moet eigenlijk gezien worden als een lijst van menu items.

Dan gaan we weer terug naar HTML. Hierin heb je ook een element die als semantische betekenis een lijst heeft. Namelijk de ul (unordered) en ol (ordered) elementen.
Kijken we in de HTML5specs, zien we bij de ul tag staan:

Quote:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

Precies wat we wilden. het menu is feitelijk een lijst met inhoud, waarbij de volgorde niet uitmaakt, zelfs niet bij verandering (dat het een vreemdere indeling wordt is een ander verhaal). Dus het wordt het ul ipv het ol element, want de volgorde maakt niet uit.

De menu items worden gezien als list items en dus komen we terecht bij li (list items). Kijken we weer in de HTML5specs:

Quote:

The li element represents a list item. If its parent element is an ol, ul, or menu element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Voordat we gaan kijken of we het li element moeten gebruiken, eerst even wat parent betekent, want dat is vrij belangrijk in HTML, CSS en JavaScript. De sitestructuur (of DOM) speelt hierbij een zeer grote rol

Parent: een parent is de eeh.. ouder. In HTML wordt vaak genest, een element in een ander element plaatsen. Zoals het body element in het html element staat. En enige verdere content weer in het body element. De ouder (of parent) van de content elementen zijn dan het body element en de ouder van het body element zelf is het html element. (het html element is dan weer de voorouder (ancestor) van de content elementen)

Terug naar het menu. Een aparte link is inderdaad een onderdeel van de totale lijst (het menu was een lijst, hadden we al gezien). We hebben dus een li element nodig. Bijkomend, deze li wordt dan genest in het ul element, wat resulteert in een relatie met andere li elementen. Mooi, want ze hebben ook een relatie, het zijn allemaal items van hetzelfde menu.

Kort samengevat: Een menu bouw je dus op de juiste HTML manier met een unordered list op, met daarin li elementen, waarin de links staan.

Dan de uiteindelijke code:

Code (php)