De Basisbegrippen van HTML

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 nu 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:

My cat is very grumpy

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

<p>My cat is very grumpy</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 je niet in de inhoud wil 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

Je kan elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat our cat VERY grumpy is, kunnen we het woord "very" in een <strong> element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:

<p>My cat is <strong>very</strong> grumpy.</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>My cat is <strong>very grumpy.</p></strong>

De elementen moeten juist 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 wil zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!

Lege elementen

Sommige lementen 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 hun eentje niet erg nuttig.  Nu gaan we zien hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen.Laat ons opnieuw 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>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </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 al dat je 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 wil steken maar die niet tot de inhoud behoren die je aan de gebruikers wil tonen als die je pagina lezen. Dit houdt zaken in zoals keywords, een beschrijving van je pagina zoals je die in zoekresultaten wil zien verschijnen, CSS om je inhoud van stijlen te voorzien, tekensetverklaringen en meer.
  • <body></body> — het<body>-element bevat de volledige inhoud die je aan webgebruikers wil 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 je 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 de browsertab verschijnt waarin je pagina wordt geladen en die is 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/firefox-icon.png" alt="My test image">

Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. Het doet 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 je 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 voor hen leest. 
  2. 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 je pagina herlaadt, zal je 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 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  "My test image" (i.e. 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 je 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 kan je bepaalde delen van je 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 je 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 je HTML-pagina toe te voegen en plaats hem net boven je <img>-element.

Paragrafen

Zoals hierboven is uitgelegd dienen <p>-elementen als containers voor paragrafen. Je zal ze regelmatig gebruiken als je gewone tekstinhoud opmaakt:

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

Voeg je voorbeeldtekst toe (die zou je al moeten opgesteld hebben in Hoe gaat je website eruitzien?) in  een paar paragrafen die je direct onder je <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 wilden 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 je voorbeeldpagina.

Hyperlinks zijn zeer belangrijk  — zij zijn wat het van 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, volg je 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 waar je de hyperlink mee wil  verbinden.:
  5. <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

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

Op het eerste zicht ziet href er misschien als een nogal obscure naam voor een attribuut uit. Als je moeite hebt om je je 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 je pagina toe, als je dat nog niet hebt gedaan.

Conclusie

Als je alle instructies in dit artikel hebt opgevolgd, zou je nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (je kan 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 je vastraakt, kan je je werk nog altijd met ons voltooid voorbeeld vergelijken op Github.

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

Documentlabels en -medewerkers

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