Jan 26, 2026
Faradilla A.
8min Lezen
Een website maken met HTML in 8 eenvoudige stappen + tips voor na de ontwikkeling
Een website maken is tegenwoordig eenvoudiger dan ooit en vereist niet per se programmeerkennis. Met tools zoals de Hostinger Website Builder kun je via een visuele interface en drag-and-drop snel een website opzetten.
Toch kun je ervoor kiezen om een website helemaal zelf te bouwen met Hypertext Markup Language (HTML). Dat vraagt wat meer werk, maar geeft je ook meer controle. HTML-websites zijn licht en snel en belasten de server nauwelijks.
In dit artikel laten we stap voor stap zien hoe je een website maakt met HTML. Daarna geven we praktische tips om het design en de functionaliteit van je HTML-website verder te verbeteren.
Een website maken met HTML
In dit gedeelte leggen we stap voor stap uit hoe je zelf een website bouwt met HTML.
1. Kies een HTML-code-editor
Een code-editor is het programma waarin je de HTML-code van je website schrijft. Je kunt HTML-bestanden ook maken met een simpele teksteditor zoals Kladblok. Die mist alleen handige functies die het werken met code een stuk makkelijker maken. Goede HTML-code-editors bieden onder andere:
- Syntax highlighting – HTML-tags krijgen verschillende kleuren, waardoor de structuur van je code overzichtelijker wordt.
- Automatisch aanvullen – de editor stelt tags, attributen en elementen voor terwijl je typt.
- Foutdetectie – syntaxfouten worden gemarkeerd, zodat je ze snel kunt corrigeren.
- Integraties – ondersteuning voor plug-ins, Git en FTP-clients om je workflow te versnellen.
- Live voorbeeld – met een plug-in zie je direct hoe je website eruitziet, zonder het bestand steeds in de browser te openen.
Er zijn veel goede HTML-code-editors beschikbaar. Hieronder vind je een paar populaire opties:
- Notepad++ – een gratis en lichtgewicht teksteditor met extra functies voor coderen en ondersteuning voor plug-ins.
- Atom – een open-source editor met live preview en brede ondersteuning voor markup- en scripttalen.
- Visual Studio Code (VS Code) – een veelgebruikte tool voor webontwikkeling met een uitgebreide bibliotheek aan extensies.
2. Plan de lay-out van je website
Met een lay-outplan krijg je vooraf een duidelijk beeld van hoe je website eruit moet zien. Het helpt je ook om te bepalen welke onderdelen je nodig hebt en voorkomt dat je tijdens het bouwen belangrijke elementen vergeet.
Daarnaast denk je met een lay-outplan alvast na over de navigatie en gebruiksvriendelijkheid van je website. Dat heeft direct invloed op de gebruikerservaring. Denk hierbij aan onderdelen zoals de header, footer en het navigatiemenu.
Je kunt een lay-outplan schetsen met pen en papier of een ontwerptool gebruiken, zoals Figma. Het ontwerp hoeft niet tot in detail uitgewerkt te zijn. Zolang de globale indeling en uitstraling duidelijk zijn, heb je een prima basis om mee te werken.
3. Schrijf de HTML-code
Zodra je je code-editor hebt gekozen en je lay-outplan klaar is, kun je beginnen met het schrijven van de HTML-code van je website. De exacte stappen verschillen per code-editor, maar de werkwijze is in grote lijnen hetzelfde.
In deze tutorial laten we zien hoe je dit doet met VS Code:
- Maak een nieuwe map aan op je computer. Dit wordt de map waarin alle bestanden van je website komen te staan.
- Open VS Code en ga naar Bestand → Map openen.
- Zoek de map die je net hebt aangemaakt en klik op Map selecteren.
- Kies Nieuw bestand, geef het bestand de naam index.html en druk op Enter.
- Klik op Bestand maken om te bevestigen.
- Open het tabblad index.html en voeg de volgende basisstructuur van een HTML-document toe:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>Om de code beter te begrijpen, leggen we hieronder uit wat elke tag doet:
- <!DOCTYPE html> – geeft aan dat het om een HTML-document gaat, zodat de browser de pagina correct kan weergeven.
- <html> – het hoofdelement van het HTML-document. Hier begint en eindigt alle code.
- <head> – bevat de metagegevens van de pagina, zoals de titel en eventuele metadata.
- <title> – bepaalt de tekst die in het tabblad van de browser wordt weergegeven.
- <body> – bevat alle zichtbare inhoud van de webpagina.
4. Elementen in de lay-out maken
Nu ga je HTML-code toevoegen aan het bestand index.html om de onderdelen van je geplande lay-out te bouwen. Welke semantische HTML-elementen je nodig hebt, hangt af van het ontwerp van je website.
Met semantische HTML-elementen deel je je website op in logische secties. Deze elementen fungeren als containers voor je content. In dit voorbeeld gebruiken we de volgende tags:
- <header> – container voor inleidende content, zoals een logo of navigatie.
- <main> – bevat de hoofdinhoud van de webpagina.
- <div> – een generiek element om onderdelen te groeperen.
- <footer> – bevat content die onderaan de website wordt weergegeven.
Plaats deze elementen binnen de <body></body> tags in het bestand index.html. Zorg ervoor dat je elk element correct afsluit met een closing tag. Als een tag niet goed wordt gesloten, kan je pagina verkeerd worden weergegeven.
Zo ziet de volledige code er nu uit:
<!DOCTYPE html>
<html>
<head>
<title>Personal Blog</title>
</head>
<body>
<header>
</header>
<main>
<div class="row">
<div class="post-text-box">
</div>
<div class="profile">
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>5. De HTML-inhoud toevoegen
Wanneer de lay-outstructuur klaar is, kun je deze gaan vullen met inhoud, zoals tekst, afbeeldingen, links en eventueel video’s. Is je content nog niet definitief? Gebruik dan tijdelijke dummy-inhoud en vervang die later.
Voor het toevoegen van de inhoud gebruiken we onder andere de volgende HTML-tags:
- <h1> en <p> – voor koppen en alinea’s. Gebruik de <br>-tag om een regeleinde toe te voegen.
- <nav> en <a> – voor het maken van een navigatiemenu en links. Met het href-attribuut geef je aan naar welke URL een link verwijst.
- <img> – voor het toevoegen van afbeeldingen. Het src-attribuut bevat het pad naar het afbeeldingsbestand.
Pro tip
De img-tag ondersteunt ook het optionele alt-attribuut. Hiermee beschrijf je de afbeelding voor het geval deze niet wordt geladen en verbeter je de toegankelijkheid van je website.
Zo ziet de code eruit nadat je de content hebt toegevoegd:
<!DOCTYPE html>
<html>
<head>
<title>Personal Blog</title>
</head>
<body>
<header>
<h1>Your Personal Blog</h1>
<nav>
<a href="domain.tld/home">Home</a>
<a href="domain.tld/blog">Blog</a>
<a href="domain.tld/about">About</a>
</nav>
</header>
<main>
<div class="row">
<div class="post-text-box">
<h1>Newest Post</h1>
<section>
<h1>First Post</h1>
<p>The first post’s content</p>
</section>
</div>
<div class="profile">
<h1>About Me</h1>
<img src="profile-picture.png">
<p>About the author</p>
</div>
</div>
</main>
<footer>
<a href="twitter.com/author">Twitter</a>
<a href="facebook.com/author">Facebook</a>
<a href="instagram.com/author">Instagram</a>
</footer>
</body>
</html>Na het toevoegen van deze code krijgt je HTML-website vorm. Hieronder zie je hoe het resultaat er ongeveer uitziat:
6. CSS-opmaak toevoegen
Met HTML bepaal je de structuur en basisinhoud van je website. Voor de opmaak gebruik je Cascading Style Sheets (CSS). Met CSS stel je in hoe je HTML-elementen eruitzien, zoals de lay-out, kleuren en lettertypes.
Maak hiervoor een bestand met de naam style.css en koppel dit stylesheet aan je HTML-document. Voeg daarvoor de volgende regel toe tussen de opening- en sluitingstags van <head> in het bestand index.html:
<link rel="stylesheet" href="style.css">
Om de website in twee kolommen weer te geven, gebruiken we de flex-eigenschap. Met Flexbox rangschik je HTML-elementen in flexibele containers, zodat de lay-out zich automatisch aanpast aan verschillende schermgroottes.
Zo ziet de volledige CSS-code eruit:
/*header style*/
header {
text-align: center;
padding: 20px;
}
/*navigation menu style*/
nav {
text-align: center;
word-spacing: 30px;
Padding: 10px;
}
/*creating the two-column layout*/
*{
box-sizing: border-box;
}
.row {
display: flex;
flex-wrap: wrap;
}
.post-text-box {
flex: 70%;
padding: 20px;
}
.profile {
flex: 70%;
padding: 20px;
}
/*profile image and heading style*/
.profile img {
width: 120px;
display: block;
margin-left: 0;
margin-right: 0;
}
.profile h1 {
text-align: center;
}Nadat je dit codefragment aan je style.css-bestand hebt toegevoegd, ziet je website er ongeveer zo uit:
7. Je website verder aanpassen
Naast het aanpassen van de lay-out kun je CSS gebruiken om andere visuele onderdelen van je website te stylen. Denk bijvoorbeeld aan het lettertype, kleuren of een achtergrondafbeelding.
Om het uiterlijk van een specifiek onderdeel te wijzigen, voeg je CSS-eigenschappen toe aan het element dat je wilt aanpassen. Hieronder zie je een voorbeeld waarin we de achtergrondkleur en tekst van de navigatiebalk stylen:
/*navigation bar style*/
nav {
text-align: center;
word-spacing: 30px;
padding: 10px;
background-color: #f5f5dc
font-family: Helvetica;
}
/*navigation bar button style*/
nav a {
color: #000000;
text-decoration: none;
font-size: larger;
}Na het toepassen van CSS-styling op alle elementen ziet de website er nu zo uit:
8. Kies een hostingplatform en publiceer je website
Zodra alle bestanden en assets van je website klaar zijn, kun je deze online zetten. Daarvoor heb je webhosting nodig, die je afneemt bij een hostingprovider.
De webhostingpakketten van Hostinger zijn beschikbaar vanaf €2.49 en bevatten onder andere een gratis domein, een SSL-certificaat en automatische back-ups. Het instapabonnement biedt 25 GB SSD-opslag en ondersteunt tot 25 websites — ruim voldoende voor toekomstige projecten.
Standaard beveiligingsfuncties, zoals een web application firewall, malwarescanner, Cloudflare DNS-firewall en WHOIS Privacy Protection, beschermen je HTML-website tegen schadelijke aanvallen. Gebruik je een Business webhostingpakket of hoger, dan krijg je ook toegang tot onze eigen DNS-oplossing voor betere prestaties.
Bekijk onze gids met hostingpakketten om de beste optie voor jouw website te vinden. Je kunt Hostinger bovendien risicovrij uitproberen dankzij de 30-dagen-geld-terug-garantie.
Nadat je hosting hebt aangeschaft, upload je je websitebestanden via Bestandsbeheer of een FTP-client.
Zo werkt het uploaden via Hostinger Bestandsbeheer:
- Ga in hPanel naar Bestanden → Bestandsbeheer.
- Open de map public_html en upload het archiefbestand van je website vanaf je computer.
- Klik met de rechtermuisknop op het geüploade bestand en kies Uitpakken.
De methode met Bestandsbeheer is geschikt voor websites met bestanden tot 100 GB.
Tips voor het optimaliseren van een HTML-website
In dit gedeelte lees je welke stappen je kunt nemen nadat je een website hebt gebouwd met HTML en CSS. Met deze tips verbeter je de toegankelijkheid, gebruiksvriendelijkheid en functionaliteit van je website.
Een dropdownmenu toevoegen voor betere navigatie
Websites met meerdere pagina’s bevatten vaak veel navigatieknoppen, links en tekst. Met CSS kun je een eenvoudig dropdownmenu maken om deze onderdelen overzichtelijk te groeperen.
Gebruikers kunnen het menu uitklappen om extra opties te bekijken. Dat voorkomt een rommelige navigatie en maakt je website makkelijker te gebruiken, vooral op kleinere schermen.
Het design verbeteren met geavanceerde CSS
Met CSS kun je verder gaan dan de basisopmaak en het design van je website verfijnen voor een betere gebruikerservaring. Denk bijvoorbeeld aan scroll-snapping, tekstanimaties, hover-effecten met zoom en kleurverlopen.
Daarnaast kun je met media queries, CSS-regels en flexbox een responsive website bouwen. Een flexbox-lay-out past zich automatisch aan de schermgrootte van de gebruiker aan, zodat je website er goed uitziet op zowel desktop als mobiel.
Je website interactiever maken met JavaScript
JavaScript is een scripttaal waarmee je interactieve en dynamische onderdelen aan je website toevoegt. Je kunt bijvoorbeeld animaties inschakelen, countdowns maken of interactieve knoppen, formulieren en menu’s toevoegen.
Dit soort functies maakt je website levendiger en prettiger om te gebruiken. JavaScript toevoegen werkt vergelijkbaar met CSS: je kunt een apart bestand gebruiken of de code rechtstreeks in je bestaande HTML opnemen.
Moet je HTML leren om een website te bouwen?
Niet iedereen heeft de tijd of behoefte om HTML te leren om een website te maken. Gelukkig zijn er ook oplossingen waarmee je een complete website kunt bouwen zonder zelf code te schrijven.
Een websitebouwer zoals Hostinger Website Builder is een goede keuze voor beginners. Je werkt met een visuele interface en een drag-and-drop editor, waardoor je eenvoudig onderdelen kunt aanpassen.
Het onderhouden van een website die met een websitebouwer is gemaakt, is vaak eenvoudiger en minder foutgevoelig. Je hoeft de broncode niet handmatig aan te passen: je selecteert een element en voert de wijziging direct door op het scherm.
Omdat Hostinger Website Builder is inbegrepen bij alle hostingpakketten, hoef je de tool niet apart aan te schaffen. De pakketten starten vanaf €2.49/maand en zijn eenvoudig te upgraden naar hosting met hogere prestaties.
Conclusie
In plaats van een websitebouwer te gebruiken, kun je er ook voor kiezen om een website helemaal zelf te coderen met HTML. Dat vraagt meer werk, maar geeft je ook maximale controle. HTML-websites zijn licht, flexibel en efficiënt, omdat je de broncode direct kunt aanpassen.
In dit artikel hebben we uitgelegd hoe je in acht stappen een website maakt met HTML en CSS:
- Kies een HTML-code-editor. Selecteer een programma om je code te schrijven en te bewerken, zoals VS Code.
- Plan de lay-out van je website. Maak een eenvoudige schets of mock-up, bijvoorbeeld met pen en papier of een tool zoals Adobe XD.
- Schrijf de HTML-code. Maak een bestand met de naam index.html en voeg de basisstructuur van je document toe.
- Maak de lay-outelementen. Verdeel je website in secties door de juiste HTML-tags toe te voegen.
- Voeg de HTML-inhoud toe. Plaats koppen, tekst en afbeeldingen in elke sectie.
- CSS-opmaak toevoegen. Maak een style.css-bestand en gebruik CSS om de lay-out, uitlijning en spacing van elementen te bepalen.
- Je website aanpassen. Gebruik CSS om kleuren, lettertypes, lettergroottes en andere visuele onderdelen te wijzigen.
- Kies een hostingplatform en publiceer. Selecteer een betrouwbare hostingprovider en zet je website online.
Zodra je HTML-website klaar is, kun je deze verder uitbreiden met geavanceerde CSS en JavaScript om de navigatie, interactiviteit en het design te verbeteren.
Te veel om te leren of liever geen code schrijven? Dan is Hostinger Website Builder een eenvoudig alternatief.
Veelgestelde vragen (FAQ) over een HTML-website maken
Om je verder te helpen, beantwoorden we hieronder een aantal veelgestelde vragen over het bouwen van een website met HTML.
Is HTML genoeg om een website te maken?
Ja, met alleen HTML kun je een functionele website maken. De inhoud is dan wel statisch en bestaat vooral uit tekst, links, afbeeldingen en video’s. Wil je de uitstraling aanpassen, zoals kleuren en lettergroottes, dan gebruik je CSS. Voor dynamische en interactieve functies heb je daarnaast een programmeertaal nodig, zoals JavaScript of PHP.
Is HTML geschikt voor het maken van websites?
Ja, HTML is geschikt voor het bouwen van statische websites. Dit soort websites laden snel en gebruiken weinig resources, omdat je volledige controle hebt over de broncode. Voor complexere websites wordt HTML meestal gecombineerd met CSS en JavaScript. Wil je liever minder zelf coderen, dan is een CMS zoals WordPress vaak een praktischer keuze.
Hoe lang duurt het om een HTML-website te coderen?
Hoe lang het bouwen van een HTML-website duurt, hangt af van de complexiteit van het project. Ook factoren zoals ervaring, beschikbare middelen en het aantal mensen dat eraan werkt spelen een rol. Over het algemeen kan een ervaren ontwikkelaar een eenvoudige website vanaf nul bouwen in vier tot zes weken.
Alle tutorials op deze website voldoen aan de strenge edactionele standaarden en waarden van Hostinger.
Faradilla, ook bekend als Ninda, is Content Marketing Specialist bij Hostinger met meer dan vijf jaar ervaring en een achtergrond van tien jaar als taalkundige. Ze maakt technologie toegankelijk door complexe onderwerpen om te zetten in duidelijke, makkelijk te volgen tutorials. In haar vrije tijd volgt ze graag de nieuwste trends in tech en digitale marketing, of kijkt ze naar grappige dierenvideo’s. Je kunt met haar verbinden via LinkedIn.
