Na de algemene achtergronden uit het voorgaande hoofdstuk gaat dit hoofdstuk allereerst in op de globale kenmerken van een HTML-document. Dat is onmisbare kennis als HTML nieuw voor je is. De bouwstenen van HTML worden verklaard: elementen, tags en attributen. Daarna bekijk je waarin HTML5 verschilt van HTML 4. Je leert wat het contentmodel inhoudt, welke nieuwe structuurelementen er zijn en hou je die in de praktijk geburikt.
Kenmerken van HTML-documenten
Een HTML-pagina is gewoon een tekstbestand. Het bestaat uit 'platte' tekst oftewel ASCII-tekst. Er mogen geen codes in voorkomen voor paginanummering, regelafstand en dergelijke. Ze zijn platform-afhankelijk, wat weer betekent dat ze op ieder gewenst computersysteem of mobielapparaat gemaakt, bekeken en bewerkt kunnen worden. Uit de broncode is niet meer af te leiden op welk platform een bepaald webdocument is gemaakt.
De extenties *.htm en *.html hebben geen verschil ten opzichte van elkaar, waardoor ze beiden gebruikt mogen worden. Wel is het noodzakelijk om de eerste pagina van je site de naam index.html of index.htm mee te geven, dit omdat webbrowsers daar over het algemeen naar zoeken om bij het begin van je site uit te komen.
Elementen, tags en tekst
Elementbegrippen op een rijtje
Een webpagina is opgebouwd uit elementen.
Een element kan leeg zijn, andere elementen bevatten, tekst bevatten of een combinatie van andere elementen en tekst.
Het begin van een element wordt gemarkeerd door een openingstag die attributen kan hebben, soms is een attribuut verplicht.
Daarna volgt meestal tekst.
Het eind van een element wordt gemarkeerd met een sluittag.
Een leeg element is een element dat geen andere elementen kan bevatten.
Een leeg element bestaat uit alleen de openingstag en een of meer attributen.
Lege elementen
Lege elementen hebben alleen een openingstag en geen sluittag. Voorbeelden hiervan zijn:
<img> (voor afbeeldingen),
<br> (om een harde return te geven),
<hr> (om een lijn te zetten),
<wbr> (om een woord af te breken).
Sluiten in goede volgorde
Hou bij het maken van een html pagina altijd goed de volgorde van de tags in de gaten. Wanneer je bijvoorbeeld <h4><strong>Koptekst op formaat 4</strong></h4> zou sluiten als <h4><strong>Koptekst op formaat 4</4></strong>, dan zal de browser het niet snappen en er een zootje van maken.
Attributen
Kenmerken van attributen
Elementen kunnen geen, een of meer attributen hebben.
Attributen worden altijd in de openingstag opgegeven.
Het attribuut wordt met een spatie gescheiden van de elementnaam.
Attributen mogen in hoofdletters, kleine letters of een mix daarvan geschreven worden.
Attributen zijn hoofdlettergevoelig: klasse is niet hetzelfde als Klasse of KLASSE.
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.
Zodra de browser een element herkent, probeert hij ook de bijbehorende attributen te interpreteren.
De waarde van attributen mag tussen geen, dubbele of enkele aanhalingstekens worden gezet.
Sommige elementen hebben een booleaanse attribuut. Een booleaans attribuut is een soort aan- en uitschakelaar. Als het attribuut er is, is de waarde van toepassing, is het attribuut er niet, dan geldt het ook niet.
Globale attributen
Er zijn attributen die bij elk element gebruikt kunnen worden, zoals bijvoorbeeld de attributen src, height en width. Deze attributen worden daarom globale attributen genoemd. Hieronder is een tabel te zien met globale attributen en hun werking.
Attribuut
Omschrijving
Voorbeeld
id
ID staat voor Identifier. Hiermee kun je een element een unieke naam geven. ID mag maar éénmaal in een document worden gebruikt. De waarde moet minimaal 1 teken lang zijn en mag geen spaties bevatten.
<aside id=unieke_naam>
class
Class geeft een element een classificatie. Je geeft ermee aan dat het element tot een of meer (CSS-opmaak)klassen behoort. De waarde van class moet beginnen met een letter en mag worden gevolgd door meer letters, cijfers, streepjes of underscores. Als een element tot meer klassen behoort, zet je een spatie tussen de klassennamen.
Het attribuut title is niet hetzelfde als het element <title>. Het attribuut kan een beschrijving geven aan het element. De waarde van title is tekst.
<img src=foto.jpg title=foto: plaatje van iets>
style
Het attribuut style kan worden gebruikt om een afzonderlijk element op te maken met CSS.
<p style=color:green; font-weight:bold;>
tabindex
Met tabindex kun je instellen in welke volgorde elementen worden geactiveerd wanneer de gebruiker binnen een webpagina drukt op de tabtoets.
acceskey
Het attribuut acceskey kan worden gebruikt om een sneltoets voor een element te definiëren, bijvoorbeeld voor een zoekvak. De waarde van het attribuut bestaat uit een hoofdlettergevoelige letter of een cijfer. Het is mogelijk verschillende toetsen toe te wijzen gescheiden door een spatie. Mocht de eerste optie niet lukken, dan kan de tweede optie misschien wel worden gebruikt. In de standaardbrowser werken de sneltoetsen in combinatie met de Alt-toets of Alt+Shift, dat verschilt.
<a href=home.html acceskey=1>
dir lang
De taal van de webpagina of de taal van een afzonderlijk element, kun u instellen met het attribuut lang.Wanneer een deel van de pagina in het Engels geschreven is, moet de user agent dat weten. Het attribuut dir geeft de tekstrichting aan. De standaardwaarde is ltr (left to right).
Instellen van de hoofdtaal: <html lang=nl> Instellen van een taal voor een deel van de pagina: <p lang=en> Instellen van de tekstrichting: <dir=ltr>
spellcheck
Het attribuut kan worden ingeschakeld met true en worden uitgeschakeld met false. Het kan worden ingesteld voor de tekstwaarden van formulierinvoervelden <input>, voor het element <textarea> en bewerkbare teksten (elementen met het attribuut contenteditable. De controletaal is de taalversie van de browser.
translate
Met het attribuut translate geeft u aan of attribuutwaarden of tekst van een element wel (yes) of niet (no) mag worden vertaald. De standaardwaarde is wel vertalen.
<div translate="no">
<h2>Het Haags van Haagse Harry</h2>
<p>......</p>
</div>
hidden (booleaans) Javascript nodig
Als hidden wordt toegevoegd aan een element wordt daarmee aangegeven dat de inhoud nog niet of niet meer relevant is voor de pagina. Zonder javascript is dit attribuut nauwelijks zinvol te begrijpen. Het resultaat komt overeen met de CSS-regel display: none.
<article hidden> <h2>Vraag2</h2>
contenteditable Javascript nodig
Hiermee maak je een element bewerkbaar voor een gebruiker. De waardes zijn true of false. Om de wijzigingen ook te kunnen laten bewaren is javascript nodig.
<h2>Algemene voorwaarden</h2> <p contenteditable="true">In deze voorwaarden</p>
draggable dropzone
Het slepen van teksten en dergelijke op een webpagina zijn mogelijk. Hiervoor zorgt het attribuut draggable. Het kent drie toestanden: waar met de waarde true (slepen), onwaar met de waarde false (niet slepen) of auto (geen waarde) waarbij de standaardinstelling van de browser geldt. Dropzone zorgt er weer voor dat hetgeen wat met draggable ergens naar toe kan worden gesleept, ook een plekje verkrijgt in een bepaalde zone. Elk element kan dit attribuut hebben en met de waarden copy, move of link bepaalt u wat er gebeurd (kopiëren, verplaatsen of een link plaatsen naar de originele gegevens). Ook hier is javascript weer voor nodig.
De basis van een HTML5-document
Een minimaal HTML5-document heeft een bijzonder eenvoudige opbouw:
Deze onderdelen zijn niet allemaal vereist, maar wel een goed gebruik om ze allemaal op te nemen. Hierna een opsomming van de elementen en hun werking.
Element
Omschrijving
<!DOCTYPE html>
DOCTYPE geeft aan van welk type het document is. Dat is in het gevan van HTML5 reuze eenvoudig: het type is html.
<html lang="nl">
Dit is het echte begin van het document. Het attribuut lang is niet verplicht, maar wel handig als uw webpagina wordt voorgelezen door een screenreader.
<head>
De webtaal en met name html is opgebouwd naar aanleiding van de menselijke anatomie. Aan de bovenkant van een mens zit altijd het hoofd, dus ook in het geval van een html pagina wordt begonnen met het hoofd (head). Ook bij de mens kun je niet altijd zien wat het hoofd van plan is, waardoor dit de ruimte is voor de webpagina om allerlei dingen in te plaatsen die op de achtergrond noodzakelijk zijn voor de besturing/opbouw van je pagina.
<meta charset="utf-8">
Dit element kan onderdak bieden aan verschillende attributen, maar charset is het enige attribuut wat echt gebruikt moet worden. Dit attribuut bepaalt namelijk uit welke tekenset de browser de letters, cijfers, leestekens en meer moet halen.
Met <meta name="description" content="titel van de webpagina"> en <meta name="keywords" content="diverse sleutelwoorden die betrekking hebben op de site, met een komma tussen de woorden.">, kun je de webbrowser aanwijzingen geven over wat er op je site te vinden is. Dit is met name handig voor zoekmachines.
<title>
Hiermee kun je je pagina een titel geven. Deze titel verschijnt vervolgens in de browser op bovenop het tabblad.
<link>
Dit element is niet verplicht, maar simpelweg onmisbaar omdat je daarmee de koppeling maakt met het bestand waar de opmaak voor je pagina in staat, het zogenaamde (CSS)stylesheet. <link rel="stylesheet" href="naam css bestand"> - Het attribuut rel geeft hier aan wat de relatie is met het externe bestand, in dit geval een stylesheet. Het attribuut href geeft vervolgens aan waar het bestand te vinden is.
<body>
Dit is het lichaam van de pagina, dus het deel wat straks op de website te zien is.
Paginastructuur
De belangrijkste redenen om in een HTML-document te streven naar een logische, betekenisvolle paginastructuur en correct gebruik van elementen, zijn:
foutloze weergave in elke webbrowser;
Een foutloze weergave in elke browser hangt nauw samen met de manier waarop de browser ervoor zorgt dat een webpagina wordt weergegeven. Globaal gebeurt er het volgende: de browser ontvangt een stroom HTML-code van de webserver en maakt daarvan een boomstructuur met vertakkingen. Deze structuur wordt omgezet in een grafische weergave van de tekst, afbeeldingen, formulieren enzovoort. De naam van deze structuur is Document Object Model, kortweg DOM. (In chrome is dit te vinden met de rechtermuisknop en dan vervolgens kiezen voor Inspecteren)
eenvoudiger onderhoud;
goede indexeerbaarheid door zoekmachines
bruikbaarheid voor alternatieve weergaveapparaten, zoals screenreaders;
eenvoudiger uitwisseling van berichten tussen websites
De outline van een document
De outline is een structuur die bestaat uit onder meer de secties en koppen. De browser (user agent) zou hiermee bijvoorbeeld een inhoudsopgave kunnen genereren en een zoekmachine zou een outline kunnen gebruiken voor betere zoekresultaten. De manier waarop de user agent een outline moet maken is gespecificeerd in de HTML5-standaard.
Een contentmodel beschrijft de verwachte inhoud van een element.
de inhoud van een element <h1> moet een kop zijn die slaat op de inhoud van de bijbehorende sectie.
een element <table> moet gegevens in een raster tonen.
een element <video> wordt gebruikt om een clip af te spelen.
De volgende uitleg bij de contentcategorieën komt uit de HTML5-standaard.
Metadata content Content die de presentatie of het gedrag voorbereid van de rest van de content of de relatie voorbereid van het document met andere documenten of andere gerelateerde informatie overdraagt.
Flow content Omvat bijna alle elementen die in de body van documenten of applicaties worden gebruikt.
Sectioning content Content die het bereik definieert van headers en footers.
Heading content Beschrijft de kop van een sectie
Phrasing content Dit is de tekst van het document en omvat elementen die tekst binnen een alinea markeren. Alinea's worden gevormd door een opeenvolging van phrasing content.
Embedded content Dit is content die een andere bron in het document importeert of content in een andere webtaal.
Interactive content Content die bedoeld is voor interactie van de gebruiker.
Speciale categorieën zijn:
Palpabel content Vrij vertaald: 'tasbare' content. Wordt hier alleen vermeld voor de volledigheid en is in de dagelijkse praktijk niet relevant
Scriptondersteuning Elementen die zelf niet worden weergegeven, maar wordne gebruikt om scripts te ondersteunen.
metadata
sectioning
heading
embedded
interactive
base
article
h1
audio
a
link
aside
h2
canvas
audio1
meta
nav
h3
embed
button
noscript
section
h4
iframe
embed
script
h5
img
iframe
style
header
h6
math
img2
template
footer
object
input3
title
main
svg
keygen
video
label
div4
object2
select
textarea
video1
1 - Alleen in combinatie met het attribuut controls 2 - Alleen in combinatie met het attribuut usemap 3 - Alleen als het attribuut type niet de waarde hidden heeft 4 - div is eveneens een section categorie. Met dat verschil dat deze met een id=naam moet worden gebruikt. Daarnaast moet deze ook het liefst zo min mogelijk gebruikt worden.
Sectioning
HTML5 is in te delen in secties. Maar welke sectie gebruik je nu waarvoor? Hieronder een verklarend overzichtje.
Element
Omschrijving
<article>...</article>
Dit element vormt een volledig of zelfstandig geheel in een document, pagina, applicatie of site en is in principe onafhankelijk te verspreiden of te hergebruiken.
<section>...</section>
Dit element vormt een algemene sectie van een document of applicatie. Met sectie wordt in dit verband thematisch gerangschikte content bedoeld. Het onderwerp van elke sectie moet herkenbaar zijn, doorgaans door er een kop in op te nemen. Het element is echter alleen op zijn plaats als er een inhoudsopgave zou moeten worden opgenomen (de outline).
<nav>...</nav>
Nav markeert een navigatiesectie: een sectie in de pagina met hyperlinks naar andere pagina's of naar delen van de huidige pagina. Niet elke groep hyperlinks komt hiervoor in aanmerking. Een lijst met links naar gerelateerde onderwerpen wordt hier dus niet in geplaatst.
<aside>...</aside>
Dit element markeert een sectie van een pagina met daarin inhoud die zijdelings gerelateerd is aan de inhoud van het element dat <aside> omsluit en die afzonderlijk van die inhoud kan worden gelezen. Het element kan gebruikt worden voor typografische effecten zoals een citaat, advertenties of andere groepen navigatie-elementen.
<header>...</header>
Dit element bevat inleidende informatie voor de dichtsbijzijnde bovenliggende sectioning content of de sectioning root (<blockquote>, <body>, <fieldset>, <figure> en <td>). De inhoud kan bestaan uit een kop, maar ook een inhoudsopgave, een zoekveld, een logo enzovoort.
<footer>...</footer>
Dit element markeert de footer voor de dischtbijzinde sectioning content of sectioning root. De footer bevat gewoonlijk informatie over de auteur, links naar gerelateerde documenten, copyrightinformatie en dergelijke. Een footer kan worden opgedeeld met <section> voor secties met bijvoorbeeld bijlagen, indexen, uitgebreide colofons en uitputtende licentieovereenkomsten.
<address>...</address>
Dit element markeert contactinformatie over het document of een deel van het document. Het gaat om contactinformatie van de persoon die u kunt aanspreken over de inhoud waar het element bij hoort; de beheerder van de content.
<main>...</main>
Het element <main> markeert de belangrijkste inhoud van een document of applicatie. De inhoud van dit element is direct gerelateerd aan of een uitbreiding van het hoofdonderwerp van een document of de hoofdfunctie van een applicatie. De header, footer en navigatie van de pagina horen niet thuis in dit element.
<div>...</div>
Dit element heeft geen speciale betekenis. Het wordt alleen toegepast om inhoud te omsluiten zodat deze gemakkelijk is te benaderen voor opmaak of scripting. Dit is dan ook het laatste redmiddel mocht de inhoud niet aansluiten op één van de bovenstaande containers/elementen.
Weergave in oudere browsers
Oude browsers hebben geen instructies voor de verwerking van nieuwe HTML5-elementen. Ze weten niet of het om sectioning content, flow content of een van de andere contentcategorieën gaat. Met een script is dit op te lossen. Neem daarom het onderstaande op in de <head>-sectie van de pagina op, om te voorkomen dat de pagina er gewoon niet uit ziet.
Dit hoofdstuk legt een belangrijke basis voor het maken van webpagina's. De theoretische achtergrond is uitgebreid, maar onmisbaar om webinhoud correct te markeren. Het volgende is aan de orde geweest:
De kenmerken van HTML-documenten.
Wat elementen, tags en attributen zijn en hoe ze worden gebruikt.
Wat de toevoegingen aan HTML5 zijn en welke oude HTML-elementen zijn vervallen.
Welke basiselementen een HTML5-document moet en mag bevatten: DOCTYPE, <html>, <head>, <meta>, <link>, <title> en <body>.
Wat het HTML DOM en de outline zijn en waarom een correcte documentstructuur belangrijk is.
Nieuwe structuurelementen van HTML5: <section>, <article>, <nav>, <aside>, <header>, <footer> en <main>, en de praktische toepassingen ervan.
In het volgende hooofdstuk gaat het over de elementen waarmee tekst wordt gemarkeerd: koppen en alineatekst, maar ook tekst waarop nadruk ligt of die een andere speciale betekenis heeft. Ook het maken van lijsten, het markeren van illustraties en het gebruiik van bijzondere tekens (accentletters, euroteken en dergelijke) komen aan de orde.
