Direct naar de inhoud

Handboek HTML5 en CSS3HTML en CSS van <a> tot z-index

De bouw van deze site (3): de header

Door Peter Doolaard —

In deel 2 van deze serie ging het over het doel van de site, de daarvoor benodigde inhoud en de daarbij behorende structuur. Met CSS Grid Layout is de hoofdstructuur van de pagina gemaakt. Die bestaat uit de header, het gebied voor de hoofdinhoud en de footer. Deze aflevering gaat over het eerste structuurblok in de pagina: de header.

De header van deze site bevat de paginakop en de navigatie. Voor dit ontwerp is het handig als de kop en de navigatie samen in een container staan en het element <header> is daarvoor een prima kandidaat. De HTML-specificatie is er ook duidelijk over:

Het HTML-element <header> representeert inleidende hulpmiddelen of hulpmiddelen voor navigatie. Het kan kopelementen bevatten, maar ook zaken als een logo, een zoekformulier en dergelijke.

Een zoekfunctie komt nog, maar de andere elementen zijn wel te zien in de header:

<header>
    <h1><a href="/"><span>Handboek</span> HTML5 en CSS3<span>HTML en CSS van <a> tot z-index</span></a></h1>
    <nav>
        <input id="menu-toggle" type="checkbox">
        <label for="menu-toggle">menu</label>
        <ul>
            <li><a>Home</a></li>
            <li><a href="code.php">Code uit boek</a></li>
            <li><a href="errata.php">Verbeteringen</a></li>
            <li><a href="blog/index.php">Nieuws en tips</a></li>
            <li><a href="boeken.php">Meer boeken</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul>
    </nav>
</header>

Titel van de site

De paginaheader is de plek voor de naam van de site. Dat kan een logo zijn of een naam in tekst, eventueel met een slagzin, en alle denkbare variaties hierop. Op deze site staat in de header de titel in een element <h1>. Dat hoeft niet zo te zijn. Sterker nog, bekijk headers van diverse websites en u ziet dat de naam van een site ook vaak in een element <p> staat. Dat heeft te maken met de kenmerken van koppen in HTML.

Koppen hebben een hiërarchie. Kop h1 is het belangrijkst en de koppen daarna, h2 tot h6, zijn telkens een stapje minder belangrijk. Het is de bedoeling dat h1 het belangrijkste onderwerp op de pagina markeert. Bij voorkeur komt h1 dan ook maar een keer voor. Omdat op deze site het boek het hoofdonderwerp is, wordt de sitetitel gemarkeerd met <h1> (zie ook de opmerking).

Kopstructuur

Het complete verhaal over de kopstructuur is wel uitgebreider en daarin zou h1 zelfs meerdere keren op een pagina kunnen voorkomen, maar dan moeten we het gaan hebben over secties en de outline van een HTML-pagina en daar wordt dit artikel te lang en niet duidelijker van. Voor de kern van dit verhaal is het voldoende om te onthouden dat:

  • h1 het hoofdonderwerp van de pagina markeert;
  • h2 een subonderwerp van h1 markeert;
  • h3 een subonderwerp van h2 markeert;
  • enzovoort.

Op deze site gaat het vooral over het boek en kan h1 prima worden gebruikt voor de titel. De enige plek waar het kan wringen is bij nieuws en tips (blog). Nog niet zozeer op de overzichtspagina, maar op de pagina met een enkel bericht is dat bericht toch echt het hoofdonderwerp. Voorlopig laat ik dat maar en begint elk bericht met een kop h2. Overigens ziet u dezelfde structuur op de moeder der bloggen WordPress.org.

Navigatie

Het tweede deel van de header bestaat uit de sitenavigatie. Het menu bevat links naar alle hoofdonderdelen van de site. Naar goed gebruik staan de links in een element <nav>. Dit zegt de HTML-specificatie daarover:

Het element <nav> representeert een sectie in de pagina die koppelingen bevat naar andere pagina’s of andere delen van de pagina: een sectie met navigatiekoppelingen.

Niet alle links horen thuis in <nav>. Het element is bedoeld voor navigatie van de site, niet voor een lijst van gerelateerde links; die komen in een <aside>.

Er is nog een goed gebruik: de afzonderlijke navigatielinks staan in een lijst, een ongenummerde (ongeordende) <ul>-lijst om precies te zijn. Dat is ook wat een navigatiemenu is: een verzameling hyperlinks waarvan de volgorde er niet echt toe doet. (Als de volgorde wel belangrijk is, zoals in een stappenplan, wordt een genummerde/geordende <ol>-lijst gebruikt.)

Menuknop zonder JavaScript

Op het kleine scherm van een mobiel apparaat wordt het navigatiemenu meestal ingeklapt. In apps wordt dat sowieso gerealiseerd met scripting en in ‘gewone’ HTML-pagina’s kan dat ook, maar het is ook mogelijk zonder JavaScript. Deze methode werkt door het in- en uitschakelen van een onzichtbaar selectievakje (checkbox) en CSS-eigenschappen gebaseerd op de pseudoklasse :checked.

Hoe u een menuknop zonder JavaScript maakt leest u in het volgende artikel.

Tag in de slagzin

Tot slot: in de slagzin bij de naam van de site staat de tag <a>. Die is alleen niet bedoeld als koppelingstag, maar als tekst. Als een tag geen tag maar letterlijke tekst moet zijn, kunnen niet de punthaken worden gebruikt. De punthaken < en > zorgen er juist voor dat de browser de tekst <a> verwerkt als HTML-instructie.

Om een tag als tekst te tonen vervangt u de punthaken door speciale tekens: wordt de openingshaak en wordt de sluithaak. Eerst komt het teken &, dan de naam van het teken en tot slot een puntkomma. Er is een complete lijst van deze tekenentiteiten waarmee u elk teken kunt maken. Een handige is bijvoorbeeld   waarmee een vaste spatie wordt gemaakt. Die zorgt ervoor dat twee woorden altijd bij elkaar blijven.

Tags: html, css, algemeen


Reageer op dit artikel

* Vul a.u.b. alle velden in.