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

Wat steekt er in het hoofd? Metadata in HTML

Het hoofd van een HTML-document is het deel dat niet wordt getoond in de webbrowser wanneer de pagina is geladen. Het bevat informatie zoals de <title> van de pagina, links naar CSS (als je je HTML-inhoud met CSS wil stijlen), koppelingen naar aangepaste favicons en andere metadata (data over de HTML, zoals wie die geschreven heeft en belangrijke sleutelwoorden die het document beschrijven.) In dit artikel behandelen we alle zaken die we hierboven hebben vermeld en we geven je een goede basis om met de opmaak en andere code om te gaan die in het hoofd zou moeten leven. 

Vereisten: Basiskennis HTML vergelijkbaar met de informatie die is aangeboden in Beginnen met HTML.
Doel: Over het HTML-hoofd leren: wat is zijn doel, wat zijn de belangrijkste onderdelen die het kan bevatten en welk effect kan het hebben op het HTML-document.

Wat is het HTML-hoofd?

We bekijken opnieuw het eenvoudige HTML-document dat we in het vorige artikel hebben besproken:

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

Het HTML-hoofd is de inhoud van het <head>-element. In tegenstelling tot de inhoud van het <body>-element die wordt weergegeven als de pagina in een browser wordt geladen, is de inhoud van het hoofd niet niet zichtbaar op de pagina. De taak van het hoofd is om metadata over het document te bevatten. In het voorbeeld hierboven is het hoofd vrij klein:

<head>
  <meta charset="utf-8">
  <title>Mijn testpagina</title>
</head>

In grotere pagina's echter, kan het hoofd echt wel vol allerlei zaken staan  — ga maar eens naar een paar van je favoriete websites en gebruik de hulpprogramma's voor ontwikkelaars om de inhoud van hun hoofden te onderzoeken. Ons doel is hier niet om je alles te tonen dat je in het hoofd kan zetten en gebruiken. We willen je wel uitleggen wat de meest voor de hand liggende zaken zijn die je in je hoofd kan plaatsen, hoe je ze moet gebruiken en je er een beetje bekend mee maken. Laat ons beginnen.

Een titel toevoegen

We hebben het <title>-element al in actie gezien — het kan namelijk gebruikt worden om een titel aan het document toe te voegen. Dit kan echter verward worden met het <h1>-element dat gebruikt kan worden om de belangrijkste kop aan de inhoud van je body toe te voegen — die kop wordt soms de paginatitel genoemd maar het zijn twee verschillende zaken!

  • Het <h1>-element verschijnt op de pagina wanneer die in de browser wordt geladen — over het algemeen zou die maar één keer per pagina gebruikt mogen worden. Namelijk om de titel van je pagina-inhoud op te maken (de titel van een verhaal, of de kop van een nieuwsbericht of wat er dan ook geschikt is voor jou).
  • Het <title>-element behoort tot de metadata en bevat de titel van het volledige HTML-document (niet die van de inhoud van het document)

Actief leren: We onderzoeken een eenvoudig voorbeeld

  1. Om met dit hoofdstuk te beginnen, willen we dat je naar onze Github repo gaat en een kopie van onze title-example.html pagina downloadt. Er zijn twee manieren om dit te doen:
    1. Je kan met behulp van je broncodeverwerkerde de code in de pagina in een nieuw tekstbestand kopiëren en die ergens op een goede plek opslaan.
    2. Je kan op de "Raw"-knop van de pagina drukken, de tekst selecteren, kopiëren en dan een plek kiezen waar je het bestand kan opslaan.
  2. Open nu het bestand in je browser. Je zou een pagina moeten zien die er zo uitziet:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Het zou nu volledig duidelijk moeten zijn waar de <h1>-inhoud verschijnt en waar die van de <title>!

  3.  Je kan nu de code in je broncodeverwerker openen, de inhoud van deze elementen bewerken, de code opslaan en dan de pagina in je browser vernieuwen. Veel plezier!

De inhoud van het <title>-element wordt op andere manieren gebruikt. Als je bijvoorbeeld een bladwijzer van de pagina wil maken, zal je de inhoud van het <title>-element als een suggestie voor de naam van de bladwijzer ingevuld zien staan (Om een bladwijzer te maken klik je met de rechtermuisknop bovenaan in de bladwijzerbalk. Dan kies je Nieuwe bladwijzer of klik je op het hartje bovenaan in het menu in Firefox).

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

De <title>-inhoud wordt ook in zoekresultaten gebruikt zoals je hieronder zult zien.

Metadata: het <meta>-element

Metadata zijn data die data beschrijven en HTML heeft een "officiële" manier om metadata aan een document toe te voegen — het <meta>-element. Natuurlijk kan al het andere waarover we in dit artikel al hebben gesproken ook als metadata worden beschouwd. Er zijn vele verschillende soorten <meta>-element die kunnen worden opgenomen in het <head> van je pagina, maar die gaan we nog niet proberen uit te leggen omdat dat gewoon te verwarrend zou worden. In de plaats daarvan gaan we nu een paar zaken uitleggen die je vaak zal zien, gewoon om je een idee te geven van wat metadata zijn.

De tekencodering van je document bepalen

In het voorbeeld dat we hierboven hebben gezien, staat deze regel:

<meta charset="utf-8">

Dit element bepaalt de tekencodering van het document .  Dit is de tekenset (i.e. de karakters, zoals onze letters, Japanse tekens, wiskundige symbolen...) die je document mag gebruiken. utf-8 is een universele tekenset waarin zowat elk karakter in elke menselijke taal is opgenomen.  Dit betekent dat je webpagina in staat zal zijn om elke taal weer te geven. Het is dan ook een goed idee om deze tekenset toe te voegen aan elke webpagina die je creëert! Je pagina zal bijvoorbeeld Engelse en Japanse karakters prima aankunnen:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Als je je karakterencodering volgens ISO-8859-1 instelt (de tekenset voor het Latijnse alfabet), zal de weergave van je pagina volledig in de knoei raken:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Actief leren: Een experiment met tekenencodering

Om dit uit te proberen, neem je het eenvoudige HTML-sjabloon dat je in de vorige sectie over het <title>-element hebt gevonden (de title-example.html pagina). Probeer de meta tekenset-waarde in ISO-8859-1 te veranderen en voeg dan wat Japanse tekens aan je pagina toe. Dit is de code die we hebben gebruikt:

<p>Japanese example: ご飯が熱い。</p>

Een auteur en een beschrijving toevoegen

Vele <meta>-elementen kunnen ook attributen voor naam en inhoud krijgen:

  • name bepaalt met welke type meta-element je werkt en welke type informatie het bevat.
  • content (inhoud in het Nederlands) bepaalt welke meta-inhoud wordt gebruikt.

Er bestaan twee nuttige meta-elementen: eentje waarmee je de auteur van de pagina kan vermelden en nog één dat de gebruiker een een beknopte beschrijving van de pagina verschaft. Laat ons een voorbeeld bekijken:

<meta name="author" content="Chris Mills">
<meta name="description" content="Het MDN Leerplatform heeft als doel 
totale beginners alle informatie te verschaffen om te kunnen beginnen
met het ontwerpen van websites en applicaties.">

Er zijn een paar redenen waarom het nuttig is de auteur te vermelden: het is handig omdat je erachter kan komen wie de pagina heeft geschreven en je kan hem/haar/hen vragen over de inhoud stellen. Sommige inhoudsbeheersystemen selecteren automatisch de auteursinformatie en maken die beschikbaar voor zulke doeleinden.

Vergeet niet dat je de Engelse termen name, description (beschrijving) en content (inhoud) in je HTML-pagina moet gebruiken.

Het is nuttig als een description sleutelwoorden bevat die relevant zijn voor de inhoud op je pagina omdat die je pagina hoger in relevante resultaten van zoekmachines doet verschijnen (zulke activiteiten noemen we Search Engine Optimization (optimalisatie van zoekmachines) or SEO.)

Actief leren: Het gebruik van de beschrijving in zoekmachines

De description (beschrijving) wordt ook gebruikt in de pagina's met resultaten van zoekmachines. We gaan dit nu verder onderzoeken met een oefening.

  1. Ga naar het voorblad van het Mozilla Developer Network.
  2. Bekijk de bron van de pagina (Klik met de rechtermuisknop + Ctrl  op de pagina, kies Paginabron bekijken.)
  3. Zoek het metalabel met de description. Die zal er zo uitzien: 
    <meta name="description" content="Het Mozilla Developer Network (MDN) biedt informatie over Open-Web-technologieën waaronder HTML, CSS, en API's voor zowel websites als HTML5-apps. Ook documenteert het Mozilla producten, zoals Firefox OS.">
  4. Zoek nu "Mozilla Developer Network" in je favoriete zoekmachine (wij gebruikten Yahoo). In de zoekresultaten zal je de inhoud zien van de description <meta>- en de content (inhoud) van het <title>-element — zeker de moeite waard om te hebben!

    A Yahoo search result for "Mozilla Developer Network"

Opmerking: In Google zal je onder de hoofdlink van de MDN-startpagina een paar relevante MDN-pagina's zien — deze worden site koppelingen genoemd en je kan die configureren met Google's webmaster tools — een manier om de zoekresultaten van je site te verbeteren in de Google zoekmachine.

Opmerking: Vele <meta> eigenschappen worden eigenlijk niet meer gebruikt. Het sleutelwoord <meta>-element bijvoorbeeld, zou sleutelwoorden voor zoekmachines moeten verschaffen om zo de relevantie van de pagina voor verschillende zoektermen te bepalen. Het wordt nu door zoekmachines genegeerd omdat spammers deze lijst van sleutelwoorden met honderden sleutelwoorden opvulden en zo de resultaten verdraaiden. 

Andere metadata-types

Terwijl je in het web zit rond te scharrelen, zal je ook andere types van metadata tegenkomen. Vele eigenschappen die je op websites zult zien zijn hun eigen creaties en ontworpen om bepaalde sites (zoals socialenetwerksites) specifieke informatie te verschaffen die ze kunnen gebruiken.

Open Graph Data bijvoorbeeld is een metadata-protocol dat Facebook heeft uitgevonden om websites van verrijkte metadata te voorzien. In de MDN-broncode, zal je dit vinden:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

Dat heeft ondere andere het volgende effect: als je een hyperlink maakt naar MDN op facebook, zal de hyperlink samen met een afbeelding en een beschrijving verschijnen: een verrijkte ervaring voor gebruikers.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter heef ook gelijkaardige eigen metadata, die een vergelijkbaar effect hebben als de URL van de site op twitter.com wordt getoond. Bijvoorbeeld:

<meta name="twitter:title" content="Mozilla Developer Network">

Eigen op maat gemaakte iconen toevoegen aan je site

Om het design van je site verder te verrijken, kan je referenties naar op maat gemaakte iconen in je metadata steken. Die zullen in een aantal contexten worden weergegeven.

De nederige favicon (het kleine icoontje dat bovenaan in het tab-gedeelte naast de <title>-inhoud van je pagina staat) hoort er al vele, vele jaren bij. Het was het eerste icoon van dit type, een 16 x 16 pixel icoon dat op meerdere plaatsen wordt gebruikt. De favicon kan op twee manieren aan je pagina worden toegevoegd:

  1. Je slaat hem op in dezelfde folder als die waarin de index-pagina van je site is opgeslagen en je doet dat met de .ico-extensie. (De meeste browsers zullen favicons in gewonere formaten ondersteunen zoals.gif of .png, maar als je het ICO-formaat gebruikt zal dat ervoor zorgen dat het werkt, zelfs in Internet Explorer 6.)
  2. Creëer er een koppeling naar door de volgende lijn in je HTML-<head> toe te voegen:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Moderne browsers gebruiken favicons op verschillende plaatsen, zoals in de tab waarin de pagina is geopend, en in het bladwijzermenu als je een bladwijzer maakt van je pagina :

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Er spelen tegenwoordig ook nog vele andere icoon-types mee. Je zal dit bijvoorbeeld in de broncode van de MDN-startpagina vinden:

<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

De commentaren verklaren waarvoor elk icoon wordt gebruikt — deze elementen zorgen er bijvoorbeeld voor dat een icoon met een mooie hoge resolutie wordt gebruikt als de site wordt opgeslagen in het startscherm van een iPad.

Maak je nu nog niet te veel zorgen over de implementatie van al deze verschillende soorten iconen — dit is een vrij gevorderde eigenschap and we zullen er geen kennis verwachten in deze cursus. Het belangrijkste doel is om je te laten weten dat dit soort zaken bestaat. Moest je er eentje tegenkomen terwijl zit rond te snuffelen in de broncode van één of andere website, dan weet je waar je mee bezig bent.

CSS en JavaScript toepassen op HTML

Zowat alle websites gebruiken tegenwoordig CSS om ze een coole look te geven en JavaScript om interactieve functionaliteit mogelijk te maken. Voorbeelden daarvan zijn videospelers, plattegronden, spelletjes en nog veel meer. CSS en Javascript worden meestal via respectievelijk het <link>-element en het <script>-element op een webpagina toegepast.

  • Het <link>-element staat altijd in het hoofd van je document. Het krijgt twee attributen, rel="stylesheet", dat aanduidt dat het het stijlblad is van het document en href, dat het pad naar het stijlblad-bestand bevat:

    <link rel="stylesheet" href="my-css-file.css">
  • Het <script>-element hoeft niet in het hoofd te worden gezet; in feite is het vaak beter om het aan de onderkant van het body van het document te plaatsen (net voor het </body>-eindlabel) om er zeker van te zijn dat alle HTML-inhoud eerst door de browser is ingelezen vooraleer de browser er Javascript op probeert toe te passen. (Als JavaScript een element probeert te gebruiken dat nog niet bestaat, zal de browser een foutmelding genereren.)

    <script src="my-js-file.js"></script>

    Opmerking: Het <script>-element mag er dan als een leeg element uitzien, dat is het echt niet en het heeft dus een eindlabel nodig. In plaats van naar een extern scriptbestand te wijzen, kan je er ook voor kiezen om je volledige scriptcode tussen de twee labels van het <script>-element te plaatsen.

Actief leren: CSS en JavaScript op een pagina toepassen

  1. Om met deze oefening te beginnen, grijp je een kopie van onze meta-example.html, script.js en style.css bestanden en sla je ze op je lokale computer in dezelfde map op. Zorg ervoor dat ze worden opgeslagen met de juiste namen en bestandsextensies.
  2. Open het HTML-bestand in je browser en in je broncodebewerker.
  3. Voeg nu de <link>- en <script>-elementen toe aan je HTML zoals hierboven is uitgelegd. Op die manier worden je CSS en JavaScript toegepast op je HTML.

Als je dit correct doet en je HTML opslaat, zal je zien dat er vanalles is veranderd wanneer je de browser vernieuwt:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • Het JavaScript heeft een lege lijst aan de pagina toegevoegd. Als je nu ergens op de pagina klikt, zal een dialoogvenster omhoog komen. Het zal je vragen wat tekst in te voeren om een nieuw lijstonderdeel toe te voegen. Als je op de OK-knop drukt, zal de tekst als een nieuw lijstonderdeel aan de lijst worden toegevoegd. Als je op op een bestaand lijstonderdeel klikt, zal een dialoogvenster verschijnen waarin je de tekst ervan kunt veranderen.  
  •  De CSS heeft ervoor gezorgd dat de achtergrond nu een groene kleur heeft. De tekst is ook groter geworden. Het heeft ook de inhoud gestijld die door het Javascript aan de pagina wordt toegevoegd (de rode balk met de zwarte boord is door CSS aan de door JS gegenereerde lijst toegevoegd.) 

Opmerking: Als je in deze oefening vastraakt en er niet in slaagt om de CSS/JS op de pagina toe te passen, ga dan naar onze css-and-js.html voobeeldpagina.

De belangrijkste taal van het document instellen

Als afsluiter vinden we het de moeite waard om te vermelden dat je de taal van je pagina kan (en echt wel zou moeten) instellen. Dit kan je doen door het lang attribuut aan het openingslabel van het HTML-element toe te voegen (zoals je hieronder en in het meta-example.html kan zien.)

<html lang="en-US">

Dit is op vele manieren nuttig. Als de taal van je HTML-document is ingesteld, zal die beter worden geïndexeerd door zoekmachines (het zal bijvoorbeeld correct verschijnen in taal-specifieke resultaten) en het is ook nuttig voor mensen met een visuele beperking die een schermlezer gebruiken. (het woord "six" bijvoorbeeld bestaat zowel in het Frans als in het Engels maar wordt op een verschillende manier uitgesproken.)

Je kan ook subsecties van je document als verschillende talen laten herkennen. We zouden onze Japanse sectie als Japans kunnen laten herkennen, zoals hieronder :

<p>Japans voorbeeld: <span lang="jp">ご飯が熱い。</span>.</p>

Deze codes worden gedefiniëerd door de ISO 639-1 standaard. Je kan er meer over ontdekken in Language tags in HTML and XML.

Samenvatting

We zijn aan het einde van onze sneltreintour over het HTML-hoofd gekomen. Er is nog veel meer dat je ermee kan doen, maar een rondleiding die alles uitlegt, zou in dit stadium snel saai en verwarrend worden. We willen je gewoon een idee geven van wat de gebruikelijkste zaken zijn die je erin kan vinden! in het volgende artikel bekijken we HTML-basisstructuren die ons helpen met tekst om te gaan.

Documentlabels en -medewerkers

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