Aan de slag met HTML5

We werken aan het blok nav

Het leren van HTML5 en CSS 3 valt in het begin behoorlijk tegen. Dit is een oefensjabloon voor dit proces. Voor het plaatsen van het menu in navigatie (<nav>) heb ik hierbij gebruik gemaakt, van een alinea samen met de regel-break (<br>).

We zien dat IE 8 laat staan ouder dit menu, dus deze nieuwe tag nav (<nav>) niet pakt! De paarse kleur wordt niet weergegeven. Ook gaat het geheel links staan! Verder zijn er nu 2 sub-navigaties met <div id=NavBalkT> en <div id=NavBalkB>, in de vorm van een balk boven- en onderaan. Pas in IE 11 gaat het goed! Bekijk de dynamiek van de pagina door  — met de muis —  de kanten te verschuiven. De minimale breedte wordt bepaald door “width: 200px;” en de padding:10px 5px 10px 70px; dus 200+5+70 pixels in het CSS bij <nav>.

Een oudere Louis maakt de Plankhouding uit yoga.

Bij een andere opbouw kan de navigatie <nav> eventueel in <article> of <header> staan. Deze verzameling links neemt dan de vorm aan van respectievelijk het menu in de tekst of bovenaan. Uitgezonderd bij in <article> is er altijd maar één menu, dat binnen <nav> staat. Dat is het hoofdmenu! Zo kan  — het is niet zo gebruikelijk —  <nav> in een zeer korte pagina ook in <footer> staan. Deze opbouw is niet geschikt voor een andere positie van de hier genoemde tags, wel kan de pagina dienen als sjabloon voor oefeningen en experimenten met verdere uitbouw.

Het verdelen van het menu

Nu er inmiddels wat meer pagina zijn, heeft het zin om na te denken over een verdeling van het menu in secties. We hebben daarin al een eerste stap gezet. Een dergelijke verdeling maakt het overzichtlijker. Ook hebben de varianten van de links een kleurtje gekregen. We kunnen nu  — in een eigen copie —  experimenteren met de pseudo-classes rond <a>.

Het kleurenscala van de huidige links is universeel gekozen. Dit past dus ook goed in de tekst binnen <article>. Ook in kop- en staartmenu's zijn deze kleuren passend. De aanbevolen vorm voor een menu in HTML5 is echter de lijst. Een eerdere poging liep vast op de CSS-opdracht, (list-style:none;) om de bullets doen te verbergen. Nu kan dat toch een klein foutje zijn; zo'n foutje waar een mens overheen blijft kijken!

Bij de korte voorbeeldlijst (<ul id=ArtGeenBullets> [...] </ul>) hierboven werkt het wel. We moeten dus nu kijken, of we dit  — in het menu —  toch vorm kunnen geven. Voordat we het menu aanpakken is het verstandig nog wat meer met lijsten te stoeien, zodat we de addertjes onder het gras bij HTML5 leren kennen.

Ondertussen zijn we geslaagd; de derde sectie van het menu is opgebouwd met een lijst! Er is weinig verschil in de lay-out! De verdeling in secties in de andere voorbeelden (sjablonen) geeft echter een probleem. De opdracht <ol id=GeenBullets> [...] </ol> wenst geen padding te accepteren. De oplossing met alinea's heeft dit probleem niet. We lossen dit  — een paar dagen later op —  met #MenuPart {background:#CCCCFF; margin:0 0 35px 0;}, ofwel een extra box.

Wat is de echte navigatie?

Voor de oude site Natspel.nl moesten we ons afvragen, wat is vanuit de zoekrobots gezien de echte navigatie. Of anders uitgedrukt, wat willen we, dat een plaats krijgt in de index van een zoekmachine, zoals Google. In het huidige Natspel.nl in opbouw duiden we dit met de hier besproken tag <nav>.

Ook is het belangrijk bij meerdere menu's de overbodige links voor zoekmachines, af te dekken met het attribuut rel="nofollow". Bekijk de diverse menu's op gebruik van dit stukje code. De regel is maar één doorgaande link per richting. Dus het eerder genoemde probleem met bullets is inmiddels opgelost met een extra box (<div>) en daarbij aanvullende info in het CSS. Dit relaas gaat verder in het verhaal over <div>.