---

 HTML Basiskennis  -  Markup 

Hoe werkt HTML?

Algemeen ~ Elementen ~ Tags ~ Attributen ~ Syntax ~ Entities

Algemeen

Met behulp van zogenaamde tags in het document geef je aan uit welke elementen het document bestaat. Dit is de markup die je aanbrengt. Elementen zijn de onderdelen waarin je het document kunt verdelen. De browser interpreteert vervolgens de tags en geeft het document zo goed mogelijk weer, afhankelijk van de mogelijkheden van het gebruikte computersysteem.

Hoe de browser dat precies doet is niet interessant voor de auteur. De auteur dient te zorgen dat de markup zinvol wordt aangebracht, de browser bepaalt hoe dit zal worden weergegeven. Elke browser kan dat op zijn eigen manier doen, aangepast aan de lokale omstandigheden en mogelijkheden, en aangepast aan de wensen van de lezer van het document.

Elementen

HTML heeft o.a. tags om elementen te markeren voor hyperlinks, zes niveau's koppen, paragrafen, twee soorten nadruk, verschillende soorten lijsten, verschillende soorten citeren, tabellen, formulieren en het invoegen van plaatjes en multimedia-objecten.
Ook zijn er enkele elementen speciaal om de weergave te beïnvloeden: cursief en vet, tekst-, achtergrond- en linkkleuren, lettertype, uitlijning e.d.

Welke elementen en attributen beschikbaar zijn hangt af van de gekozen HTML-versie.

Tags

De meeste elementen hebben zowel een begin als een sluittag nodig. De starttag bestaat uit een openingshaakje <, de naam van het element, eventuele attributen van het element en een sluithaakje >. De sluittag bestaat uit: een openingshaakje <, een / (slash), de naam van het element en een sluithaakje >. Samengevat:
<ELEMENTNAAM attributen>Inhoud van het element</ELEMENTNAAM>.

Hieronder volgt een stukje van een HTML-document als voorbeeld:

<OL>
  <LI>Item 1
  <LI>Item 2
    <OL>
      <LI>Item 2.1
      <LI>Item 2.2
      <LI>Item 2.3
    </OL>
  <LI>Item 3
</OL>

Voorbeeld-weergave in jouw browser.

De tag <OL> geeft aan dat het element OL, een genummerde lijst, volgt. Met de tag <LI> geef je vervolgens aan wat de lijstonderdelen (LI, list items) zijn, en de lijst sluit af met </OL>, een sluittag.

Attributen

Sommige elementen hebben attributen. Zo heeft het element OL het attribuut type, dat verschillende waardes kan hebben. Met de waarde a wordt aangegeven dat de nummering van het type "kleine letters" is. Andere mogelijke waarden voor het attribuut type zijn: A, i, I en 1.

Het vorige voorbeeld wordt aangepast:

<OL type="I">
  <LI>Item 1
  <LI>Item 2
    <OL type="a">
      <LI>Item 2.1
      <LI>Item 2.2
      <LI>Item 2.3
    </OL>
  <LI>Item 3
</OL>

Voorbeeld-weergave in jouw browser.

Syntax

Tabs, meervoudige spaties en regeleindes in het HTML-bestand worden door de browser samengevat tot één spatie. De browser bepaalt zelf waar de regeleindes komen, afhankelijk van de venstergrootte. Dit biedt de mogelijkheid om een HTML-document netjes te formatteren, zodat het met de hand is te bewerken. Maar je kunt ook alle tags achter elkaar zetten.

De meeste elementen hebben zowel een begin- als een sluittag nodig, maar soms is alleen een starttag nodig. Een lijst (OL) kan alleen lijstonderdelen (LI) bevatten. Maar lijstonderdelen kunnen geen andere lijstonderdelen omvatten. Dus als er een tweede <LI> volgt op een eerste <LI>, 'weet' de browser dat het eerste LI-element is afgesloten. De afsluitende tag </LI> is dan ook niet verplicht.

Het vorige voorbeeld kan ook korter worden geschreven:

<OL type="I"><LI>Item 1<LI>Item 2<OL type="a"><LI>Item 2.1<LI>Item 2.2<LI>Item 2.3</OL><LI>Item 3</OL>

Dit levert echter moeilijk onderhoudbare documenten op. Ook heeft Netscape Navigator er moeite mee als elementen niet netjes worden afgesloten, en er kunnen verschillen in weergave ontstaan. Het wordt aanbevolen om in ieder geval alle sluittags voor tabel-elementen te gebruiken.

Attribuutwaarden dienen meestal tussen aanhalingstekens te worden geplaatst, bij: width="100%". Alleen als de attribuutwaarde enkel uit cijfers, letters, mintekens (-) en/of punten bestaat mogen de aanhalingstekens worden weggelaten. Ze kunnen echter nooit kwaad.

Let erop dat de elementen elkaar niet gedeeltelijk overlappen: <EM>extra <STRONG>veel</EM> nadruk</STRONG> is verkeerde markup! Verder moeten inline elementen worden afgesloten voordat een nieuw blok-element kan beginnen -dat hangt samen met de structurele opbouw van HTML.

Entities

Hoe geef je nu een haakje als < weer, zonder dat de browser er gelijk een tag achter zoekt? En hoe geef je tekens weer die niet in de basis-ASCII tekenset zitten? Daarvoor is de entity reference bestemd. De browser zal een entity reference vervangen door de bijbehorende entity (= een teken). Er zijn entity references voor allerlei tekens, maar de meeste browsers herkennen ze niet allemaal. De belangrijkste entities die door bijna alle browsers worden herkend, zijn hieronder in een tabel gezet.

Entity reference	staat voor het teken:
&lt;	<
&gt;	>
&amp;	&
&copy;	©
&nbsp;	(een niet-brekende spatie)
&euml;	ë	combinaties met andere klinkers analoog
&egrave;	è
&eacute;	é
&ecirc;	ê
&Egrave;	È
&Ecirc;	Ê
&auml;	ä
&iuml;	ï
&uuml;	ü

 

---