Wat zijn de globale kenmerken van een HTML-document? Dat is onmisbare kennis als HTML nieuw is voor jou. We beginnen met de bouwstenen van de programmeertaal: elementen, tags en attributen. Je leert wat het contentmodel inhoudt en welke structuurelementen er zijn.
Een HTML-pagina is gewoon een tekstbestand. Het bestaat uit ‘platte’ tekst. Dat wil zeggen dat er geen codes in mogen voorkomen voor paginanummering, regelafstand en dergelijke. Tekstverwerkers zoals Microsoft Word zijn daarom ongeschikt als HTML-editor. Omdat HTML-documenten uit platte tekst bestaan, zijn ze platformonafhankelijk. Dat betekent dat je ze op ieder gewenst computersysteem of mobiel apparaat kan maken, bekijken en bewerken. Een webserver en een webbrowser moeten weten dat ze een HTML-bestand krijgen voorgeschoteld en geen gewoon tekstbestand. Daarom hebben HTML-bestanden de extensie .html. Soms komt je de extensie .htm tegen. Die komt uit de tijd dat Windows geen extensies van meer dan drie tekens kon verwerken. Technisch is er geen verschil. Een kaal tekstbestand met de extensie .html wordt weergegeven door een browser, maar je ziet alleen de kale tekst. Het bestand bevat geen enkele aanwijzing voor de structuur of de betekenis van de tekst. Om aan te geven dat een tekst een kop is of een hyperlink, moet de tekst worden gemarkeerd (getagd). Daar gebruikt je de HTML voor.
Kernbegrippen bij HTML zijn element, tag en tekst. De HTML-standaard bevat meer dan honderd elementen. Met deze elementen beschrijf je de inhoud van een webdocument, zodat de browser weet wat die ermee moet doen. Preciezer geformuleerd: je beschrijft het document voor de user agent. Een user agent is in dit verband software in de browser die een document dat door de webserver wordt verstuurd, vertaalt naar iets wat je kan bekijken, beluisteren of voelen. Het medium kan een beeldscherm zijn, voorleessoftware of een braillelezer. De rendering engine of layout engine verzorgt de uiteindelijke weergave in de browser.
Een voorbeeld maakt het allemaal duidelijker:
<a href=”https://www.handboek-html-css.nl”>Handboek HTML5 en CSS</a>
Dit is een element, een hyperlinkelement om precies te zijn. je ziet de volgende onderdelen:
• de openingstag <a href=”https://www.handboek-html-css.nl”>
• het HTML-element a
• het attribuut href met de waarde https://www.handboek-html-css.nl
• de tekst Handboek HTML5 en CSS
• de sluittag </a>
Een HTML-element is opgebouwd uit tags en tekst.
Het hyperlinkelement is geen leeg element; het bevat tekst en heeft een sluittag. Zonder tekst zou het ook nutteloos zijn, want dan zie je het element niet op het scherm. Waar moet je dan op klikken om de hyperlink te volgen? Een voorbeeld van een leeg element is het afbeeldingelement:
<img src=”zonnebloemen.jpg” alt=”Zonnebloemen in bloei.” width=”960″ height=”640″>
Er is alleen een openingstag, geen tekst en geen sluittag. De tag is zelfsluitend. Er zijn wel diverse attributen, die in dit voorbeeld aangeven waar de afbeelding kan worden gevonden (src, de afkorting van source oftewel bron) en welke afmetingen de afbeelding heeft (height en width). Het attribuut alt beschrijft wat er is te zien en is een verplicht attribuut van het element img.
Andere voorbeelden van lege elementen zijn <br>, <hr> en <wbr>. Ze zijn bedoeld voor een regeleinde, een scheiding tussen secties en het punt waarop een woord mag worden afgebroken. Je komt ze in de loop van het boek nog tegen.
Elke tag bestaat uit twee punthaken < en > met daartussen de naam van het element. Dankzij de punthaken wordt het element herkend als een tag en niet gezien als platte tekst. Vergeet je een punthaak, dan herkent de browser de tekst niet als een tag en ziet het resultaat er op het scherm niet uit zoals je verwacht. Een sluittag bevat altijd een slash / en de naam van het element, zoals </a>. Een leeg element heeft geen sluittag.
Een element is niet hetzelfde als een tag, maar de begrippen worden vaak door elkaar gebruikt. De tag is het ding met de punthaken, bijvoorbeeld <h1>. Tags geven het begin en eind van een element aan. Een element is het geheel van openingstag, tekst en sluittag (met uitzondering van lege elementen). Maar ook de losse naam zoals a of img wordt een element genoemd. Voor commentaar heeft HTML een speciale tag. Alles wat staat tussen <!– en –> wordt genegeerd.
Hiervoor is gezegd dat elementen ook andere elementen kunnen bevatten. Een voorbeeld daarvan is:
<a href=”images/zonnebloemen_large.jpg”>
<img src=”zonnebloemen.jpg” alt=”Zonnebloemen in bloei.”
width=”960″ height=”640″>
</a>
Het element <a> omsluit hier het element <img>. Het resultaat van deze code is een hyperlink die een afbeelding bevat. Klikt je op de afbeelding, dan komt je terecht op de bestemming die in het attribuut href in het element <a> is vastgelegd. De afbeelding ís de hyperlink.
Het is je misschien opgevallen dat alle voorgaande code in kleine letters is geschreven. Het hadden ook allemaal hoofdletters mogen zijn of een mix van hoofdletters en kleine letters. HTML is case-insensitive: hoofdletters hebben dezelfde betekenis als kleine letters. Hoewel je hoofdletters en kleine letters door elkaar mag gebruiken, is dat om je code leesbaarder te houden niet aan te raden. Het is goed gebruik (en aanbevolen) om al uw HTML-code in kleine letters te schrijven. Het advies om altijd kleine letters te gebruiken kent één uitzondering. Het is goed gebruik om in de eerste tag in hoofdletters te schrijven: <!DOCTYPE html>. Het DOCTYPE wordt later uitgelegd.
Hiervoor zag je een voorbeeld van een element dat een ander element omsluit. Het element img is genest in het element a. HTML-documenten zitten vol met dergelijke constructies. Daarbij is een ding heel belangrijk: je moet de elementen in de goede volgorde sluiten. Moeilijk is dat niet. Sluit altijd eerst het element dat als laatste is geopend. Bekijk het volgende fragment en het zal je duidelijk zijn wat de bedoeling is:
<p>Lees alles over <i>de standaard <abbr>HTML 5</abbr></i>.</p>
In de volgende paragraaf zal je zien dat dit principe niet alleen geldt binnen een alinea, maar zich kan uitstrekken over vele coderegels. Sluit je een blok code niet op de goede plaats, dan kan de weergave van de pagina heel anders zijn dan bedoeld.
Het laten inspringen van blokken code maakt beter zichtbaar of elementen goed zijn genest en of ze zijn afgesloten. Bij tekstelementen in een regel is dat een minder goed idee, maar bij alinea’s en andere blokken helpt het geweldig. In afbeelding 2.4 ziet je een voorbeeld.
[beeld: h02_04]
Je hebt intussen al enkele attributen gezien, bijvoorbeeld href, src, width, height en alt. HTML-tags vertellen de browser wat de betekenis is van de tussengelegen tekst, maar vaak is het nuttig om de browser of de gebruiker aanvullende informatie te geven. Daarom kan je bij veel elementen extra kenmerken aangeven. Deze extra kenmerken worden attributen genoemd. Neem een hyperlink. Met alleen het element a weet de browser niet meer dan dat het een anker (anchor) moet zijn, maar met het attribuut href wordt het een hyperlink met een doel:
<a href=”https://www.handboek-html-css.nl”>
Een attribuut bestaat vaak – maar niet altijd – uit een naam en een waarde:
• In dit geval is de naam het attribuut href.
• De waarde van het attribuut is https://www.handboek-html-css.nl.
Attributen worden gebruikt om de functionaliteit van elementen te vergroten. Ze hebben de volgende kenmerken:
• Elementen kunnen geen, een of meer attributen hebben.
• Attributen worden altijd in de openingstag opgegeven. Zodra de browser een element herkent, probeert deze ook de toegevoegde attributen te interpreteren.
• Het attribuut wordt met een spatie gescheiden van de elementnaam.
• Attributen mogen in hoofdletters, kleine letters of een mix daarvan worden geschreven. Advies: kies één stijl en volg die consequent. Het is goed gebruik om attributen, net als tags, in kleine letters te schrijven.
• Een element kan meer attributen bevatten die elk een bepaald kenmerk beschrijven. De attributen worden met spaties van elkaar gescheiden.
• Tussen de naam en de waarde van het attribuut staan geen spaties. Een goede notatie is dus href=”https://www.w3.org”.
• Fout is href = “https://www.w3.org”.
• De waarde van attributen mag tussen geen, dubbele of enkele aanhalingstekens worden gezet. Dit is goed: href=”https://www.w3.org”, en dit: href=’https://www.w3.org’ en dit ook: href=https://www.w3.org. Aan jou de keus. Het is gebruikelijk om in HTML dubbele aanhalingstekens toe te passen.
• Als de waarde van een attribuut spaties bevat, zijn de aanhalingstekens verplicht. Een voorbeeld is het opschrift (het attribuut value) van een verzendknop in een formulier: value=”Verzend het formulier”.
• Sommige elementen hebben booleaanse attributen. Een booleaans attribuut is een soort aan-uitschakelaar. Als het attribuut er is, is de waarde van toepassing; is het attribuut er niet, dan geldt het ook niet. Een voorbeeld is een verplicht in te vullen (required) veld in een formulier:
<input type=”email” name=”email” required>
Dit invoerveld van het type email moet worden ingevuld om het formulier te kunnen versturen, omdat het attribuut required is toegevoegd. Een booleaans attribuut mag ook worden geschreven als required=”” of required=”required”.
• Andere elementen zijn enumeratief, wat betekent dat ze juist wel een waarde moeten hebben: true, false of lege string (“”):
<p contenteditable=”true”>…</p>
Een minimaal HTML-document heeft een bijzonder eenvoudige opbouw:
<!DOCTYPE html>
<html lang=”nl”>
<head>
<meta charset=”utf-8″>
<title>De basis van een HTML 5-document</title>
<link rel=”stylesheet” href=”css/stijlen.css”>
</head>
<body>
<!– hier komt de zichtbare inhoud –>
</body>
</html>
Je kan deze code overtypen in je editor en opslaan als basisbestand voor elk nieuw HTML-bestand dat je schrijft. Toch is een hulpmiddel misschien handiger. De meeste editors ondersteunen Emmet, al dan niet met een plug-in. Emmet (emmet.io) is een hulpmiddel voor ontwikkelaars waarmee met sneltoetsen codefragmenten in je bestand worden geplaatst. In Emmet zit de complete HTML-sjabloon achter de sneltoets !+Tab: typ in een leeg bestand het uitroepteken en druk op de Tab-toets. In Visual Studio Code is Emmet zonder plug-in beschikbaar. Uiteraard leert je het meest door zo veel mogelijk zelf code te typen, maar Emmet kan je een hoop saaie herhalingen besparen. Bovendien moet je toch eerst weten hoe HTML werkt, want ander weet je niet welke opdrachten je Emmet moet geven.
Hoewel niet alle onderdelen uit de sjabloon vereist zijn, is het praktisch ze wel op te nemen in een HTML-document. De elementen worden hierna in volgorde van opkomst besproken. Je kan dit document in de browser bekijken, maar meer dan het stof op je beeldscherm is er niet te zien. Het zichtbare deel van een website staat in de body en die is leeg.
<!DOCTYPE html>
DOCTYPE geeft aan van welk type het document is. Dat is in het geval van HTML reuze eenvoudig: het type is html. De declaratie is niet hoofdlettergevoelig, maar het is handig om DOCTYPE in hoofdletters en html in kleine letters te schrijven. Het specificeren van het juiste documenttype is belangrijk. Het vertelt de browser wat voor document deze kan verwachten, zodat deze kan werken in standards mode. Dat wil zeggen dat alle HTML en CSS wordt verwerkt zoals het in de specificaties is beschreven.
<html lang=”nl”>
Dit is het echte begin van het document. Het attribuut ‘lang’ is niet verplicht, maar wel onmisbaar als je webpagina wordt voorgelezen door voorleessoftware (screenreader), vaak gebruikt door mensen met een visuele beperking. Ook taalafhankelijke eigenschappen (spellingcontrole, woordafbreking) werken alleen goed als de taal goed is ingesteld. De taalinstelling speelt ook een rol bij zoekmachines. <html> is de zogeheten root van het document. Het is het element dat alle andere elementen omvat.
<head>
Na de openingstag <html> volgt altijd de verplichte headsectie van het document. Hiervoor is het element <head>…</head> ontworpen. De sectie <head> is een belangrijk deel van het HTML-document. In deze sectie moet je onder meer de titel van het document opgeven. De titel is het enige zichtbare onderdeel van de <head> (zie hierna). De <head> kan zo klein zijn als in het voorbeeld, maar kan ook een waslijst aan meta-elementen en verwijzingen naar stylesheets en scriptbestanden bevatten. Deze worden niet in de pagina getoond, maar zijn wel belangrijk als achtergrondinformatie of hulpmiddel voor de werking van de pagina. Bekijk als voorbeeld eens de <head> van smashingmagazine.com.
<meta charset=”utf-8″>
Het element <meta> kan onderdak bieden aan verschillende attributen, maar charset is het enige attribuut dat je echt moet gebruiken. Dit attribuut bepaalt uit welke tekenset de browser de letters, cijfers, leestekens en meer moet halen.
Het attribuut name kan worden gebruikt om aanvullende informatie over de pagina op te nemen, die bijvoorbeeld nuttig is voor zoekmachines. Op de volgende manier verschaf je een beschrijving en trefwoorden:
<meta name=”description” content=”Het Handboek HTML5 en CSS3 …”>
<meta name=”keywords” content=”HTML,HTML5,CSS”>
De description wordt getoond in de zoekresultaten van Google. De keywords waren ooit belangrijk voor zoekmachines, maar als gevolg van misbruik wordt er niet veel waarde meer aan gehecht. Ze helpen je pagina niet aan een hogere positie in de zoekresultaten.
Voor de vindbaarheid van je website is het handig om rekening te houden met de wensen die Google heeft voor metatags. Informatie is te vinden op developers.google.com/search/docs/advanced/crawling/special-tags.
<title>
Binnen de <head>-codes van de pagina wordt de titel van de pagina opgegeven. Hiervoor wordt het element <title> gebruikt. Een titel is verplicht en het is verstandig een logische titel te bedenken die de inhoud van de pagina zo goed mogelijk omschrijft. De titel komt in de titelbalk of op het tabblad van de browser te staan en wordt door veel zoekdiensten samen met de beschrijving gebruikt om pagina’s te indexeren. Op Google zal je eerst de titel en direct daaronder de beschrijving van de pagina zien; dit zijn daarom belangrijke gegevens. Goed gekozen kunnen ze voor mensen de reden zijn om je pagina te bekijken.
• een titel is verplicht;
• een webdocument mag maar één titel hebben;
• deze <title> moet altijd in de sectie <head>…</head> staan;
• in een titel kunnen geen andere elementen worden gebruikt.
<link>
Het element <link> is niet verplicht, maar simpelweg onmisbaar omdat je daarmee (onder meer) een koppeling maakt met het bestand met de opmaakkenmerken van het HTML-document: de CSS-stylesheet. In het basisvoorbeeld ziet het er zo uit: <link rel=”stylesheet” href=”css/stijlen.css”>. Hierin geeft het verplichte attribuut ‘rel’ aan wat de relatie is met het externe bestand: een stylesheet. Het attribuut href geeft aan waar dat bestand staat. In dit voorbeeld is dat op de webserver in de map css.
<body>
Na de head kan je verder alle overige tekst, afbeeldingen en codes kwijt in het middendeel, de ‘body’ van de webpagina. Hier geeft je de eigenlijke pagina vorm. Het is dan ook niet verwonderlijk dat dit deel omsloten wordt door tags met de naam <body> en </body>. Hierbinnen wordt de inhoud van de pagina geschreven. Hier maakt je in de rest van het boek nog uitgebreid kennis mee.
Het schrijven van een HTML-pagina begint met nadenken over de structuur. Die leidt je normaal gesproken af van de content, hoewel er natuurlijk altijd een algemene structuur zal zijn (zoals header, main, footer). Toch: pas als je weet welke betekenis de inhoud heeft, weet je welke elementen je nodig hebt om de inhoud te structureren. Het begrip semantiek (semantics) komt je vaak tegen in relatie tot HTML. Een voorbeeld: dit boek bevat hoofdstukken, paragrafen en subparagrafen. De tekst is opgedeeld in alinea’s, opsommingen en terzijdes (tip of opmerking). Met andere woorden: elk stuk tekst heeft een betekenis die van invloed is op de structuur van dit boek (de ‘website’). Maak nu niet gelijk de sprong naar de opmaak van die onderdelen, want jij ziet wel dat een 16-punts vette tekstregel boven een 9-punts normale tekst een kop moet zijn, maar een apparaat trekt die conclusie niet. Dat apparaat heeft een code nodig die aangeeft wat de kop is en wat de alinea. Nogmaals, het gaat hier om de semantiek: de betekenis van de onderdelen voor de structuur. Die moet je volkomen los zien van het uiterlijk van die onderdelen.
Volgens de oude HTML-standaarden is een element of van blokniveau (block level) of van regelniveau (inline level). Bij weergave in een browser begint een blokelement op een nieuwe regel en kan er geen ander element naast staan. Het begint en eindigt dus met een regeleinde (return). Voorbeelden zijn een kop <h2>, het alinea-element <p> of een <article>. Een element op regelniveau heeft geen regeleinden en staat per definitie in een element op blokniveau, zoals in: <p>Ik benadruk <strong>het belang</strong> hiervan.</p>.
In moderne HTML bestaat deze onderverdeling niet meer, omdat die gaat over presentatie en zoals herhaaldelijk is benadrukt, staat dat niet in de taakomschrijving van HTML. Daarom is het begrip contentmodel geïntroduceerd. Het contentmodel beschrijft de verwachte inhoud van een element. Enkele voorbeelden:
• de inhoud van een element <h1> moet een koptekst zijn die slaat op de inhoud van de bijbehorende sectie (de hele pagina of een artikel);
• een element <table> moet gegevens in een raster tonen;
• een element <video> wordt gebruikt om een clip af te spelen. Het is niet bedoeld om op een pagina over beeld en geluid de paragraaf over video ermee af te bakenen.
Op deze manier zijn alle elementen ingedeeld in nul of meer categorieën die zeggen welke inhoud wordt verwacht als je dat element toepast. Er wordt niets gezegd over hoe dat element in de browser wordt getoond. Je bepaalt zelf of je wilt dat een kop los staat boven de tekst of in dezelfde regel wordt weergegeven. In beide gevallen moet de kop wel logisch bij die sectie horen.
Dit artikel is een hoofdstuk uit het ‘Handboek HTML 5 & CSS, 7e editie’ van Peter Doolaard. HTML en CSS zijn onmisbare bouwstenen voor het web. Zonder HTML is er geen webpagina, en zonder CSS blijft alles saai en ongekleurd. In deze zevende, volledig bijgewerkte editie van Handboek HTML & CSS leer je hoe je beide talen effectief inzet. Je begint met HTML: het structureren en markeren van content zoals koppen, tekst, lijsten, formulieren en multimedia. Vervolgens maak je met CSS een strak ontwerp, van kleuren en typografie tot complexe lay-outs met grid en flexbox. Je krijgt actuele uitleg over HTML, CSS en de nieuwste webtechnieken zoals container queries. Duidelijke praktijkvoorbeelden en online codevoorbeelden bieden extra inzichten.
Deze uitgave van Van Duuren Media is onder andere verkrijgbaar bij Standaard Boekhandel voor 44,99 euro.
Schrijf je in op onze nieuwsbrief en ontvang elke week het beste van Clickx in je mailbox.
Krijg Clickx magazine 10 keer per jaar (waarvan 2 extra dikke dubbelnummers) keurig thuisbezorgd.
