webontwerp
[Alt]+	gaat naar
Accesskeys
S	Sla sectienavigatie over
0	overzicht
1	content
2	techniek
3	html
4	css
5	liquid design
6	overwegingen
B	bronnen
G	glossary

Hyper Text MarkupLanguage

Hyper Text Markup Language, HTML, is een taal waarin je webpagina's kan schrijven, opbouwen. Het voegt elementen en attributen, de markup, toe aan inhoudelijke tekst en geeft de inhoud daarmee structuur.
Een wat langere tekst kan je zo opknippen in verschillende, opeenvolgende paragrafen. Tussen de paragrafen zet je kopjes, die duidelijk aangeven wat het volgende deel van de pagina gaat behandelen. Waar nodig voeg je lijsten en tabellen toe.

Met html wordt de pagina dus gestructureerd, niet vormgegeven. Vormgeving is een ander hoofdstuk.

Het schrijven van HTML vergt enige discipline. Pagina's moeten in een bepaalde structuur worden opgesteld. Het aantal typen elementen dat je kan gebruiken is heel groot, maar met kennis over slechts zo'n tien of twaalf verschillende, kan je al een heel eind komen.

In mijn artikel Eenvoud van november 2004, ga ik dieper in op het hoe en wat van gestructureerd en semantisch werken met HTML. Een prima artikel als achtergrondinformatie bij deze pagina.

in deze sectie 'HTML':

elementen
attributen
structuur

Belangrijke HTML-elementen

De elementen, die ik zelf veel gebruik in de body van de pagina, zijn:

Voor gewone paragrafen tekst: <p>;
En voor bijzondere paragrafen (die een bepaalde opmaak vergen bijvoorbeeld) <div>; ook gebruikt om een samenhangend gedeelte van mijn pagina nauwkeurig te kunnen positioneren en of bepaalde afmetingen te kunnen meegeven (via mijn style sheet, uiteraard); net zo belangrijk is <span> om een stukje inline content te onderscheiden van zijn omgeving, mits er geen beter element beschikbaar is;
Voor tekstkoppen en -kopjes: <h1>, <h2>, <h3> en <h4>, waarbij geldt, dat hoe hoger het nummer van de element, hoe dieper het kopje in de structuur van de pagina zit, hoe minder belangrijk de tekst van het kopje is, zeg maar;
Voor het juist weergeven van tabulaire data: <table> met daarbij horend <thead> voor een tabelkop, <tfoot> voor een tabelvoet, <caption> voor een bijschrift, <tr> voor de rijen en <th> en <td> voor de cellen van de tabel met de kopjes en de data;
Voor het eenvoudig opstellen en weergeven van lijsten: <ol> voor genummerde lijsten en <ul> voor lijsten waarvan de volgorde van de onderdelen er niet toe doet; hier hoort natuurlijk ook het element <li> bij, om de verschillende elementen in de lijst te kunnen plaatsen;
Voor het weergeven van afbeeldingen: <img>;
Voor het opnemen van verwijzingen: het anchor element, <a href="">, waarmee de bezoeker eenvoudig van de ene naar de andere pagina in mijn site kan gaan, maar ook naar pagina's van andere sites;
Voor het plaatsen en kunnen opmaken van inline elementen: het <span> attribuut is onmisbaar; hiermee kan je eenvoudig midden in een paragraaf of div een gedeelte van je content volledig van uiterlijk doen veranderen.
Om een afkorting te laten verklaren, gebruik ik <acronym>, met een ingevulde [title], waarvoor ik in mijn stylesheet heb gedefinieerd wat de opmaak moet zijn. Voor afkortingen die ik slechts in de markup als zodanig herkenbaar wil hebben (zodat bijvoorbeeld voorleesbrowsers weten wat ze moeten doen) gebruik ik <abbr> zonder enige opmaak. Dit naast elkaar gebruiken, de ene met en de andere zonder herkenbare opmaak, voorkomt verwarring bij de bezoeker.
Voor het opnemen van de inhoud van de ene html-pagina in een andere: <iframe>, waarmee op de gewenste plaats en met de gewenste grootte snel wisselende content kan worden toegevoegd aan meerdere pagina's tegelijk;

Deze verschillende elementen in HTML kennen en begrijpen en je kan al pagina's bouwen voor het internet. HTML blijkt veel simpeler dan allerlei wizzkids het doen voorkomen.

discussiegroep: PretLetters Bekijk de discussiegroep op groups.google.com

Attributen bij HTML-elementen

Veel elementen van HTML versie 4 hebben een aantal attributen. Veel attributen zijn bedoeld voor opmaakkenmerken van een element. Bijvoorbeeld de hoogte en breedte van een afbeelding of de grootte van een lettertype.
Dit soort attributen gebruik ik zo min mogelijk. Ik voeg de gewenste opmaakkenmerken liever toe aan mijn style sheet waar ik ze overzichtelijk bij elkaar kan houden en eenvoudig kan aanpassen voor heel mijn site als ik dat wens.

Mijn pagina over CSS gaat uitvoerig in op het gebruiken van style sheets.

Andere attributen gaan niet over opmaak, maar over het bieden van toegevoegde waarde, het vergroten van de toegankelijkheid van de geboden informatie en van de bruikbaarheid van je site, zoal bijvoorbeeld het attribuut [title] bij een hyperlink en [alt] voor een afbeelding. Deze benut ik juist zo veel als mogelijk. Daarmee probeer ik te bereiken dat bezoeker, die de pagina's van mijn site gepresenteerd krijgen op een andere manier dan via een moderne, grafische browser, toch die belangrijke en aanvullende informatie beschikbaar hebben.

Nog zo'n zeer bruikbaar attribuut is [id], waarmee je een punt in je pagina een unieke naam, een identity afgekort tot id, kan geven. Als een punt een uniek [id] heeft, kan je via een simpele verwijzing met het element <a href="#id"> je bezoeker rechtstreeks naar dat punt in de pagina laten springen.
Dit attribuut staat ook wel bekend als een bookmark.

In mijn artikel Accessibility en Usability, Toegankelijkheid en Bruikbaarheid, van november 2004, ga ik dieper in op het waarom achter het gebruiken van dit soort attributen. Een nuttig artikel met relevante achtergrondinformatie bij deze pagina.

Andere codes in de html-markup

Ik gebruik nog andere dingen in de markup van mijn pagina's. Daar horen bijvoorbeel <b>, <u> en <i> bij om teksten respectievelijk bold, underlined of italic weer te laten geven.

Ook gebruik ik <br> om een regel te laten afbreken, wanneer ik dat opportuun vind. Ik probeer te voorkomen om te veel te vertrouwen op <br> om paragrafen te creëren. Daar zijn die breaks namelijk niet voor bedoeld.
Toch gebruik ik ze daar soms wel voor. Meestal om binnen een <div> met een wat complexere opmaak de indruk van losse paragrafen te wekken. Zo voorkom ik dat ik die complexe opmaak op het oog tot één geheel moet maken. Maar, eerlijk is eerlijk, het hoort niet zo.

Standaard paginastructuur

Een standaard HTML pagina heeft in ieder geval de volgende, zeer basale, structuur:


<!DOCTYPE declaratie>

<html>

<head>

<!-- Waarin ondermeer META-tags, titel en links
    naar externe documenten -->

</head>

<body>

<!-- Waarin de inhoud van de pagina wordt geplaatst,
    goed gestructureerd -->

</body>

</html>

Meer is het niet.

Basis-invulling structuur HTML-pagina's

Ik houd me aan die beproefde, standaard paginastructuur in mijn HTML broncode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<!--
<META-tags>, waarvan de belangrijkste zijn:
-->
   <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">
   <meta http-equiv="Content-Script-Type"
    content="text/javascript">
   <meta http-equiv="Content-Style-Type"
    content="text/css">
   <meta http-equiv="content-language"
    content="nl">

<!--
en voor de vorm (er zijn nog zoekmachines die wat doen
hiermee):
-->
   <meta  name="description"
   content="Omschrijving van de individuele pagina, dus
   niet van de hele site!">
   <meta  name="keywords"
   content="Woorden waarvan je denkt dat potentiële
   bezoekers ze zullen gebruiken om jouw onderwerp te
   vinden via zoekmachines; beperk je tot wat je
   pagina echt aan inhoud bevat!">

   <title>De paginatitel is heel belangrijk, voor
       ondermeer goede vindresultaten in zoekmachines
       als Google. Besteed dus aandacht aan een goede
       titel.</title>

<!--
<link-tags>, om externe style sheets
en het site-icoontje aan de pagina te koppelen:
-->
  <link rel="stylesheet"
     type="text/css"
     media="screen,projection"
     href="../stylesheets/stijlblad.css">
  <link rel="stylesheet"
     type="text/css"
     media="print"
     href="../stylesheets/print.css">
  <link rel="shortcut icon"
     href="../afbeeldingen/pretletters.ico">

<!--
Andere <link-tags>, om een pagina menu aan
te bieden in browsers die dat ondersteunen,
zoals Opera en FireFox:
-->
  <link rel="Home" title="Home page"
     type="text/html" href="home.html">
  <link rel="Index" title="Site map"
     type="text/html" href="index.html">
  <link rel="Contents" title="ToC"
     type="text/html" href="toc.html">
  <link rel="Search" title="Zoeken"
     type="text/html" href="zoek.html">
  <link rel="Glossary" title="Begrippen en Definities"
     type="text/html" href="begrippen.html">
  <link rel="Help" title="Help via e-mail"
     type="text/html" href="mailto:foo@bar">
  <link rel="Author" title="Over de auteur"
     type="text/html" href="auteur.html">
  <link rel="Copyrights" title="Verklaring van
           copyrights en beperkte aansprakelijkheid"
     type="text/html" href="copyright.html">
  <link rel="Up" title="Niveau omhoog in de site"
     type="text/html" href="foo.html">
  <link rel="First" title="Eerste"
     type="text/html" href="eerste.html">
  <link rel="Previous" title="Vorige"
     type="text/html" href="vorige.html">
  <link rel="Next" title="Volgende"
     type="text/html" href="volgende.html">
  <link rel="Last" title="Laatste"
     type="text/html" href="laatste.html">
  <link rel="Alternate" title="RSS Feed
           van dit gedeelte van de site"
    type="application/rss+xml" href="rssfeed.xml">

<!--
Op eenzelfde manier kan je ook een extern bestand met
scripts (bijvoorbeeld JavaScript) aanroepen in
je pagina.
-->

</head>

<body>

<div id="description">
  Korte omschrijving van de pagina.
</div>

<div id="preload">
  <img>
  <img>
  <!-- images die moeten worden voorgeladen -->
</div>

<div id="toptext">
  <h1>Pagina titel</h1>
</div>

<div id="content">

<p>De inleidende paragraaf</p>

<div id="pagemenu">
<p>in deze pagina:</p>
<ul>
   <li>
      <a href="#id_1"
       title="de verwijzing naar het
       eerste subkopje">subkopje 1</a></li>
   <li>
      <a href="#id_3"
       title="de verwijzing naar het
       tweede subkopje">subkopje 2</a></li>
   <li>
      <a href="#id_3"
       title="de verwijzing naar het
       derde subkopje">en zo voort</a></li>
</ul>
</div>

<!-- Waarbij de class="pagemenu" uiteraard in mijn
style sheet is gedefinieerd. -->

<p>Een volgende paragraaf
</p>

<h2 id="id_1">Het eerste subkopje</h2>

<p>Met inhoudelijke paragrafen
</p>

<div>of inhoud in divs gestopt.
</div>

<h2 id="id_2">Het tweede subkopje</h2>

<!-- En zo verder. Steeds de inhoudelijke tekst
logisch opknippen in paragrafen met kopjes en
subkopjes.
Ook <h3> en <h4> gebruik ik, als de diepgang van de
behandeling van een onderwerp dat rechtvaardigt. -->

</div>

<div id="menu">

<!-- een lijst van hyperlinks die op een gestructureerde
manier verwijzen naar de overige pagina's van de site -->

<ul>
    <li><a href="index.html">Index</a></li>
    <li>Onderwerp 1</li>
    <ul>
        <li>sub 1.1</li>
        <li>sub 1.2</li>
    </ul>
    <li>Onderwerp 2</li>
    <li>Onderwerp 3</li>
    <li>Onderwerp 4</li>
    <ul>
        <li>sub 4.1</li>
        <li>sub 4.2</li>
        <li>sub 4.3</li>
    </ul>
    <li>Onderwerp 5</li>
    <li>En zo voort</li>
</ul>

<!-- Ook de volgende elementen zijn opgenomenin
deze box, zoals: -->

<div class="atomz">
<!--
  met het zoekvakje dat door Atomz wordt verzorgd;
-->
</div>

<div class="nedstat">
<!--
  met de bezoekersteller van NedStat.
-->
</div>

</div>

</body>

</html>

Deze structuur en de onderlinge elementen hebben zich in de loop der tijd ontwikkeld als bruikbaar, zinvol en eenvoudig toe te passen op al mijn pagina's. Ik heb geen reden om hier van af te wijken. Het is zeer basaal en nagenoeg iedere browser zal hier goed mee kunnen omgaan, ook als de opmaak, zoals opgenomen in mijn style sheet, niet wordt gebruikt door de browser, zoals bijvoorbeeld bij een tekstbrowser het geval is.

De markup voor de pagina is ondergebracht in verschillende divjes. In het voorbeeld zie je de volgende terugkomen:

description
preload
toptext
content
- pagemenu
menu

Deze divjes gebruik ik om de verschillende delen van de pagina, zoals de paginakop, het menu en de inhoud, ieder hun eigen uiterlijk en plaats te geven in de mainstream, grafische browsers. De plaats op het scherm is hierbij volledig onafhankelijk van de plaats in de markup.
Zo kan ik het menu en de achtergrondplaatjes voor de pagina's helemaal onderin mijn code stoppen, terwijl ze op het scherm als een kolom of helemaal bovenaan het scherm verschijnen. Dit geeft me grote flexibiliteit in enerzijds wat belangrijk is in de markup voorop zetten en anderzijds het uiterlijk van de pagina's toch goed beheersen.

De reden het menu en de externe elementen helemaal aan het einde van een pagina te plaatsen, is de volgende:
Voor de externe elementen geldt nu, dat de pagina zal laden, onafhankelijk van het al of niet up zijn van de server waar die elementjes vandaan moeten komen;
Voor het plaatsen van het menu geldt, dat in het geval dat de pagina zonder opmaakkenmerken wordt getoond, het menu helemaal onder aan de pagina staat. Dat betekent dat een bezoeker niet steeds opnieuw eerst voorbij het hele menu moet fietsen om bij de inhoud van de pagina te komen. Bovendien, als de bezoeker de pagina heeft gelezen, is hij inmiddels bij het menu aangeland en kan eenvoudig naar een volgende pagina in mijn site klikken.
Dit geldt ook voor de achtergrondplaatjes bij de titel. Vooral bij het tonen in een smal venstertje, zoals van een PDA, is het voor de bezoeker plezierig dit soort decoratieve elementen niet prominent te zien te krijgen. Door de achtergrondplaatjes van de paginakop helemaal achteraan in de markup te plaatsen bereik je dat precies.

Markup van de pagina, werkwijze

In de markup pas ik consequent het volgende toe:

[title] attribuut bij hyperlinks, afbeeldingen en afkortingen, zodat de bezoeker via onder andere tooltips steeds weer een verklaring krijgt bij wat er op het scherm te zien en klikken valt;
[alt] attribuut bij alle afbeeldingen, zodat in een browser zonder afbeeldingen de toegevoegde waarde ervan niet verloren gaat, waarbij afbeeldingen die niet illustratief zijn, maar voor het algemene uiterlijk van de pagina worden gebruik een leeg [alt] attribuut meekrijgen;
<acronym> om afkortingen te duiden en te verklaren met een tooltip in het [title] attribuut en <abbr> voor het alleen in de markup aangeven dat iets een afkorting is;
Het gebruik van <table> beperken tot die inhoud die werkelijk tabulaire data bevat en niet toepassen om elementen van de pagina's op een bepaalde manier gepresenteerd te krijgen;
Iedere tabel voorzien van een doordachte structuur en deze omschrijven in het [summary] attribuut van het <table> element;
Waar logisch, goed gebruik maken van lijsten met <ol>, zoals voor deze opsomming, en <ul>, zoals voor ongenummerde lijsten;
Het uiterlijk van allerlei elementen, zoals <p>, <h1>, <h2> en <table> of <ol> en <ul>, definiëren in mijn style sheet en niet in de pagina's zelf, zodat de presentatiekenmerken maar één maal door een bezoeker hoeven te worden gedownload (scheelt downloadtijd voor volgende pagina's) en ik maar op één plaats hoef te werken aan het uiterlijk van mijn site, ongeacht uit hoeveel pagina's die nou bestaat;
Grondig en secuur letten op en toepassen van HTML characters, zoals ë voor een ë, € voor het €-teken of " voor een ", zodat die tekens goed kunnen worden weergegeven in browsers;
Waar de broncode wat complexer wordt, commentaren opnemen met , zodat ik achteraf nog goed weet wat er in mijn pagina's staat, waar en waarom;
voor nagenoeg ieder opmaakkenmerk gebruik maken van classes, die in mijn externe style sheet zijn gedefinieerd, zodat markup en presentatie zo veel als mogelijk gescheiden zijn en blijven;
Meer daarover in de pagina over cascading style sheetsstylesheets.

Daarnaast streef ik naar het voorkomen van fouten of ze voor publicatie verbeteren, zowel in teksten (spel-, taal- en stijlfouten) als in de markup. Spellingcontroles en het valideren van de broncode is inmiddels een goede gewoonte van me.

Overig

ANSI-Codes

Ik heb voor TextPad twee bestandjes gemaakt, die te gebruiken zijn als bron voor speciale tekens (ANSI). Het staat je vrij om deze bestandjes te downloaden voor eigen gebruik, maar verdere verspreiding is verboden. Ze vallen onder de auteurswet.
De bestandjes:

inhoud	voorbeeld	bestand
In TextPad Griekse letters (als ANSI-code) invoegen	bekijk	download
In TextPad een selectie van symbolen, pijlen en spaties (als ANSI-code) invoegen	bekijk	download
In Textpad de standaardset letters, cijfers, tekens en symbolen invoegen (als ANSI-code)	geen voorbeeld	download

Startpunt

Een prima pagina om te beginnen met het leren van HTML is bij het W3C: HTML, een startpunt.
Bij het W3C is ook de technische specificatie van HTML 4.01 te vinden en kan je je code laten valideren.

site navigatie, [Alt]+
Accesskeys
Index	Quick scan	Vrije tijd	Tekenen	Zweefvliegen	Werk	Dagboek	WebOntwerp	Mark-up	Css	Pastletters	Links	Reageer

disclaimer
auteur

Webontwerp