Het handboek HTML5 en CSS3

Hoofdstuk 2 - De basis van HTML5

In dit hoofdstuk:

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

Lege elementen

Lege elementen hebben alleen een openingstag en geen sluittag. Voorbeelden hiervan zijn:

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

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.
<article class=deze-naam-is-niet-uniek deze-ook-niet>
title 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:

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 pagina kan zes kopniveaus hebben

Het contentmodel van HTML5

Een contentmodel beschrijft de verwachte inhoud van een element.

De volgende uitleg bij de contentcategorieën komt uit de HTML5-standaard.

Speciale categorieën zijn:

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.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Samenvatting

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:

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.