Een handig overzicht van de meest gebruikte HTML-tags, ingedeeld per categorie. Gebruik deze lijst als snelle referentie bij het bouwen van webpagina’s.
Documentstructuur
| Tag | Beschrijving | Voorbeeld |
|---|
<!DOCTYPE html> | Geeft aan dat het document HTML5 is | <!DOCTYPE html> |
<html> | Omsluit de hele HTML-pagina | <html lang="nl"> ... </html> |
<head> | Bevat metadata, titel en scripts/styles | <head><title>Mijn site</title></head> |
<body> | Bevat de zichtbare inhoud van de pagina | <body>Inhoud</body> |
Tekst & koppen
| Tag | Beschrijving | Voorbeeld |
|---|
<h1> – <h6> | Koppen (H1 is belangrijkste) | <h1>Titel</h1> |
<p> | Paragraaf | <p>Dit is een tekst.</p> |
<br> | Regellijnbreuk | Eerste regel<br>Tweede regel |
<hr> | Horizontale lijn | <hr> |
<strong> | Belangrijke tekst (vet) | <strong>Belangrijk</strong> |
<em> | Nadruk (cursief) | <em>Nadruk</em> |
<span> | Inline container voor tekst | <span class="highlight">Tekst</span> |
Lijsten
| Tag | Beschrijving | Voorbeeld |
|---|
<ul> | Ongeordende lijst | <ul><li>Item</li></ul> |
<ol> | Geordende lijst | <ol><li>Item</li></ol> |
<li> | Lijst-item | <li>Item</li> |
<dl> | Definitielijst | <dl><dt>HTML</dt><dd>Markup taal</dd></dl> |
Links & navigatie
| Tag | Beschrijving | Voorbeeld |
|---|
<a> | Hyperlink | <a href="/contact">Contact</a> |
<nav> | Navigatiesectie | <nav><ul>...</ul></nav> |
Afbeeldingen & media
| Tag | Beschrijving | Voorbeeld |
|---|
<img> | Afbeelding invoegen | <img src="foto.jpg" alt="Beschrijving"> |
<figure> | Afbeelding + bijschrift | <figure><img src="foto.jpg"><figcaption>Bijschrift</figcaption></figure> |
<video> | Video invoegen | <video controls src="video.mp4"></video> |
<audio> | Audio invoegen | <audio controls src="geluid.mp3"></audio> |
<iframe> | Externe inhoud insluiten | <iframe src="pagina.html"></iframe> |
Structuur & semantiek
| Tag | Beschrijving | Voorbeeld |
|---|
<header> | Kopgedeelte van een pagina/sectie | <header><h1>Titel</h1></header> |
<main> | Hoofdinhoud van de pagina | <main>...</main> |
<section> | Sectie van een pagina | <section><h2>Deel</h2></section> |
<article> | Zelfstandig artikel | <article><h2>Nieuws</h2></article> |
<aside> | Zijdelingse inhoud (sidebar) | <aside>Extra info</aside> |
<footer> | Voettekst | <footer>© 2025</footer> |
<div> | Blokcontainer zonder semantiek | <div class="container">...</div> |
Tabellen
| Tag | Beschrijving | Voorbeeld |
|---|
<table> | Tabelcontainer | <table>...</table> |
<tr> | Rij | <tr><td>Cel</td></tr> |
<td> | Tabelcel | <td>Inhoud</td> |
<th> | Kopcel | <th>Naam</th> |
<thead> | Kopgedeelte tabel | <thead><tr><th>...</th></tr></thead> |
<tbody> | Hoofdinhoud tabel | <tbody>...</tbody> |
<tfoot> | Voettekst tabel | <tfoot>...</tfoot> |
Formulieren
| Tag | Beschrijving | Voorbeeld |
|---|
<form> | Formuliercontainer | <form action="/verstuur"></form> |
<input> | Invoerveld | <input type="text" name="naam"> |
<textarea> | Tekstgebied | <textarea rows="4"></textarea> |
<label> | Label voor invoerveld | <label for="email">E-mail</label> |
<select> | Dropdownmenu | <select><option>Optie</option></select> |
<option> | Optie in dropdown | <option>Ja</option> |
<button> | Knop | <button>Verstuur</button> |
Scripts & metadata
| Tag | Beschrijving | Voorbeeld |
|---|
<script> | JavaScript invoegen | <script src="app.js"></script> |
<link> | Externe bestanden koppelen | <link rel="stylesheet" href="style.css"> |
<meta> | Metadata toevoegen | <meta charset="UTF-8"> |
<title> | Titel van de pagina | <title>Mijn Website</title> |
