HTML (Hypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel je de basisbegrippen van HTML uitleggen en wat zijn functie is.
Dus wat is HTML eigenlijk?
HTML is geen programmeertaal; het is een opmaaktaal en hij wordt gebruikt om je browser te vertellen hoe de webpagina's die je bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie elementen die je kan gebruiken om verschillende onderdelen van je inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De tags (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:
Mijn auto is echt bijzonder.
Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met <p> (paragraaf labels) te omhullen zoals hieronder:
<p>Mijn auto is echt bijzonder.</p>
Anatomie van een HTML-element
We gaan dit paragraafelement wat verder onderzoeken. De belangrijkste onderdelen van ons element zijn:
Het openingslabel - <p> - Deze bestaat uit de naam van het element (in dit geval p), ingesloten door kleiner- en groter-dan-tekens. <elementnaam> toont ons waar het element begint. Hier begint ook de invloed die het op de regel uitoefent en in dit geval duidt het het begin van de paragraaf aan.
Het eindlabel - </p> Die is identiek aan de opening-tag, behalve dat er ook nog een schuine streep voor de naam van het element staat. De schuine streep leunt naar voor en staat net achter <. Het eindlabel duidt het einde van het element aan, in dit geval dus het einde van de paragraaf. Beginners vergeten de eindmarkeerder nogal eens en dat kan tot vreemde resultaten leiden.
De inhoud - Dit is de inhoud van het element, in dit geval gewoon een regel tekst.
Het element - <p> xx </p> De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.
Elementen kunnen ook attributen krijgen die er zo uitzien:
<p class="devnl-voorbeeld">Mijn auto is echt bijzonder.</p>
Attributen bevatten extra informatie over het element die je niet in de inhoud wilt zien zitten. Hier is class namelijk de naam van het attribuut en devnl-voorbeeld is de waarde van het attribuut. Met het class-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.
Een attribuut krijgt altijd de volgende kenmerken:
Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).
De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).
De waarde van het attribuut staat tussen aanhalingstekens.
Geneste Elementen
Je kunt elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat mijn auto ECHT bijzonder is, kunnen we het woord "echt" in een <strong>-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:
<p>Mijn auto is <strong>echt</strong> bijzonder.</p>
Je moet er echter wel voor zorgen dat je elementen correct worden genest: in het voorbeeld hierboven openden we het <p> element eerst en dan het <strong> element. Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:
<p>Mijn auto is <strong>echt bijzonder.</p></strong>
De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat je wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!
Lege elementen
Sommige elementen hebben geen inhoud en worden lege elementen genoemd. Het <img>-element bijvoorbeeld, die al in onze HTML zit, is zo'n leeg element:
<img src="./images/mijn-auto.png" alt="Mijn auto">
Dit element bevat twee attributen, maar er is geen </img> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het < /img>-element.
Anatomie van een HTML-document
Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons index.html-voorbeeld gebruiken zoals hieronder aangegeven.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevNL-voorbeeld</title>
</head>
<body>
<img src="./images/mijn-auto.png" alt="Mijn auto">
</body>
</html>
Wat zit er in onze pagina?
<!DOCTYPE html> — Het doctype. Lang geleden was HTML jong (rond 1991/2). Doctypes moesten toen als links naar een serie regels dienen. De HTML-pagina moest die regels volgen om als goede HTML te kunnen worden beschouwd. Dat kon automatische foutcontrole zijn en andere nuttige zaken. Maar tegenwoordig trekt niemand zich nog iets van die regels aan. Ze zijn enkel nog een historisch artefact dat erin moet staan opdat alles correct zou werken. Voorlopig is dat alles dat u moet weten.
<html></html> — Het <html>-element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).
<head></head> — Het <head>-element gedraagt zich als een container voor alle zaken die je in je HTML-pagina wilt steken, maar die niet tot de inhoud behoren die je aan de gebruikers wilt tonen als die je pagina lezen. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van de pagina zoals je die in zoekresultaten wilt zien verschijnen, CSS om de inhoud van stijlen te voorzien, tekensetverklaringen en meer.
<body></body> — Het <body>-element bevat de volledige inhoud die je aan web gebruikers wilt tonen als die je pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (i.e. audio tracks) of wat dan ook.
<meta charset="utf-8"> — Met dit element bepaal je dat de tekenset voor je document utf-8 zal zijn. In utf-8 steken bijna alle tekens die voor alle gekende menselijke talen worden gebruikt. In wezen houdt dit in dat het nu elke tekstinhoud aankan, die je erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan je helpen om later problemen te vermijden.
<title></title> — Dit element stelt de titel van je pagina in. Dat is de titel die in het browsertabblad verschijnt waarin je pagina wordt geladen en die wordt gebruikt om de pagina te beschrijven als je hem als bladwijzer/favoriet instelt.
Afbeeldingen
Nu willen we onze aandacht op het afbeeldingselement vestigen:
<img src="./images/mijn-auto.png" alt="Mijn auto">
Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het src-attribuut (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.
We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kan je een beschrijving aan de afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat:
Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest.
Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in je src-attribuut te veranderen zodat het niet langer correct is. Als je je HTML-bestand opslaat en de pagina herlaadt, zal je in plaats van de afbeelding de tekst uit je alt-attribuut zien staan.
De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die je schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt. De tekst van ons voorbeeld hierboven "Mijn auto" is echt niet goed genoeg. Een veel beter alternatief voor de afbeelding van mijn auto zou zijn: "Mijn auto: een miniatuur-versie van de Tesla."
Tekst opmaken
In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken.
Hoofdingen
Met hoofdingen of kopelementen kan je bepaalde delen van de inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen <h1> tot <h6> hoewel je er meestal slechts drie of vier zult gebruiken.
<h1>Mijn auto is echt bijzonder.</h1>
<h2>Mijn auto is echt bijzonder.</h2>
<h3>Mijn auto is echt bijzonder.</h3>
<h4>Mijn auto is echt bijzonder.</h4>
<h5>Mijn auto is echt bijzonder.</h5>
<h6>Mijn auto is echt bijzonder.</h6>
Paragrafen
Zoals hierboven is uitgelegd dienen <p>-elementen als containers voor paragrafen. Je zult ze regelmatig gebruiken als je gewone tekstinhoud opmaakt:
<p>Mijn auto is echt bijzonder.</p>
Lijsten
Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:
Ongeordende lijsten zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een <ul>-element.
Geordende lijsten zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een <ol>-element.
Elk artikel of onderwerp in de lijsten wordt ingebed in een <li>-element. Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,
<p>Mijn auto is echt bijzonder doordat hij is voorzien van: navigatie, stalen velgen en een trekhaak. Hier ben ik erg blij mee...</p>
zouden we de opmaak op deze manier kunnen veranderen:
<p>Mijn auto is echt bijzonder doordat hij is voorzien van:</p>
<ul>
<li>navigatie</li>
<li>stalen velgen</li>
<li>trekhaak</li>
</ul>
<p>Hier ben ik erg blij mee... </p>
Hyperlinks
Hyperlinks zijn zeer belangrijk — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken — <a> — de a staat voor "anker". Om een stuk tekst van je paragraaf in een link te veranderen. We kiezen eerst een stuk tekst die we willen doorlinken met een hyperlink zoals hieronder:
<a>Mijn auto is echt bijzonder</a>
Daarna geven we het <a>-element een attribuut en doen dat op deze manier:
<a href="#">Mijn auto is echt bijzonder</a>
De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:
<a href="https://www.devnl.nl/mijnauto">Mijn auto is echt bijzonder</a>
Je zou onverwachte resultaten kunnen krijgen als je https:// zou weglaten. Dit deel noemen we het protocol en het staat aan het begin van het webadres. Op het eerste zicht ziet href er misschien als een nogal obscure naam voor een attribuut uit. Als u moeite hebt om u zich de naam te herinneren, denk er dan aan dat href een afkorting is voor hypertext reference (hypertekst verwijzing in het Nederlands).
Wij raden je de volgende tutorials ook aan:
