H1 - HTML Layout

01 - De verplichte HTML-structuur

Elke HTML-pagina begint met een vaste basisstructuur.
De belangrijkste onderdelen zijn <html>, <head> en <body>.
Elke website heeft deze drie onderdelen en omdat ze tussen < en > karakters staan, noemen we het een tag.
Doorgaans is er een open- en sluit-tag. De sluit-tag wordt gekenmerkt door de extra /.
Een set van tags vormt een container waar je iets in kunt zetten.

<html>
    <head>
        <title>Het is feest</title>
    </head>
    <body>
        Een website over feest.
    </body>
</html>

Een tag is een HTML-codewoord en is niet zichtbaar op de website.
In de <html>-container komt alle code van de website. Het is de buitenste container.
In de <head>-container zet je informatie over de pagina, zoals de titel.
In de <body>-container zet je alles wat de bezoeker echt op het scherm ziet.
Als je deze structuur hebt, voeg je alleen nog regels code toe in de <head> of in de <body>.

Actie

Maak nu zelf een HTML-bestand - in je editor - met deze structuur.
Sla het bestand op met de naam index.html.
Laat het bestand open in je editor, maar open het ook in je browser en bekijk het resultaat.
Verander nu iets aan de tekst in de <body> en sla het op.
Gebruik de refreshknop in de browser om het bijgewerkte resultaat te zien.

02 - h1, p en title

De <h1> is de belangrijkste kop op de pagina.
Het staat voor "header" en is de titel van de pagina.
Meestal gebruik je een <h1> maar één keer per pagina.
De <p> staat voor paragraaf. Dus voor een gewone alinea met tekst.
De <title> staat in de <head>.
Wat in de <head> staat, zie je niet op de pagina.
De <title> zie je bovenin misschien wel in het browser-tabblad.

<head>
    <title>Het is feest</title>
</head>
<body>
    <h1>Een website over feestdagen</h1>
    <p>Ben je ook toe aan een feestdag? Verplicht vrij of is dat niks voor jou?</p>
</body>

Actie

Pas je website aan en voeg een <h1> en <p> toe.

03 - strong en em gebruiken

Met <strong> geef je aan dat tekst extra belangrijk is.
Met <em> leg je nadruk op een woord of een stuk tekst.
Je mag ze samen gebruiken, maar dan moeten ze netjes als containers in elkaar staan.

Goed voorbeeld:

<p>Kerstmis is een <strong>echt feest</strong>.</p>
<p>Maar <em>eet niet te veel</em>, dat is niet goed.</p>
<p>Hoe vier jij <strong><em>Oud en Nieuw</em></strong>?</p>

Fout voorbeeld:

<p>Kerst is <strong><em>samen zijn</strong></em>.</p>

In het foute voorbeeld worden de tags in de verkeerde volgorde gesloten.
Wat je opent, moet je ook in omgekeerde volgorde weer sluiten.

Actie

Pas je eigen pagina aan en maak ergens een woord <strong>.
Maak op een andere plek ook een woord <em>.
Probeer daarna ook een voorbeeld waarbij je <strong> en <em> samen gebruikt.

04 - Waarvoor zijn h2 tot en met h6?

De <h1> is de hoofdkop van de pagina.
De <h2> is een subkop onder de <h1>.
De <h3> is weer een subkop onder de <h2>.
Zo kun je doorgaan tot en met <h6>.
Hoe lager het getal, hoe belangrijker de kop meestal is.
Een <h1> of <h2> is dus belangrijker dan een <h5> of <h6>.
Een <h6> is het laagste niveau en wordt meestal gezien als de minst belangrijke kop in de structuur.
Je kunt dit zien als subparagrafen of hoofdstukniveaus, bijvoorbeeld: H1, H1.1, H1.4.6 of H1.6.4.3.

<h1>Feestdagen</h1>
    <h2>Winterfeestdagen</h2>
        <h3>Kerstmis</h3>
        <h3>Oud en Nieuw</h3>
    <h2>Lentefeestdagen</h2>
        <h3>Pasen</h3>
            <h4>Paastradities</h4>

Actie

Voeg onder je <h1> minstens twee <h2>-subkoppen toe.
Zet onder een van die <h2>-koppen ook een <h3>.
Kijk of je de structuur van je pagina nu duidelijker vindt.

05 - Content in containers zetten

Een HTML-pagina bestaat vaak uit stukken inhoud. Je kunt die stukken zien als doosjes. In zo'n doosje zet je bijvoorbeeld een kop, een alinea, een afbeelding of later een link.

Een container heeft meestal een openingstag en een sluit-tag.
Alles wat tussen die twee tags staat, zit in die container.
Containers helpen om je pagina logisch op te bouwen.
Een container mag ook weer andere containers bevatten.

<section>
    <h2>Winterfeestdagen</h2>
    <p>In de winter vieren veel mensen Kerstmis en Oud en Nieuw.</p>
</section>

Belangrijk: een container moet volledig binnen een andere container staan. Je mag containers dus niet door elkaar heen openen en sluiten.

Goed genest:

<section>
    <article>
        <h2>Kerstmis</h2>
        <p>Kerstmis is een bekend winterfeest.</p>
    </article>
</section>

Fout genest:

<section>
    <article>
        <h2>Kerstmis</h2>
    </section>
</article>

In het foute voorbeeld wordt <section> gesloten terwijl <article> nog open staat. Dat is alsof je een doos dichtmaakt terwijl er nog een kleinere doos half uitsteekt.

Semantische HTML5-tags

HTML5 heeft tags waarmee je niet alleen een doosje maakt, maar ook vertelt wat voor soort inhoud erin zit. Dat noemen we semantische tags. Semantisch betekent: de tag heeft betekenis.

<header>: bovenkant of introductie van een pagina of onderdeel.
<nav>: navigatie, meestal een menu met links.
<main>: de hoofdinhoud van de pagina.
<section>: een duidelijk onderdeel of hoofdstuk op een pagina.
<article>: een zelfstandig stuk inhoud, zoals een nieuwsbericht of kaart.
<aside>: aanvullende inhoud naast de hoofdinhoud.
<footer>: onderkant van een pagina of onderdeel.

<header>
    <h1>Feestdagen</h1>
</header>

<nav>
    <a href="index.html">Home</a>
    <a href="contact.html">Contact</a>
</nav>

<main>
    <section>
        <h2>Winterfeestdagen</h2>
        <article>
            <h3>Kerstmis</h3>
            <p>Kerstmis is een feest in december.</p>
        </article>
    </section>
</main>

<footer>
    <p>Gemaakt door Mike.</p>
</footer>

De browser laat deze tags vaak gewoon als blokken zien.
De winst zit vooral in de duidelijke structuur van je HTML.
Later kun je deze containers ook met CSS vormgeven.
Gebruik een tag die past bij de inhoud. Gebruik dus <nav> voor navigatie en <main> voor de hoofdinhoud.

Actie

Zet je zichtbare inhoud in een <main>-container.
Maak daarbinnen minstens één <section>.
Zet in die <section> een kop en een alinea.
Controleer of alle containers in de juiste volgorde worden gesloten.

06 - Meta description en meta keywords

In de <head> kun je meta-tags plaatsen.
De meta description geeft een korte beschrijving van de pagina.
Die beschrijving kan bijvoorbeeld in zoekresultaten zichtbaar worden.
De meta keywords-tag werd vroeger gebruikt om zoekwoorden op te geven.
Tegenwoordig gebruiken zoekmachines die tag bijna niet meer, maar technisch kom je hem nog wel tegen.

<meta name="description" content="Ontdek leuke en verrassende feiten over feestdagen.">
<meta name="keywords" content="feestdagen, kerst, pasen, oud en nieuw">

Actie

Voeg in de <head> van je eigen pagina een meta description toe.
Schrijf daarin in één zin waar jouw pagina over gaat.
Houd de description kort en duidelijk, en maak hem niet langer dan 150 karakters.
Voeg daarna ook een meta keywords-tag toe met een paar passende zoekwoorden.

07 - Controleren met de W3C Validator

Actie

Controleer je code bij W3C.

Gebruik daarvoor deze link: W3C Markup Validator.
Daarmee zie je of je code voldoet aan de HTML-standaard.
Als je je pagina op dit punt controleert, krijg je nu nog drie fouten:

Er ontbreekt een doctype
Er ontbreekt een UTF-8-instelling
Het lang-attribuut ontbreekt in de <html>-tag

Die controle is nuttig, omdat fouten in de basisstructuur later vaak voor vreemde problemen zorgen.
Door bovenaan de pagina <!doctype html> te zetten, los je de eerste fout op. Hiermee geef je aan dat het document een HTML5-document is.
Door in de <head> een meta charset-regel toe te voegen, los je de tweede fout op. Daarmee geef je aan welke tekencodering de pagina gebruikt.
Door lang="nl" toe te voegen aan de <html>-tag, los je de derde fout op. Daarmee geef je aan dat dit een Nederlandstalige website is.

Actie

Valideer je code opnieuw zodat de basis van je HTML goed is.

Zo kan het eindresultaat eruit zien:

<!doctype html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Ontdek leuke en verrassende feiten over feestdagen.">
    <meta name="keywords" content="feestdagen, kerst, pasen, oud en nieuw">
    <title>Feest website</title>
</head>
<body>
    <header>
        <h1>Welkom op mijn feest website</h1>
    </header>

    <main>
        <section>
            <h2>Dag van de arbeid</h2>
            <p>Is de dag van de arbeid ook een feestdag?
            Of beleef je het als een dag van de <em>slavernij</em>?</p>
        </section>

        <section>
            <h2>Bijzonder</h2>
            <p>De Armeense kerk in Jeruzalem viert Kerstmis op 19 januari
            en in Armenië vieren ze Kerstmis op 6 januari.</p>
        </section>
    </main>
</body>
</html>

Bekijk hier ook het eindresultaat in de browser: open hoofdstuk 1 voorbeeldpagina.

Quiz