Wat is HTML? Uitleg over de basisprincipes van Hypertext Markup Language
HTML staat voor HyperText Markup Language. Het is een standaard opmaaktaal (markup language) voor het maken van webpagina’s. Secties, paragrafen en links kunnen worden gemaakt en gestructureerd met HTML-elementen (de bouwstenen van een webpagina) zoals tags en attributen.
HTML kent veel toepassingsmogelijkheden, namelijk:
- Webontwikkeling. Ontwikkelaars gebruiken HTML-code voor het vormgeven van hoe een browser webpagina-elementen weergeeft, waaronder bijvoorbeeld tekst, hyperlinks en mediabestanden.
- Internet navigatie. Met HTML kunnen gebruikers gemakkelijk navigeren en links invoegen tussen verwante pagina’s en websites, omdat HTML veel wordt gebruikt voor het invoegen van hyperlinks.
- Webdocumentatie. HTML maakt het mogelijk om documenten te organiseren en op te maken, vergelijkbaar met Microsoft Word.
Opmerkelijk is ook dat HTML niet wordt beschouwd als een programmeertaal omdat er geen dynamische functionaliteit mee kan worden gemaakt, hoewel het tegenwoordig wel wordt erkend als een officiële webstandaard. Het World Wide Web Consortium (W3C) onderhoudt en ontwikkelt HTML-specificaties en biedt ook regelmatig updates.
In dit artikel bespreken we de basisprincipes van HTML, zoals hoe het werkt, de voor- en nadelen en hoe het zich verhoudt tot CSS en JavaScript.
Download het complete HTML-spiekbriefje
HTML uitgelegd in een video tutorial
Bekijk onze video tutorial om HTML beter te begrijpen.
Hoe werkt HTML?
De gemiddelde website bestaat uit meerdere verschillende HTML-pagina’s. Zo hebben bijvoorbeeld een startpagina, een ‘Over ons’-pagina en een contactpagina allemaal aparte HTML-bestanden.
HTML-documenten zijn bestanden die eindigen met de extensie .html of .htm . Een webbrowser leest het HTML-bestand en maakt de inhoud ervan zichtbaar voor internetgebruikers.
Alle HTML-pagina’s bestaan uit een reeks HTML-elementen, die bestaan uit een set tags en attributen. HTML-elementen zijn de bouwstenen van een webpagina. Een tag vertelt de webbrowser waar een element begint en eindigt, terwijl een attribuut de kenmerken van een element beschrijft.
De drie hoofdonderdelen van een element zijn:
- Openingstag – deze wordt gebruikt om te bepalen waar een element van kracht wordt. De tag is voorzien van opening en sluiting tags. Je kunt bijvoorbeeld de starttag <p> gebruiken als je bijvoorbeeld een alinea aanmaakt.
- Inhoud – dit is het resultaat dat andere gebruikers zien.
- Sluiting tag – gelijk aan de openingstag, maar met een slash forward vóór de elementnaam. Bijvoorbeeld </p> om een alinea te eindigen.
De combinatie van deze drie onderdelen creëert een HTML-element:
<p>Zo voeg je een alinea in HTML toe.</p>
Een ander belangrijk onderdeel van een HTML-element is het attribuut. Dit bestaat uit twee delen: een naam en een attribuutwaarde. De naam identificeert de extra informatie die een gebruiker wil toevoegen, terwijl de waarde van het attribuut verdere specificaties geeft.
Een stijlelement dat bijvoorbeeld de kleur paars en het lettertype verdana toevoegt, ziet er als volgt uit:
<p style="color:purple;font-family:verdana">Dit is hoe je een alinea in HTML invoegt.</p>
Een ander attribuut, de HTML-klasse, is heel belangrijk voor ontwikkeling en programmering. Met het klasse-attribuut wordt stijlinformatie toegevoegd die op verschillende elementen met dezelfde klasse-waarde kan worden toegepast.
Wij gebruiken bijvoorbeeld dezelfde stijl voor een kop en een alinea . De stijl is inclusief achtergrondkleur, tekstkleur, rand, marge en opvulling, onder de klasse .important. Om dezelfde stijl tussen<h> en <p> te bereiken, voeg je na elke starttag class=”important” toe:
<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">Dit is een kop</h1>
<p class="important">Dit is een alinea.</p>
</body>
</html>
De meeste elementen hebben een start- en een eindtag, maar sommige elementen hebben geen eindtag nodig om te functioneren, zoals bijvoorbeeld lege elementen. Deze elementen gebruiken geen eindtag omdat ze geen inhoud bevatten:
<img src="/" alt="Image">
Deze afbeelding tag heeft twee attributen – een src-attribuut, het afbeelding pad, en een alt-attribuut, de beschrijvende tekst. Er is echter geen inhoud en ook geen eindtag.
Ten slotte moet elk HTML-document beginnen met een <!DOCTYPE> declaratie waarmee de webbrowser wordt geïnformeerd over het documenttype. Met HTML5 ziet de doctype HTML openbare declaratie er als volgt uit:
<!DOCTYPE html>
De meest gebruikte HTML-tags en HTML-elementen
Momenteel zijn er 142 HTML-tags beschikbaar waarmee verschillende elementen kunnen worden gemaakt. Hoewel moderne browsers sommige van deze tags niet meer ondersteunen, is het nog steeds handig om alle beschikbare elementen te leren.
In dit gedeelte behandelen we de meest gebruikte HTML-tags en twee belangrijke elementen: block-level elementen en inline elementen.
Block-level elementen
Een block-level element vult de volledige breedte van een pagina. Het start altijd een nieuwe regel in het document. Zo zal een heading-element op een afzonderlijke regel staan van een paragraph-element.
Elke HTML-pagina gebruikt deze drie tags:
- <html>tag is het root element dat het hele HTML-document definieert.
- <head>tag bevat metagegevens, zoals de titel en tekenset van de pagina.
- <body>tag omvat alle inhoud die op de pagina verschijnt.
<html>
<head>
<!– META INFORMATION –>
</head>
<body>
<!– PAGE CONTENT –>
</body>
</html>
Andere populaire tags op block-level niveau zijn:
- Koptekst (heading) tags – deze lopen van
<h1>naar<h6>, waarbij koptekst h1 het grootst is en steeds kleiner wordt naarmate de koptekst oploopt tot koptekst h6. - Alinea (paragraph) tags – deze worden allemaal omsloten door de
<p>tag. - Lijst (list) tags – er zijn verschillende varianten. Gebruik de
<ol>tag voor een geordende lijst en gebruik <ul> voor een ongeordende lijst. Sluit de afzonderlijke items op de lijst af met behulp van de<li>tag.
Inline elementen
Een inline-element formatteert de interne inhoud van block-level elementen, zoals het toevoegen van links en strings die benadrukt moeten worden. Inline-elementen worden meestal gebruikt voor het opmaken van tekst zonder dat de inhoud wordt verstoord.
Een <strong> tag zorgt dat een element vet wordt weergegeven, terwijl een <em> tag het element cursief maakt. Ook hyperlinks zijn inline elementen die een <a> tag en een href-attribuut gebruiken om de bestemming van de link aan te geven:
<a href="https://example.com/">Klik hier!</a>
HTML-evolutie – Wat is het verschil tussen HTML en HTML5?
De eerste versie van HTML bestond uit 18 tags. Sindsdien zijn er bij elke nieuwe versie nieuwe tags en attributen aan de opmaak toegevoegd. De belangrijkste upgrade van de taal tot nu toe was de komst van HTML5 in 2014.
Het belangrijkste verschil tussen HTML en HTML5 is dat HTML5 nieuwe soorten formulier besturingselementen ondersteunt. HTML5 introduceerde ook verschillende semantische tags die de inhoud duidelijk beschrijven, zoals <article>, <header> en <footer>.
De voor- en nadelen van HTML
Net als elke andere computertaal heeft HTML zijn sterke en zwakke punten. Dit zijn de voor- en nadelen van HTML:
Voordelen:
- Geschikt voor beginners. HTML heeft een duidelijke en consistente opmaak en is snel te leren.
- Ondersteuning. De taal wordt veel gebruikt, beschikt over veel informatiebronnen en heeft een grote community achter zich staan.
- Toegankelijk. Het is open-source en volledig gratis. HTML draait in alle webbrowsers.
- Flexibel. HTML kan eenvoudig worden geïntegreerd met backend-talen zoals PHP en Node.js.
Nadelen:
- Statisch. De taal wordt voornamelijk gebruikt voor statische websites. Voor dynamische functionaliteit moet je mogelijk JavaScript of een backend taal als PHP gebruiken.
- Aparte HTML-pagina. Gebruikers moeten afzonderlijke webpagina’s voor HTML maken, zelfs als de elementen hetzelfde zijn.
- Browsercompatibiliteit. Sommige browsers nemen nieuwe functies maar langzaam over. Soms geven oudere browsers nieuwere tags niet altijd weer.
Wat is de relatie tussen HTML, CSS en Javascript?
HTML wordt gebruikt voor het toevoegen van tekstelementen en het maken van de structuur van inhoud. Het is echter niet voldoende om een professionele en volledig responsieve website te bouwen. HTML heeft dus de steun van CSS (Cascading Style Sheets) en JavaScript nodig om het overgrote deel van de inhoud van websites te maken.
CSS is verantwoordelijk voor vormgeving (styling) zoals achtergrond, kleuren, lay-out, spatiëring en animaties. JavaScript voegt daarentegen dynamische functionaliteit toe, zoals sliders, pop-ups en fotogalerijen. Deze drie talen vormen de basis van front-end-ontwikkeling.
HTML begrijpen en je HTML-kennis verbeteren
Het leren van HTML is een goede eerste stap voor wie geïnteresseerd is in webontwikkeling.
Online zijn er volop cursussen beschikbaar waarmee je kunt leren coderen. Wij hebben drie van de beste HTML-tutorials op een rijtje gezet:
- W3Schools – biedt bronnen, voorbeelden en oefeningen om gratis de basisbeginselen van HTML te leren. Er is ook een HTML-cursus voor zelfstudie. Deze kost $95 en je ontvangt er een officieel certificaat voor.
- Codecademy – biedt gratis introductiecursussen met interactieve tutorials. Codecademy maakt gebruik van een split-screen waarmee het resultaat van jouw codering automatisch in een HTML-bestand wordt weergegeven. Er is exclusieve content beschikbaar voor $19,99/maand.
- Coursera – biedt verschillende cursussen aan met diepgaande uitleg en voorbeelden uit de praktijk. De abonnementsprijs is $49/maand en er is een gratis proefperiode van 7 dagen om mee te beginnen.
Conclusie
HTML is de belangrijkste online opmaaktaal (markup language). Elke HTML-pagina heeft een reeks elementen die de inhoudelijke structuur van een webpagina of toepassing vormen.
HTML is een beginnersvriendelijke taal met veel gebruikersondersteuning en wordt voornamelijk gebruikt voor statische websites. HTML werkt het beste samen met CSS voor de vormgeving en JavaScript voor de functionaliteit. Hoe je CSS en HTML koppelt, lees je op ons blog.
Bovendien hebben we je een aantal van de beste online cursussen voorgelegd. Hiermee kun je je kennis van HTML verbeteren of bijvoorbeeld een basiscursus HTML volgen.
Laat het ons via het commentaar gedeelte weten als je nog andere favoriete informatiebronnen kent waarmee je HTML kunt leren. Veel succes.
Wat is HTML FAQ’s
Waar wordt HTML voor gebruikt?
Hypertext Markup Language, of HTML, is een programmeertaal die wordt gebruikt om de structuur van webpagina’s te beschrijven. Met HTML kun je statische pagina’s maken met tekst, koppen, tabellen, lijsten, afbeeldingen, links en meer.
Hoe werkt HTML?
HTML is gebaseerd op tekst en vertelt de browser hoe alle verschillende pagina-elementen, zoals tekst, afbeeldingen en andere multimedia, op een afzonderlijke webpagina moeten worden weergegeven.
Is HTML gemakkelijk te leren?
Ja – het is waarschijnlijk de gemakkelijkste front-end programmeertaal die je kunt leren. Met veel gratis online hulpbronnen en tools is het ook een taal die je relatief snel kunt leren.
Wat voor soort taal is HTML?
HTML is een opmaaktaal. Het sorteert gegevens die zijn gecategoriseerd met HTML-tags, waardoor het mogelijk wordt om de gegevens te definiëren en het doel ervan op een webpagina te beschrijven. HTML vertelt een webbrowser in principe wat de verschillende pagina-elementen zijn en waar ze moeten worden geplaatst bij het laden van de pagina.
Patty Reuser is een localization specialist voor de Nederlandse markt, die uitblinkt in het vertalen van content met een scherp marketinginzicht. Met haar expertise maakt ze complexe concepten eenvoudig en toegankelijk voor Nederlandse doelgroepen. Voor meer informatie, bekijk haar LinkedIn-profiel.