Je eerste HTML-pagina

Je eerste HTML-pagina

In de vorige les zag je het basisskelet van HTML. Nu bouw je dat uit tot een volwaardige pagina: een eenvoudige bedrijfspagina voor een fictieve Nederlandse zzp'er, bijvoorbeeld een boekhoudkantoor of installatiebedrijf. Dit is precies het soort pagina dat je in de praktijk als eerste tegenkomt: een "visitekaartje"-website met naam, diensten en contactgegevens.

Stap 1: het skelet

Begin altijd met het skelet dat je in de vorige les leerde:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Van Dijk Installatietechniek</title>
</head>
<body>

</body>
</html>

Alles wat nu volgt, plaats je tussen <body> en </body>.

Stap 2: koppen toevoegen

HTML kent zes niveaus van koppen: <h1> tot en met <h6>. Gebruik <h1> precies éénmaal per pagina voor de hoofdtitel; de rest is voor subkoppen. Dit is niet alleen een stijlkeuze — zoekmachines en schermlezers gebruiken de koppenstructuur om de pagina te begrijpen.

<h1>Van Dijk Installatietechniek</h1>
<p>Uw specialist in cv-installatie en onderhoud in de regio Tilburg.</p>

Stap 3: een sectie met diensten

Voeg een subkop en een lijst met diensten toe. Een ongeordende lijst (<ul>) gebruik je wanneer de volgorde niet uitmaakt; een geordende lijst (<ol>) wanneer stappen of rangorde wel belangrijk zijn.

<h2>Onze diensten</h2>
<ul>
    <li>Installatie van cv-ketels</li>
    <li>Jaarlijks onderhoud</li>
    <li>Storingsdienst binnen 24 uur</li>
</ul>

Elk <li>-item (list item) hoort verplicht binnen een <ul> of <ol> — een los <li> buiten een lijst-element is ongeldige HTML.

Stap 4: een contactsectie met een link

Een link maak je met het anker-element <a>. Voor een e-mailadres gebruik je het speciale schema mailto:, zodat de bezoeker meteen zijn e-mailprogramma opent:

<h2>Contact</h2>
<p>
    KvK-nummer: 12345678<br>
    E-mail: <a href="mailto:info@vandijk-installatie.nl">info@vandijk-installatie.nl</a>
</p>

Merk op dat we hier <br> gebruiken voor een regelafbreking bínnen één paragraaf. Gebruik <br> spaarzaam: voor twee losse gedachten gebruik je liever twee aparte <p>-elementen. Een KVK-nummer opnemen is in Nederland verplicht voor zakelijke websites, dus dit is meteen een realistisch detail.

Stap 5: alles samenvoegen

Het complete bestand ziet er nu zo uit:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <title>Van Dijk Installatietechniek</title>
</head>
<body>
    <h1>Van Dijk Installatietechniek</h1>
    <p>Uw specialist in cv-installatie en onderhoud in de regio Tilburg.</p>

    <h2>Onze diensten</h2>
    <ul>
        <li>Installatie van cv-ketels</li>
        <li>Jaarlijks onderhoud</li>
        <li>Storingsdienst binnen 24 uur</li>
    </ul>

    <h2>Contact</h2>
    <p>
        KvK-nummer: 12345678<br>
        E-mail: <a href="mailto:info@vandijk-installatie.nl">info@vandijk-installatie.nl</a>
    </p>
</body>
</html>

Fouten herkennen

Beginners lopen vaak tegen dezelfde drie fouten aan:

• Vergeten sluitingstag. Een <ul> zonder </ul> zorgt ervoor dat alles daaronder ook als lijst-inhoud wordt behandeld — de lay-out schuift dan raar op.
• Verkeerde nesting. Tags die elkaar overlappen in plaats van keurig in- en uitsluiten (zie vorige les).
• Aanhalingstekens vergeten bij attributen. href=mailto:info@bedrijf.nl zonder aanhalingstekens werkt soms toevallig, maar breekt zodra er een spatie of speciaal teken in de waarde staat. Zet attribuutwaarden altijd tussen dubbele aanhalingstekens.

Een handige gewoonte: valideer je HTML af en toe met de gratis W3C Markup Validator. Die wijst je exact op de regel waar iets misgaat, inclusief een duidelijke foutmelding.

Waarom volgorde in de body ertoe doet

Browsers tonen de inhoud van <body> in precies de volgorde waarin je die typt, van boven naar beneden. Dit lijkt vanzelfsprekend, maar heeft een praktische consequentie: de eerste alinea die een bezoeker leest, is de eerste alinea die je typt. Denk daarom na over de leesvolgorde vóór je begint te typen — bij het voorbeeld hierboven is dat bewust: eerst de bedrijfsnaam en een pakkende zin, dan de diensten, en pas daarna de contactgegevens. Een bezoeker die binnen drie seconden niet snapt wat een bedrijf doet, klikt vaak weg.

Test je pagina in meerdere browsers

Hoewel moderne browsers (Chrome, Firefox, Edge, Safari) zich grotendeels aan dezelfde standaarden houden, zijn er kleine verschillen in weergave — vooral bij oudere versies. Voor een professionele bedrijfswebsite is het een goede gewoonte om je pagina minimaal in twee verschillende browsers te openen voordat je hem live zet. Dit kost een paar minuten en voorkomt dat een bezoeker met een andere browser dan de jouwe een kapotte lay-out te zien krijgt.

Bestandsnamen: kleine details die wel uitmaken

Sla je HTML-bestand altijd op met kleine letters en zonder spaties, bijvoorbeeld bedrijf.html in plaats van Mijn Bedrijf.html. Spaties in bestandsnamen worden op internet vervangen door het teken %20, wat lelijke en foutgevoelige links oplevert zodra je bestanden aan elkaar koppelt. De hoofdpagina van een website heet in de praktijk vrijwel altijd index.html — webservers tonen dit bestand automatisch wanneer iemand alleen de domeinnaam intypt, zonder een specifieke bestandsnaam.

Samenvatting

Je hebt nu een volledige, werkende HTML-pagina gebouwd met een titel, koppenstructuur, een lijst en een contactlink. Dit patroon — h1, uitleg, subsecties met h2, lijsten en links — vind je terug in vrijwel elke eenvoudige bedrijfswebsite. In de volgende les ga je dieper in op tekst en koppen: hiërarchie, leesbaarheid en semantiek.