HTML-documenten bestaan uit elementen die worden aangegeven door zogenaamde tags. Tags herken je aan de hoekige haakjes. Bijna alle HTML-elementen worden gekenmerkt door een openings- en sluitingstag. Wat zich daartussen bevindt, wordt de inhoud genoemd.
Een voorbeeld:
<h1>PSD-Tutorials.de – jouw grafisch-, web- & leerportaal</h1>
Middels deze syntax wordt een eerste niveau kop in het document geschreven. De openings <h1>-tag geeft aan de browser aan dat het om zo'n kop gaat. De sluitende </h1> beëindigt de kop. Je herkent sluitende tags aan een openings-haakje, gevolgd door een schuine streep </.
Een vraag die rijst met betrekking tot de schrijfwijze van de elementnamen: hoe zit het eigenlijk met hoofd- en kleine letters? Zoals al beschreven, ligt de focus in deze serie op HTML5. Hier kun je inderdaad kiezen tussen hoofd- en kleine letters. Persoonlijk geef ik echter de voorkeur aan consequent kleine letters en zal dat ook in deze serie zo doen. In principe zouden na HTML5 echter de volgende dingen correct zijn:
<h1>PSD-Tutorials.de – jouw grafisch-, web- & leerportaal</h1> <H1>PSD-Tutorials.de – jouw grafisch-, web- & leerportaal</H1> <h1>PSD-Tutorials.de – jouw grafisch-, web- & leerportaal</H1>
Elementen die je opent, moeten ook weer gesloten worden. Dus als je bijvoorbeeld een <h1> plaatst, dan moet je hem na het einde van de definitie van de kop ook weer sluiten met </h1>. Hoewel HTML5 hier ook uitzonderingen heeft, zoals bijvoorbeeld lijstitems en alinea's, maar daar later meer over.
In HTML zijn er overigens ook zogenaamde standalone-tags. Deze bestaan slechts uit één tag, niet uit een openings- en sluitingstag. Een typisch voorbeeld hiervan is <br />.
Dit is een regel.<br /> Dit is een andere regel.
Deze <br /> definieert een regelovergang.
Zulke lege tags sluit je normaal gesproken af met een schuine streep, ook al is dat in HTML5 niet strikt noodzakelijk. Hier zou ook het volgende werken:
<br>
Je zult in de loop van deze serie nog meer van deze standalone-tags leren kennen.
Elementen nesten
HTML-elementen kun je trouwens ook nesten. Stel je voor dat je binnen een kop een passage cursief wilt maken. Voor een cursieve weergave wordt het i-element gebruikt.
<h1>PSD-Tutorials.de – <i>jouw grafisch-, web- & leerportaal</i></h1>
Let bij het nesten op de juiste volgorde. Als laatste sluit je het element dat als eerste is geopend. In dit geval is dat dus het h1-element.
Attributen gebruiken
Binnen openingstags of standalone-tags kunnen zogenaamde attributen worden gedefinieerd. Deze attributen kunnen elementen extra eigenschappen toewijzen. In eerdere HTML-tijden werden nogal wat attributen aan elementen toegewezen. Dit werd eenvoudigweg veroorzaakt door de vermenging van structuur en design. Zo werden bijvoorbeeld kleurdefinities direct aan het HTML-element toegewezen via een overeenkomstig attribuut. Inmiddels is – natuurlijk ook dankzij CSS – een strikte scheiding van design en structuur mogelijk, die ook moet worden nageleefd. Daarom zijn er tegenwoordig slechts enkele attributen die worden gebruikt.
Een belangrijk attribuut is id. Met dit attribuut kan een HTML-element een unieke naam worden gegeven, waarmee het bijvoorbeeld via CSS of JavaScript kan worden aangesproken.
<h1 id="header">PSD-Tutorials.de – jouw grafisch-, web- & leerportaal</h1>
Om een attribuut toe te wijzen, voeg je achter de h1 een spatie toe. Daaraan volgt de naam van het attribuut, die meestal in kleine letters wordt geschreven. Na de attribuutnaam volgt het is-teken. De attribuutwaarde volgt tussen aanhalingstekens.
Je kunt een element overigens ook meerdere attributen toewijzen. Zo is het bijvoorbeeld heel gebruikelijk om een klasse en een ID voor een element te definiëren. Ook hiervan een voorbeeld: met id wordt de kop uniek geïdentificeerd. De klasse is daarentegen bedoeld om de kop in een bepaalde categorie te plaatsen. Zo kun je bepalen dat alle elementen met de klasse blauw in blauwe kleur worden weergegeven. (Meer over dit CSS- en kleurenthema volgt dan natuurlijk later uitgebreid).
<h1 id="head" class="blue">PSD-Tutorials.de - jouw grafisch, web- & leerportaal</h1>
De attributen worden in dit geval door een spatie van elkaar gescheiden.
De code valideren
Enkele basis syntaxisregels hebben jullie nu al geleerd. Vooral aan het begin, wanneer je HTML leert, is het belangrijk om je aan deze regels te houden. Wat je namelijk eenmaal verkeerd hebt aangeleerd, krijg je moeilijk weer uit je hoofd. Jullie zouden daarom jullie HTML-code altijd moeten controleren op juistheid of valideren (laten valideren). Dat hoef je natuurlijk niet zelf te doen. Hiervoor zijn er passende online tools. Een zogenaamde validator kan je bijvoorbeeld vinden op http://validator.w3.org/.
Je kunt daar het beste direct overschakelen naar het tabblad Valideren door directe input. Hier kan je de te controleren HTML-code direct kopiëren en plakken. Let er strikt op dat je de volledige code van het bestand invoegt, inclusief de DOCTYPE-verklaring.
Voeg om de validator te testen het volgende in het tekstveld in en klik vervolgens op de Valideren-knop.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de - jouw grafisch, web- & leerportaal</h1> </body> </html>
De uitkomst zou er als volgt uit moeten zien:
Alles is in orde hier. (In dit geval hoef je je niet druk te maken om de twee waarschuwingen). Als je dus de melding krijgt Dit document is succesvol gecontroleerd als HTML5!, dan is alles in orde. Maar hoe ziet het eruit bij een fout? Probeer gewoon opzettelijk een fout in de syntaxis toe te voegen.
<h1 id=head">PSD-Tutorials.de - jouw grafisch, web- & leerportaal</h1>
Hier is het aanhalingsteken bij head vergeten. Als je de syntaxis nu opnieuw laat valideren, zal de fout worden gedetecteerd.
De validator geeft vervolgens een passende melding. Wat er precies is misgegaan, kan je lezen in het onderste gedeelte van het venster.
Hier wordt dan ook mooi beschreven wat de fout eigenlijk is.
Regel 8, Kolom 12: " in een niet-gequoteerde attribuutwaarde. Mogelijke oorzaken: Attributen die samenlopen of een URL-queryreeks in een niet-gequoteerde attribuutwaarde.
<h1 id=head" >PSD-Tutorials.de</h1>
Jullie zien dus direct in welke regel een onjuiste invoer plaatsvond, en kunnen dit corrigeren. Op deze manier helpt de validator jullie om schone HTML-code te genereren. Jullie zouden altijd jullie code moeten laten valideren. Want browsers tonen HTML-code vaak correct, zelfs als de syntaxis foutief is. In andere browsers waarin jullie je sites echter niet testen, kan dit er heel anders uitzien.
