Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan

HTML leren in 10 stappen

Nog nooit HTML geschreven? Volg deze stappen in volgorde. Elke stap legt een paar elementen uit en linkt naar de volledige uitleg, met een voorbeeld dat je meteen ziet werken.

  1. Stap 1 Het skelet van een pagina

    Elke HTML-pagina heeft dezelfde basis: een <html>-element met daarin een <head> voor informatie over de pagina en een <body> voor wat de bezoeker ziet. In de head staan de titel en de tekenset.

    <html> <head> <body> <title> <meta>

  2. Stap 2 Koppen en alinea's

    Tekst deel je op met koppen (<h1> tot en met <h6>) en alinea's (<p>). Gebruik per pagina één <h1> en sla geen niveaus over: zo kunnen zoekmachines en schermlezers de opbouw volgen.

    <h1>–<h6> <p>

  3. Stap 3 Nadruk en regelafbrekingen

    <strong> geeft aan dat iets belangrijk is, <em> legt nadruk op een woord. Een <br> breekt een regel af, bijvoorbeeld in een adres; voor witruimte tussen blokken gebruik je CSS.

    <strong> <em> <br>

  4. Stap 4 Links

    Met <a> en het attribuut href maak je een link naar een andere pagina, een plek op dezelfde pagina, een e-mailadres of een telefoonnummer. Schrijf een linktekst die zonder context te begrijpen is.

    <a> href-attribuut

  5. Stap 5 Afbeeldingen

    Een afbeelding plaats je met <img>. Het attribuut alt beschrijft de afbeelding voor wie hem niet kan zien; geef ook width en height mee, dan verspringt de pagina niet tijdens het laden.

    <img> alt-attribuut width-attribuut

  6. Stap 6 Lijsten

    Een opsomming zonder volgorde is een <ul>, een genummerde lijst een <ol>. Elk punt staat in een <li>. Ook een menu is in HTML meestal gewoon een lijst met links.

    <ul> <ol> <li>

  7. Stap 7 Tabellen

    Gegevens in rijen en kolommen zet je in een <table>. Een rij is een <tr>, een cel een <td> en een kopcel een <th>. Gebruik tabellen alleen voor gegevens, niet om een pagina in te delen.

    <table> <tr> <td> <th> <caption> Gids: HTML-tabel maken in 6 stappen

  8. Stap 8 Formulieren

    Een formulier begint met <form>. Invoervelden maak je met <input>, en elk veld krijgt een <label> zodat duidelijk is wat er ingevuld moet worden. Met <button> verstuurt de bezoeker het formulier.

    <form> <label> <input> <button>

  9. Stap 9 De pagina indelen

    Elementen als <header>, <nav>, <main>, <section>, <article> en <footer> vertellen welke rol een deel van de pagina heeft. Dat helpt schermlezers en zoekmachines, en het maakt je HTML beter leesbaar.

    <header> <nav> <main> <section> <article> <footer>

  10. Stap 10 Verder: vormgeven

    HTML bepaalt wat iets is, CSS hoe het eruitziet. Wil je snel een nette, responsieve opmaak zonder alles zelf te schrijven, kijk dan naar Bootstrap: kant-en-klare klassen voor layout, knoppen, formulieren en meer.

    Bootstrap 5.2