Skip to main content

Hypertext Markup Taal (HTML)

TL;DR

HTML (HyperText Markup Language) is een taal die wordt gebruikt om webpagina's te maken. Sommige pagina's kunnen rechtstreeks in HTML worden geschreven, terwijl andere gebruik kunnen maken van page builders of andere hulpmiddelen om webpagina's te maken die ook HTML-outputs produceren, die op hun beurt door browsers kunnen worden gelezen.

Wat betekent HTML?

HTML staat voor HyperText Markup Language en is de taal die wordt gebruikt om webpagina's te maken. Het gebruikt markups om elementen te definiëren en te stijlen. Het kan bijvoorbeeld lettertypen, kleuren, positie, links enz. definiëren. Hoewel de meeste websitebouwers niet rechtstreeks in HTML schrijven, is de uiteindelijke output, die door webbrowsers wordt gelezen en geïnterpreteerd, in HTML-formaat. Dit is de reden waarom, wanneer je met de rechtermuisknop klikt op een webpagina en "Bekijk pagina bron" selecteert, de eerste regel tekst in het resulterende venster <!doctype html> moet zijn.

Wat is de structuur van een HTML-pagina?

Hoewel de structuur kan variëren, zijn enkele van de elementen die je in elke HTML-pagina zou moeten aantreffen de volgende (met uitleg in cursief). Controleer dit op elke webpagina door met de rechtermuisknop ergens te klikken en "Bekijk pagina bron" te selecteren:

<!DOCTYPE html> - dit toont de webbrowser dat dit een HTML-bestand is dat hij kan lezen

<html lang="en"> - dit geeft de taal aan waarin de webpagina is geschreven

<head> - dit markeert het begin van het hoofdgedeelte, waar algemene codes worden geplaatst

<title>Titel van de pagina</title> - dit is een meta-tag die de titel van de pagina weergeeft, die in het browsertabblad verschijnt

<meta name="description" content="..." /> - dit wordt gebruikt om te beschrijven waar de pagina over gaat, voor zoekmachines

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - dit is een commando dat aangeeft hoe de webpagina moet worden weergegeven op verschillende schermformaten

<meta name="robots" content="index,follow" /> - dit vertelt de bots die de pagina crawlen dat ze deze kunnen indexeren en toevoegen aan de resultaten van zoekmachines

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - dit verbindt de HTML met een CSS-bestand, waar meer gedetailleerde styling voor de tekst wordt geplaatst

<script src="/js/random.js" type="text/javascript"></script> - dit verbindt met een JavaScript-bestand, dat wordt gebruikt om een actie op de webpagina uit te voeren

<link rel="canonical" href="https://yourpage.com"/> - als er pagina's zijn met vergelijkbare inhoud of de pagina kan worden gevonden op meer dan één URL, toont dit crawlers welke URL in aanmerking moet worden genomen voor autoriteit doeleinden

</head> - hiermee sluit je de head sectie

<body> - dit opent de body sectie, waar de eigenlijke pagina-inhoud wordt geplaatst

<div class="container"> - dit opent een sectie genaamd container, die meestal het frame voor de inhoud maakt

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Visitor Analytics logo" height="52" width="180"></a> - dit is een manier om een logoafbeelding te plaatsen die linkt naar uw homepage

<div class="first-text">Dit zijn de eerste woorden die daadwerkelijk op uw website worden weergegeven</div> - wat tekst die kan worden gestyled in het gekoppelde CSS-bestand

...

</body>