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 u de basisbegrippen van HTML uitleggen en wat zijn functie is.

Dus wat is HTML nu eigenlijk?

HTML is geen programmeertaal; het is een opmaaktaal en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie elementen die u kunt gebruiken om verschillende onderdelen van uw 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 kat is heel chagrijnig

Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met (<p>) paragraaflabels te omhullen:

<p>Mijn kat is heel chagrijnig</p>

Anatomie van een HTML-element

We gaan dit paragraafelement wat verder onderzoeken.

De belangrijkste onderdelen van ons element zijn:

  1. De opening-tag: (het openingslabel) 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.
  2. De closing-tag:  (het eindlabel) 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.
  3. De inhoud: Dit is de inhoud van het element, in dit geval gewoon een regel tekst. 
  4. Het element: De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.

Elementen kunnen ook attributen krijgen die er zo uitzien:

Attributen bevatten extra informatie over het element die u niet in de inhoud wilt zien zitten. Hier is class the naam van het attribuut en editor-note 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:

  1. Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).
  2. De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).
  3. De waarde van het attribuut staat tussen aanhalingstekens.       

Geneste Elementen

U kunt elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een <strong>-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:

<p>Mijn kat is <strong>heel</strong> chagrijnig.</p>

U moet er echter wel voor zorgen dat uw 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 kat is <strong>heel chagrijnig.</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 u 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/firefox-icon.png" alt="My test image">

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 hebben gestoken (we hebben die voor het eerst gebruikt in Omgaan met Bestanden):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mijn testpagina</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mijn testafbeelding">
  </body>
</html>

Wat zit er in die 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 u in uw HTML-pagina wilt steken, maar die niet tot de inhoud behoren die u aan de gebruikers wilt tonen als die uw pagina lezen. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van uw pagina zoals u die in zoekresultaten wilt zien verschijnen, CSS om uw inhoud van stijlen te voorzien, tekensetverklaringen en meer.
  • <body></body> — Het<body>-element bevat de volledige inhoud die u aan webgebruikers wilt tonen als die uw 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 bepaalt u dat de tekenset voor uw 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 u erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan u helpen om later problemen te vermijden. 
  • <title></title> — Dit element stelt de titel van uw pagina in. Dat is de titel die in het browsertabblad verschijnt waarin uw pagina wordt geladen en die wordt gebruikt om de pagina te beschrijven als u hem als bladwijzer/favoriet instelt.

Afbeeldingen

Nu willen we onze aandacht op het afbeeldingselement vestigen:

<img src="images/firefox-icon.png" alt="My test image">

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 kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :

  1. Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest. 
  2. Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:

De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u 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 testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn:  "Het Firefox logo: een brandende vos die de aarde omringt."

Probeer nu een betere alt-tekst te bedenken voor uw afbeelding.

Opmerking: Ontdek meer over toegankelijkheid op MDN's Accessibility landing page.

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 kunt u bepaalde delen van uw 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><h6> hoewel u er meestal slechts drie of vier zult gebruiken.

<h1>De titel van mijn artikel</h1>
<h2>De titel van een hoofdstuk in mijn artikel</h2>
<h3>Mijn ondertitel</h3>
<h4>De ondertitel die onder mijn ondertitel staat</h4>

Probeer nu een geschikte titel aan uw HTML-pagina toe te voegen en plaats hem net boven uw <img>-element.

Paragrafen

Zoals hierboven is uitgelegd dienen <p>-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:

<p>Dit is een enkele paragraaf.</p>

Voeg uw voorbeeldtekst toe (die zou u al moeten opgesteld hebben in Hoe gaat uw website eruitzien?) in een paar paragrafen die u direct onder uw <img>-element plaatst.

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:

  1. 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.
  2. 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>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p>

zouden we de opmaak op deze manier kunnen veranderen:

<p>Bij Mozilla, zijn we een globale gemeenschap van</p>
    
<ul> 
  <li>technici</li>
  <li>denkers</li>
  <li>bouwers</li>
</ul>

<p>die met elkaar samenwerken ... </p>

Voeg een ongeordende en een geordende lijst toe aan uw voorbeeldpagina.

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 uw paragraaf in een link te veranderen, volgt u deze stappen :

  1. Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".
  2. Sluit de tekst in een <a>-element in, zoals dit:
    <a>Mozilla Manifesto</a>
  3. Geef het <a>-element een attribuut en doe dat op deze manier:
    <a href="">Mozilla Manifesto</a>
  4. De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:
  5. <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

U zou onverwachte resultaten kunnen krijgen als u https:// of http:// zou weglaten. Dit deel noemen we het protocol en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.

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).

Voeg een link aan uw pagina toe, als u dat nog niet hebt gedaan.

Conclusie

Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (u kunt die ook hier zien):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

Als u vast komt te zitten, kunt u uw werk nog altijd met ons voltooide voorbeeld vergelijken op Github.

Eigenlijk hebben we hier enkel een fractie van de mogelijkheden gezien die HTML biedt. Om meer te ontdekken, gaat u naar HTML-Structuring the Web.

Documentlabels en -medewerkers

Aan deze pagina hebben bijgedragen: evelijn, mientje
Laatst bijgewerkt door: evelijn,