MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Beginnen met HTML

In dit artikel nemen we de basisprincipes van HTML door — we definiëren elementen, attributen en alle andere belangrijke begrippen waarover je misschien al hebt gelezen en hoe ze in de taal passen. We tonen je ook hoe een HTML-element is gestructureerd en verklaren een aantal belangrijke basiseigenschappen van de taal. Terwijl we je daarmee op weg helpen, spelen we met HTML om je interesse op te wekken! 

Vereisten: Basiskennis computers, basiskennis software installatie en basiskennis over werken met bestanden.
Doel: Vertrouwd raken met de HTML-taal. Vaardigheden in de praktijk brengen door enkele  HTML-elementen te schrijven.

Wat is HTML?

HTML (HyperText Markup Language) 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 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:

The main parts of our element are:

  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 en zijn invloed op de inhoud begint. 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 content: (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.

Actief leren: creër je eerste HTML-element

Bewerk de regel in het Invoer-gebied hieronder. Sluit het in tussen de <em>- en </em>-labels. (Plaats <em> voor de regel om het element te openen en </em> erachter om het element te sluiten) — dit zou de regel cursief moeten benadrukken! Je zal je veranderingen live kunnen zien in het Uitvoer-gebied.

Als je een fout maakt, kan je die altijd ongedaan maken door op de Ongedaan maken-knop te drukken. Als je echt vast raakt, druk dan op Toon oplossing om het antwoord te zien.

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 <strong> eerst sluiten en dan <p>. Het volgende is fout:

<p>My cat is <strong>very grumpy.</p></strong>

De elementen moeten correct 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!

Blok- versus inline-elementen

Elementen in HTML kunnen in twee belangrijke categorieën worden ingedeeld: elementen die als een blok functioneren en inline-elementen.

  • Elementen op blokniveau vormen een zichtbaar blok op de pagina — wat er ook aan vooraf ging, ze volgen op een nieuwe lijn en elke inhoud die erna komt zal ook op een nieuwe lijn staan. Zulke elementen zijn meestal structurele elementen in de pagina. Ze zijn bijv. paragrafen, lijsten, menu's, voetteksten enz. Een blokelement zal niet in een inline-element worden genest maar het kan wel in een ander blokelement worden genest. 
  • Inline-elementen bestaan binnen elementen op blokniveau. Ze worden rond kleine delen van de inhoud geplaatst en dus niet rond volledige paragrafen en andere vormen van gegroepeerde inhoud. Ze zullen eerder in een paragraaf of tekst terechtkomen, bijvoorbeeld <em> of <strong> kan je in een <a>-element (hyperlink) zetten om het element te benadrukken.

Bekijk het volgende voorbeeld eens:

<em>eerste</em><em>tweede</em><em>derde</em>

<p>vierde</p><p>vijfde</p><p>zesde</p>

<em> is een inline-element zoals je hieronder kan zien. De eerste drie elementen bevinden zich op dezelfde lijn zonder ruimte tussen hen in. <p> daarentegen is een element op blokniveau. Elk element verschijnt dus op een nieuwe lijn met ruimte boven en onder elk element. (De ruimte wordt gecreëerd door de standaard CSS stijl die de browser op paragrafen toepast).

Opmerking: HTML5 heeft de elementcategorieën in HTML5 geherdefiniëerd : zie Element content categories. Hoewel deze definities accurater en niet zo ambigu zijn als hun voorgangers, zijn ze wel een stuk moeilijker te begrijpen dan 'blok' en 'inline'. Daarom gaan we bij die twee blijven in dit artikel.

Opmerking: Je kan nuttige referentiepagina's vinden die lijsten van blok- en inline-elementen bevatten — zie Block-level elements en Inline elements.

Lege elementen

Niet alle elementen volgen hetzelfde patroon met een openingslabel, inhoud en eindlabel. Sommige elementen bestaan uit één enkel label, dat meestal wordt gebruikt om iets in de inhoud in te voegen/in te bedden. Het <img>-element bijvoorbeeld voegt een afbeelding aan de pagina toe op de plaats waar het het element in de code is geplaatst:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Dit zou het volgende op je pagina moeten uitvoeren:

Opmerking: Lege elementen worden soms void elementen genoemd (void is natuurlijk Engels en betekent ook leeg).

Attributen

Elementen kunnen ook attributen krijgen die er zo uitzien:

<p class="editor-note">My cat is very grumpy</p>

Attributen bevatten extra informatie over het element die je niet in de inhoud van dat element wil zien. In dit voorbeeld zie het class (klasse dus) attribuut dat je kan gebruiken om het element een naam te geven. Daarmee kan je het identificeren en er onder andere stijlinformatie op richten.

Een attribuut bestaat uit:

  1. Een spatie tussen het attribuut en de elementnaam (of het vorige attribuut als het element al een of meer attributen heeft).
  2. De attribuutnaam, gevolgd door een is-gelijk-aan-teken (=).
  3. Een attribuutwaarde tussen aanhalingstekens.

Actief leren: Attributen aan een element toevoegen

<a> is ook een element — het vertegenwoordigt een anker en verandert de tekst die het insluit in een hyperlink. Dit element kan een aantal attributen krijgen, twee ervan zijn de volgende:

  • href: De waarde van dit attribuut is het webadres waar je de link naar wil doen wijzen en waar de browser naartoe navigeert als er op de link wordt geklikt. Bijvoorbeeld:  href="https://www.mozilla.org/".
  • title: Dit attribuut verschaft exta informatie over de link, zoals de aard van de pagina waarmee het anker ons verbindt. Bijvoorbeeld: title="The Mozilla homepage". Dit attribuut zal als een tooltip verschijnen als de muis erover heen beweegt.

Bewerk de regel in het invoer-gebied hieronder en verander hem in een hyperlink naar je favoriete website. Eerst voeg je het <a>-element toe, dan het href-attribuut en dan het title-attribuut. Je zal de verandering live kunnen updaten in het uitvoer-gebied. Je zou een link moeten zien die de inhoud van het title-attribuut toont als je met je muis over de link heen glijdt. Als je erop klikt zou je naar het webadres moeten worden gebracht dat in het href-element staat. Vergeet niet dat je een spatie tussen de elementnaam en elk attribuut moet plaatsen.

Als je een fout maakt, kan je die altijd ongedaan maken met de Ongedaan Maken knop. Als je echt vastraakt, druk dan op Toon Oplossing om het antwoord te zien.

Boolean attributen

Soms zal je attributen zonder waarden zien — dit is helemaal toegestaan. We noemen hen boolean attributen, en ze kunnen slechts één waarde hebben. Die is meestal dezelfde als de attribuutnaam. Neem het disabled-attribuut als voorbeeld. Je kan het toewijzen aan het invoerveld van een formulier dat je wil uitschakelen.(Het veld wordt dan grijs weergegeven en de gebruiker kan niets invullen.)

<input type="text" disabled="disabled">

Zoals je hieronder kan zien, is een verkorte vorm ook toegestaan . Ter informatie hebben we ook een ingeschakeld invoerveld toegevoegd zoadat je beter begrijpt wat er gebeurt: 

<input type="text" disabled>

<input type="text">

Beiden zullen het volgende produceren:

Aanhalingstekens rond attribuutwaarden weglaten

Als je wat rondkijkt op het World Wide Web, zal je allerlei rare opmaakstijlen tegenkomen, waaronder waarden zonder aanhalingstekens. Dit is toegestaan in een aantal omstandigheden maar het zal je code in andere breken. Als we bijvoorbeeld ons linkvoorbeeld opnieuw bekijken, zouden we het kunnen herschrijven met enkel het href-attribuut en zonder aanhalinstekens zoals hieronder:

<a href=https://www.mozilla.org/>favoriete website</a>

Maar als we het title-attribuut toevoegen, loopt het mis:

<a href=https://www.mozilla.org/ title=De Mozilla homepage>favoriete website</a>

In deze situatie zal de browser je opmaak verkeerd interpreteren en denken dat het  title-attribuut in feite uit drie attributen bestaat — een title-attribuut met "De" als waarde, en twee boolean attributen, Mozilla en homepage. Dit is natuurlijk niet de bedoeling en het zal fouten en onverwacht gedrag in de code veroorzaken, zoals je in het live voorbeeld hier beneden kunt zien. Probeer met je muis over de link heen te glijden om te zien wat de tekst van de titel is!

We adviseren om de waarden van je attributen altijd tussen aanhalingstekens te zetten — je vermijdt er dit soort problemen mee en je code wordt ook leesbaarder. 

Enkele of dubble aanhalingstekens?

In dit artikel zal je merken dat de attributen allemaal tussen dubbele aanhalingstekens staan. Het is echter mogelijk dat je in de HTML van sommige mensen enkele aanhalingstekens ziet staan. Dit is uitsluitend een kwestie van stijl en je bent vrij om je eigen voorkeur te volgen. De volgende twee lijnen gelijkwaardig:

<a href="http://www.example.com">Een link naar mijn voorbeeld.</a>

<a href='http://www.example.com'>Een link naar mijn voorbeeld.</a>

Je moet er echter wel voor zorgen dat je de twee niet met elkaar vermengt. Het volgende zal mis gaan!

<a href="http://www.example.com'>Een link naar mijn voorbeeld.</a>

Als je één type aanhalingstekens in je HTML hebt gebruikt, kan je het andere type nesten:

<a href="http://www.example.com" title="Plezant, niet?">Een link naar mijn voorbeeld.</a>

Als je hetzelfde type aanhalingstekens wil nesten, zal je HTML-entititeiten voor de aanhalingstekens moeten gebruiken.

Anatomie van een HTML-document

Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten.  Op hun eentje zijn ze echter niet erg nuttig. Nu gaan we zien hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mijn testpagina</title>
  </head>
  <body>
    <p>Dit is mijn pagina</p>
  </body>
</html>

Wat steekt er in die pagina?

  1. <!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. Ze zagen er toen ongeveer zo uit:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    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. <!DOCTYPE html> is de kortste tekenserie die als een geldig doctype kan dienen; voorlopig is dat al dat je moet weten.
  3. <html></html>: Het <html>-element. element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).
  4. <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. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van je pagina zoals je die in zoekresultaten wil zien verschijnen, CSS om je inhoud van stijlen te voorzien, tekensetverklaringen en meer. Je zal er meer over leren in het volgende artikel van deze serie.
  5. <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.
  6. <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. Hij wordt ook gebruikt om de pagina te beschrijven als je hem als bladwijzer/favoriet instelt.
  7. <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 (audio tracks in het Engels)  of wat dan ook.

Actief leren: Extra functionaliteit aan een HTML-document toevoegen

Als je met HTML op je lokale computer wil experimenteren, kan je het volgende doen:

  1. Kopieer de HTML-pagina die je hierboven in 'Anatomie van een HTML-document' vindt.
  2. Creër een nieuw bestand in je broncode-editor.
  3. Plak the code in het nieuwe bestand.
  4. Sla het bestand op als index.html.

Opmerking: Je kan dit simpele HTML-jsabloon ook op de MDN Learning Area Github repo vinden.

Je kan het bestand nu in een webbrowser openen om te zien hoe de gegenereerde code eruitziet. Dan kan je de code bewerken en de browser vernieuwen om te zien wat het resultaat is. Eerst zal het er zo uitzien:

A simple HTML page that says This is my pageIn deze oefening kan je de code lokaal op je computer bewerken, zoals we hierboven hebben uitgelegd, of je kan die in het bewerkbare voorbeeldvenster hieronder bewerken. (In deze oefening vertegenwoordigt het bewerkbare voorbeeldvenster gewoon de inhoud van het <body>-element.) Probeer nu de volgende stappen uit te voeren:

  • Net onder het  <body>-openingslabel, voeg je een titel voor het document toe. Die zou tussen een <h1>-openingslabel en een </h1>-eindlabel moeten staan.
  • Bewerk de inhoud van de paragraaf en zorg dat er wat tekst in staat over iets dat je interesseert.
  • Zorg dat de belangrijke woorden goed opvallen door ze vet te maken. Dat doe je door ze tussen een <strong>-openingslabel en een </strong>-eindlabel te zetten.
  • Voeg een hyperlink aan je paragraaf toe, zoals we eerder in dit artikel hebben uitgelegd.
  • Voeg onder de paragraaf een afbeelding aan je document toe. Doe dit ook zoals we eerder in dit artikel hebben uitgelegd. Je krijgt bonuspunten als je erin slaagt de hyperlink naar een andere afbeelding te laten wijzen. (Dat kan een beeld zijn dat zich op je lokale computer bevindt of eentje dat je ergens in het internet hebt gevonden.)

Als je een fout maakt, kan je altijd op Ongedaan Maken klikken Als je echt vast raakt, druk dan op Toon Oplossing om het antwoord te zien.

Witruimte in HTML

In de voorbeelden hierboven heb je misschien gemerkt  dat er veel witruimte in de code staat. Dit is helemaal niet nodig; de twee volgende stukjes code zijn beiden correct:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

Witruimte kan uit spaties bestaan maar ook uit regeleindes. Het doet er niet toe hoeveel je ervan gebruikt; het HTML-ontledingsprogramma herleidt elke spatie tot een enkele wanneer het de code genereert. Dus waarom zou een mens zoveel witruimte gebruiken? Het antwoord is leesbaarheid — het maakt het zoveel gemakkelijker om te begrijpen wat er in je code gebeurt als je die aangenaam en netjes hebt opgesteld in plaats van opeengestapeld als een hoop troep. In onze HTML hebben we elk genest element twee spaties verder laten inspringen dan het element waar het in zit. Het is jouw zaak welke opmaakstijl je gebruikt (hoeveel spaties je gebruikt voor elk niveau van inspringing bijvoorbeeld) maar je zou moeten nadenken over een of andere vorm van opmaak.

Entiteitsverwijzingen: inclusief speciale tekens in HTML

De tekens <, >,",' en & zijn speciale tekens in HTML. Ze vormen onderdelen van de HTML-syntaxis zelf dus hoe gebruik je een van die tekens in je tekst?  Als je bijvoorbeeld echt een ampersand (& dus) wil gebruiken of een kleiner-dan-teken, hoe zorg je er dan voor dat het niet als code wordt geïnterpreteerd zoals in sommige browsers gebeurt?

We moeten entiteitsverwijzingen gebruiken — speciale codes die tekens vertegenwoordigen en die in deze omstandigheden kunnen worden gebruikt. Elke entiteitsverwijzing begint met een ampersand (&) en eindigt op een puntkomma (;).

Letterlijk teken Entiteitsverwijzing als equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

In het voorbeeld hieronder kan je twee paragrafen zien waarin over webtechnologieën wordt gepraat:

<p>In HTML definiëer je een paragraaf met een <p>-element</p>.

<p>In HTML definiëer je een paragraaf met een &lt;p&gt;-element.</p>

In de live uitvoer hier beneden, kan je zien dat er met de eerste paragraaf iets is misgelopen. De browser denkt namelijk dat de <p> code is waarmee je een nieuwe paragraaf wil beginnen. De tweede paragraaf ziet er prima uit omdat we de kleiner- en groter-dan-tekens hebben vervangen door entiteitsverwijzingen.

Opmerking: Op Wikipedia kan je een kaart van alle beschikbare entiteitsverwijzingen voor HTML-tekens vinden: Lijst van entiteitsverwijzingen voor XML- en HTML-tekens.

HTML commentaren

In HTML, zoals in de meeste programmeertalen, bestaat er een mechanisme om commentaren in je code te schrijven. Commentaren worden genegeerd door de browser en zijn onzichtbaar voor de gebruiker. Het doel van dit mechanisme is commentaren in je code te schrijven die verduidelijken hoe je code werkt, wat de verschillende delen van je code precies doen enz. Dit kan zeer nuttig zijn als je terugkeert naar code waar je al zes maanden niet meer aan hebt gewerkt en je je niet meer kan herinneren wat je hebt gedaan of als je je code doorgeeeft aan iemand anders die er verder mee zal werken.

Om een deel van de inhoud in je HTML-bestand in een commentaar te veranderen, moet je die door de speciale markeerders  <!-- en --> omhullen. Bijvoorbeeld:

<p>Ik sta niet in een commentaar.</p>

<!-- <p>Ik wel!</p> -->

Zoals je hieronder kan zien, verschijnt de eerste paragraaf in de live uitvoer maar de tweede niet.

Samenvatting

Je hebt het einde van het artikel bereikt — ik hoop dat je van onze reis doorheen de fundamenten van HTML hebt genoten. Op dit punt zou je moeten begrijpen hoe de taal eruitziet, hoe hij werkt op een basisniveau en je zou nu een paar elementen en attributen moeten kunnen schrijven. Deze kennis is meer dan genoeg om de volgende artikelen te lezen. Daarin gaan we sommige behandelde onderwerpen in groter detail bespreken en we zullen een paar nieuwe eigenschappen van de taal introduceren. Stay tuned!

Opmerking: Nu je meer over HTML gaat leren, zal je misschien ook de fundamenten van CSS (Cascading Style Sheets of Waterval Stijlbestanden) willen onderzoeken. CSS is de taal die je gebruikt om je webpagina's te stijlen (om bijvoorbeeld je lettertype of kleuren te veranderen of de indeling van de pagina te wijzingen). HTML en CSS passen heel goed bij elkaar zoals je snel zal ontdekken.

Documentlabels en -medewerkers

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