7 De globale structuur van een HTML document

Inhoud

  1. Introductie tot de structuur van een HTML document
  2. HTML versie informatie
  3. Het HTML element
  4. Het document hoofd
    1. Het HEAD element
    2. Het TITLE element
    3. Het title attribuut
    4. Meta data
  5. Het document lijf
    1. Het BODY element
    2. Element identificatie: de id en class attributen
    3. Block-level en inline elementen
    4. Elementen groeperen: de DIV en SPAN elementen
    5. Hoofdingen: de H1, H2, H3, H4, H5, H6 elementen
    6. Het ADDRESS element

7.1 Introductie tot de structuur van een HTML document

Een HTML 4 document is opgebouwd uit drie stukken:

  1. een lijn die de HTML versie informatie bevat,
  2. een verklarend kopstuk (afgebakend door het HEAD element),
  3. een lijf, welk de eigenlijke inhoud van het document bevat. Het lijf kan geïmplementeerd worden door het BODY element of het FRAMESET element.

Witruimte (spaties, nieuwe regels, tabs en opmerkingen) mag voorkomen voor of na elke sectie. Secties 2 en 3 zouden moeten worden afgebakend door het HTML element.

Hier is een voorbeeld van een eenvoudig HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>Mijn eerste HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hallo wereld!
   </BODY>
</HTML>

7.2 HTML versie informatie

Een geldig HTML document geeft aan welke versie van HTML gebruikt wordt in het document. De document type declaratie geeft de document type definitie (DTD) aan die in gebruik is voor het document (zie [ISO8879]).

HTML 4.01 specificeert drie DTD's zodat auteurs één van de volgende document type declaraties in hun documenten moeten opnemen. De DTD's verschillen in de elementen die ze ondersteunen.

De URI in elk document type declaratie laat User Agents toe om de DTD en alle entiteitssets die nodig zijn te downloaden. De volgende (relatieve) URI's verwijzen naar DTD's en entiteitssets voor HTML 4:

De binding tussen publieke identificatie en bestanden kan gespecificeerd worden door gebruik te maken van een catalogusbestand dat het formaat volgt aanbevolen door het Oasis Open Consortium (zie [OASISOPEN]). Een voorbeeld catalogusbestand voor HTML 4.01 is opgenomen in het begin van het deel over SGML referentie informatie voor HTML. De laatste twee letters van de declaratie geven de taal van de DTD aan. Voor HTML is dit steeds Engels ("EN").

Nota. Vanaf de versie van 24 december van HTML 4.01 hanteert de HTML Working Group het volgende beleid:

Dit betekent dat auteurs in een document type declaratie veilig gebruik mogen maken van een systeem identificatie die verwijst naar de laatste versie van een HTML 4 DTD. Auteurs mogen ook kiezen om een systeem identificatie te gebruiken die verwijst naar een specifieke (gedateerde) versie van een HTML 4 DTD wanneer validatie tot deze specifieke DTD vereist is. W3C zal alle mogelijke moeite doen om archief documenten eindeloos beschikbaar te houden op hun originele adressen in hun originele vorm.

7.3 Het HTML element

<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- document hoofd element -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

Start tag: optioneel, Eind tag: optioneel

Attribuut definities

version = cdata [CN]
Afgekeurd. De waarde van dit attribuut specificeert welke HTML DTD versie geldt in het huidige document. Dit attribuut is afgekeurd omdat het redundant is met de versie informatie die door de document type declaratie gegeven wordt.

Attributen elders gedefinieerd

Na de document type declaratie zit de rest van een HTML document omvat door het HTML element. Een typisch HTML document heeft dus deze structuur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
...het hoofd, het lijf, enz. komt hier...
</HTML>

7.4 Het document hoofd

7.4.1 Het HEAD element

<!-- %head.misc; eerder gedefinieerd als "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document hoofd -->
<!ATTLIST HEAD
  %i18n;                               -- lang, dir --
  profile     %URI;          #IMPLIED  -- benoemd woordenboek van meta info --
  >

Start tag: optioneel, Eind tag: optioneel

Attribuut definities

profile = uri [CT]
Dit attribuut specificeert de locatie van één of meer meta data profielen, gescheiden door witte ruimte. Voor toekomstige uitbreidingen zouden User Agents moeten overwegen dat de waarde een lijst is hoewel deze specificatie enkel de eerste URI als betekenisvol beschouwd. Profielen worden verderop besproken in het deel over meta data.

Attributen elders gedefinieerd

Het HEAD element bevat informatie over het huidige document zoals de titel, trefwoorden die bruikbaar kunnen zijn voor zoekrobots en andere data die niet beschouwd wordt als document inhoud. User Agents geven in het algemeen de elementen die voorkomen in het HEAD element niet als inhoud weer. Ze mogen echter informatie in het HEAD beschikbaar maken voor gebruikers via andere mechanismen.

7.4.2 Het TITLE element

<!-- Het TITLE element wordt niet beschouwd als een onderdeel van de tekststroom.
       Het zou moeten weergegeven worden, bijvoorbeeld als het paginahoofd of als
       venstertitel. Er is precies één titel vereist per document.
    -->
<!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- document titel -->
<!ATTLIST TITLE %i18n>

Start tag: vereist, Eind tag: vereist

Attributen elders gedefinieerd

Elk HTML document moet een TITLE element in de HEAD sectie hebben.

Auteurs zouden het TITLE element moeten gebruiken om de inhoud van een document aan te geven. Omdat gebruikers dikwijls documenten buiten verband raadplegen, zouden auteurs inhouds-rijke titels moeten voorzien. In plaats van een titel zoals "Introductie" te gebruiken, welke niet voldoende verbandhoudende achtergrondinformatie biedt, zouden auteurs een titel zoals "Introductie tot Middeleeuws bijen-houden" in de plaats moeten gebruiken.

Voor toegangkelijkheidsredenen moeten User Agents altijd de inhoud van het TITLE element beschikbaar maken aan gebruikers (inclusief TITLE elementen die voorkomen in frames). Het mechanisme om dit te doen hangt af van de User Agent (bijvoorbeeld als een onderschrift, kop).

Titels mogen karakter entiteiten bevatten (voor geaccentueerde karakters, speciale karakters, enz.), maar mogen geen andere opmaak (inclusief opmerkingen) bevatten. Hier volgt een voorbeeld document titel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Rrn studie van bevolkingsdynamica</TITLE>
... andere hoofd elementen...
</HEAD>
<BODY>
... document lijf...
</BODY>
</HTML>

7.4.3 Het title attribuut

Attribuut definities

title = text [CS]
Dit attribuut biedt adviesinformatie over het element waarvoor het geplaatst is.

In tegenstelling tot het TITLE element, welk informatie biedt over een volledig document en slechts één keer mag voorkomen, mag het title attribuut zo vaak als nodig voorkomen in elementen. Raadpleeg de definitie van een element om na te gaan of het dit attribuut ondersteunt.

Waarden van het title attribuut kunnen op verschillende manieren weergegeven worden door User Agents. Visuele browsers geven bijvoorbeeld de titel vaak weer als een "tool tip" (een korte boodschap die verschijnt wanneer de aanwijzer stopt boven een object). Audio User Agents kunnen de titelinformatie op een gelijkaardige manier uitspreken. Wanneer bijvoorbeeld het attribuut gebruikt wordt op een link, dan laat dit toe dat User Agents (visueel and niet-visueel) vertellen wat de aard van de gelinkte bron is:

...tekst...
Here's a photo of 
<A href="http://ergens.com/geweldigmateriaal.gif" title="Ik diepzeeduikend">
   Ik diepzeeduikend vorige zomer
</A>
...meer tekst...

Het title attribuut heeft een aanvullende rol wanneer het gebruikt wordt met het LINK element om aan te het externe style sheet aan te geven. Raadpleeg het deel over links en style sheets voor details.

Nota. Om de kwaliteit van spraak synthese voor slecht verwerkte gevallen van de standaard technieken te verbeteren kunnen toekomstige versies van HTML een attribuut bevatten voor encodering van phonetische en prosodische informatie.

7.4.4 Meta data

Nota. Het W3C Resource Description Framework (zie [RDF10]) werd een W3C Aanbeveling in februari 1999. RDF laat auteurs toe om machine-leesbare metadata over HTML documenten en andere network-toegankelijke bronnen te specifiëren.

HTML laat auteurs toe om meta data -- informatie over een document in plaats van de document inhoud -- te specifiëren op verscheidene manieren.

Om bijvoorbeeld de auteur van een document te specifiëren, kan men gebruik maken van het META element zoals hier volgt:

<META name="Author" content="Dave Raggett">

Het META element specificeert een eigenschap (hier "Author"(=auteur)) en wijst een waarde eraan toe (hier "Dave Raggett"(=originele auteur Engelstalig document)).

Deze specificatie definieert geen set van legale meta data eigenschappen. De bedoeling van een eigenschap en de set van legale waarden voor die eigenschap zouden gedefinieerd moeten worden in een referentie woordenboek dat een profile genoemd wordt. Een profile ontworpen om zoekrobots te helpen met indexeren van documenten zou bijvoorbeeld eigenschappen mogen definieren zoals "author", "copyright", "keywords", enz.

Meta data specifiëren 

Algemeen impliceert de specificatie van meta data twee stappen:

  1. Declaratie van een eigenschap en een waarde voor die eigenschap. Dit kan op twee manieren gedaan worden:
    1. Binnen het document zelf, via het META element.
    2. Buiten het document, door linking naar meta data via het LINK element (zie het deel over link types).
  2. Verwijzing naar een profile waar de eigenschap en de legale waarden ervoor gedefinieerd zijn. Gebruik om een profile toe te wijzen het profile attribuut van het HEAD element.

Merk op dat omdat een profile gedefinieerd is voor het HEAD element, hetzelfde profile geldt voor alle META en LINK elementen in de document head.

User Agents moeten geen ondersteuning bieden voor meta data mechanismen. Deze specificatie definieert niet hoe meta data geïnterpreteerd zou moeten worden voor User Agents die kiezen om meta data te ondersteunen.

The META element 

<!ELEMENT META - O EMPTY               -- algemene meta-informatie -->
<!ATTLIST META
  %i18n;                               -- lang, dir, voor gebruik met inhoud --
  http-equiv  NAME           #IMPLIED  -- HTTP response header naam  --
  name        NAME           #IMPLIED  -- meta-informatie naam --
  content     CDATA          #REQUIRED -- geassocieerde informatie --
  scheme      CDATA          #IMPLIED  -- selectie van de vorm van de inhoud --
  >

Start tag: vereist, Eind tag: verboden

Attribuut definities

Voor de volgende attributen zijn de toegestane waarden en hun interpretatie profile afhankelijk:

name = name [CS]
Dit attribuut identificeerdt een eigenschapnaam. Deze specificatie geeft geen lijst van legale waarden voor dit attribuut.
content = cdata [CS]
Dit attribuut specificeert een eigenschapswaarde. Deze specificatie geeft geen lijst van legale waarden voor dit attribuut.
scheme = cdata [CS]
Dit attribuut benoemd een schema te gebruiken om de eigenschapswaarden te interpreteren (zie het deel over profiles voor details).
http-equiv = name [CI]
Dit attribuut kan gebruikt worden in de plaats van het name attribuut. HTTP servers gebruiken dit attribuut om informatie te verzamelen voor HTTP response message headers.

Attributen elders gedefinieerd

Het META element kan gebruikt worden om eigenschappen van een document te identificeren (bijvoorbeeld auteur, vervaldatum, een lijst van sleutelwoorden, enz.) en waarden toe te wijzen aan die eigenschappen. Deze specificatie definieert geen normatieve set van eigenschappen.

Elk META element specificeert een eigenschap/waarde paar. Het name attribuut identificeert de eigenschap en het content attribuut specificeerd de eigenschapswaarde.

De volgende declaratie legt bijvoorbeeld de waarde vast voor de Author eigenschap:

<META name="Author" content="Dave Raggett">

Het lang attribuut kan gebruikt worden met META om de taal voor de waarde van het content attribuut te specifiëren. Dit laat spraak synthesizers toe om taalafhankelijke uitspraakregels toe te passen.

In dit voorbeeld wordt de naam van de auteur vastgelegd als Frans:

<META name="Author" lang="fr" content="Arnaud Le Hors">

In dit voorbeeld wordt de naam van de auteur vastgelegd als Nederlands:

<META name="Author" lang="nl" content="Andy Camps">

Nota. Het META element is een algemeen mechanisme voor specificatie van meta data. Sommige HTML elementen en attributen behandelen al bepaalde delen van meta data en deze kunnen beter gebruikt worden door auteurs in de plaats van META om deze delen te specifiëren: het TITLE element, het ADDRESS element, de INS en DEL elementen, het title attribuut en het cite attribuut.

Nota. Wanneer een eigenschap gespecificeerd door een META element een waarde aanneemt die een URI is, dan prefereren sommige auteurs om de meta data te specifiëren via het LINK element. De volgende meta data declaratie:

<META name="DC.identifier"
      content="http://www.ietf.org/rfc/rfc1866.txt">

mag dus ook geschreven worden als:

<LINK rel="DC.identifier"
         type="text/plain"
         href="http://www.ietf.org/rfc/rfc1866.txt">
META en HTTP headers

Het http-equiv attribuut kan gebruikt worden in de plaats van het name attribuut en heeft een speciale betekenis wanneer documenten opgehaald worden via het Hypertext Transfer Protocol (HTTP). HTTP servers kunnen de eigenschapsnaam gespecificeerd door het http-equiv attribuut gebruiken om een [RFC822]-style header te maken in de HTTP response. Raadpleeg de HTTP specificatie ([RFC2616]) voor details over geldige HTTP headers.

Het volgende voorbeeld van META declaratie:

<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

zal resulteren in de HTTP header:

Expires: Tue, 20 Aug 1996 14:25:27 GMT

Dit kan gebruikt worden door caches om te bepalen of er een verse copie gehaald moet worden van dit document.

Nota. Sommige User Agents ondersteunen het gebruik van META om de huidige pagina te verversen na een bepaald aantal seconden, met de optie om de pagina te vervangen door een ander URI. Auteurs zouden geen gebruik mogen maken van deze techniek om gebruikers door te sturen naar andere pagina's, omdat dit de pagina ontoegankelijk maakt voor sommige gebruikers. Automatische doorsturing zou in plaats daarvan gedaan moeten worden door gebruik van server-side redirects.

META en zoekrobots

Een algemeen gebruik voor META is om trefwoorden te specifiëren die een zoekrobot kan gebruiken om de kwaliteit van de zoekresultaten te verbeteren. Wanneer verschillende META elementen taal-afhankelijke informatie voorzien over een document, dan kunnen zoekrobots filteren op het lang attribuut om de zoekresultaten te weer te geven door gebruik te maken van de taalvoorkeur van de gebruiker. Bijvoorbeeld,

<-- Voor mensen die US Engels spreken -->
<META name="keywords" lang="en-us" 
         content="vacation, Greece, sunshine">
<-- Voor mensen die British Engels spreken -->
<META name="keywords" lang="en" 
         content="holiday, Greece, sunshine">
<-- Voor mensen die Frans spreken -->
<META name="keywords" lang="fr" 
         content="vacances, Gr&egrave;ce, soleil">
<-- Voor mensen die Nederlands spreken -->
<META name="keywords" lang="nl" 
         content="vakantie, Griekenland, zon">         

De effectiviteit van zoekrobots kan ook verhoogd worden door gebruik te maken van het LINK element om links te specifiëren naar vertalingen van het document in andere talen, links naar versies van het document in andere media (bijvoorbeeld PDF), en wanneer het document deel uitmaakt van een collectie, links naar een passend startpunt voor het bladeren door de collectie.

Meer hulp is voorzien in het deel over zoekrobots helpen om jouw Web site te indexeren.

META en PICS
Het Platform for Internet Content Selection (Platform voor Internet Inhoud Selectie) (PICS, gespecificeerd in [PICS]) is een infrastructuur voor associatie van labels (meta data) met Internet inhoud. Origineel ontworpen om ouders en leerkrachten te helpen controle te houden over wat kinderen kunnen opvragen op het Internet. Het vergemakkelijkt ook ander gebruik van labels, zoals handtekeningen, privacy en beheer van intellectuele eigendomsrechten.

Dit voorbeeld illustreert hoe men een META declaratie kan gebruiken om een PICS 1.1 label op te nemen:

<HEAD>
 <META http-equiv="PICS-Label" content='
 (PICS-1.1 "http://www.gcf.org/v2.5"
    labels on "1994.11.05T08:15-0500"
      until "1995.12.31T23:59-0000"
      for "http://w3.org/PICS/Overview.html"
    ratings (suds 0.5 density 0 color/hue 1))
 '>
  <TITLE>... document titel ...</TITLE>
</HEAD>
META en standaard informatie

Het META element kan in de volgende gevallen gebruikt worden om standaard informatie te specifiëren voor een document:

Het volgende voorbeeld specificeert de karakter encodering voor een document als ISO-8859-5

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> 

Meta data profiles 

Het profile attribuut van het HEAD specificeert de locatie van een meta data profile. De waarde van het profile attribuut is een URI. User Agents kunnen dit URI gebruiken op twee manieren:

Dit voorbeeld verwijst naar een hypothetisch profile dat bruikbare eigenschappen definieert voor indexering van een document. Van de eigenschappen gedefinieerd door dit profile -- inclusief "author", "copyright", "keywords" en "date" -- worden de waarden vastgelegd door de overeenkomstige META declaraties.

 <HEAD profile="http://www.playgarden.com/">
  <TITLE>Hoe Memorandum omslagen maken</TITLE>
  <META name="author" content="Rosalie Niemand">
  <META name="copyright" content="&copy; 2000 Playgarden.">
  <META name="keywords" content="bedrijf,richtlijnen,catalogeren">
  <META name="date" content="1994-11-06T08:49:37+00:00">
 </HEAD>

Ten tijde van het schrijven van deze specificatie is het algemeen aanvaard om datumopmaak te gebruiken zoals omschreven in [RFC2616], sectie 3.3. Omdat deze opmaak relatief moeilijk te verwerken is, raden we aan dat auteurs de [ISO8601] datumopmaak gebruiken. Voor meer informatie, zie de secties over de INS en DEL elementen.

Het scheme attribuut laat auteurs toe om User Agents te voorzien in meer samenhang voor de correcte interpretatie van meta data. Soms kan zulke aanvullende informatie uitermate belangrijk zijn wanneer meta data gespecificeerd kan worden in verschillende formaten. Een auteur kan bijvoorbeeld een datum specifiëren in het (dubbelzinnige) formaat "10-9-97"; betekent dit 9 oktober 1997 of 10 september 1997? De scheme attribuutwaarde "Month-Day-Year" zou deze dubbelzinnigheid wegnemen in deze datumwaarde.

Op andere momenten kan het scheme attribuut hulpvol blijken, maar niet-kritische informatie zijn voor de User Agents.

De volgende scheme declaratie bijvoorbeeld kan een User Agent helpen om te bepalen dat de waarde van de "identifier" eigenschap een ISBN codenummer is:

<META scheme="ISBN" name="identifier" content="0-8230-2355-9">

Waarden voor het scheme attribuut hangen af van de eigenschap name en het geassocieerde profile.

Nota. Een voorbeeld profile is het Dublin Core (zie [DCORE]). Dit profile definieert een set van aanbevolen eigenschappen voor elektronische bibliografische omschrijvingen en is bedoeld om interoperabiliteit tussen ongelijke omschrijvingsmodellen te verbeteren.

7.5 Het document lijf

7.5.1 Het BODY element

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document lijf -->
<!ATTLIST BODY
  %attrs;                              -- %coreattrs, %i18n, %events --
  onload          %Script;   #IMPLIED  -- het document is geladen --
  onunload        %Script;   #IMPLIED  -- het document is verwijderd --
  >

Start tag: optioneel, Eind tag: optioneel

Attribuut definities

background = uri [CT]
Afgeraden. De waarde van dit attribuut is een URI die een figuurbron toewijst. De figuur word algemeen in tegelvorm over de achtergrond herhaald (voor visuele browsers).
text = color [CI]
Afgeraden. Dit attribuut bepaalt de kleur van de tekst op de voorgrond (voor visuele browsers).
link = color [CI]
Afgeraden. Dit attribuut bepaald de kleur van de tekst van onbezochte hypertext links (voor visuele browsers).
vlink = color [CI]
Afgeraden. Dit attribuut bepaalt de kleur van de tekst van bezochtte hypertext links (voor visuele browsers).
alink = color [CI]
Deprecated. Dit attribuut bepaalt de kleur van de tekst van hypertext links wanneer ze geselecteerd zijn door de gebruiker (voor visuele browsers).

Attributen elders gedefinieerd

Het lichaam van een document bevat de documentinhoud. De inhoud mag door de User Agents gepresenteerd worden op verschillende manieren. Voor visuele browsers kan je dit bijvoorbeeld beschouwen als de canvas waar de inhoud op verschijnt: tekst, figuren, kleuren, grafische media, enz. Voor audio gebaseerde User Agents kan dezelfde inhoud gesproken worden. Omdat style sheets nu de geprefereerde manier vormen om de presentatie van een document te specificeren, zijn de presentatie gerichte attributen van het BODY element afgekeurd.

AFGEKEURD VOORBEELD:
Het volgende HTML fragment illustreert het gebruik van de afgekeurde attributen. De achtergrondkleur van de canvas wordt op wit ingesteld, de voorgrondkleur van de tekst op zwart en de kleur van de hyperlinks initieel op rood, fuchsia wanneer geactiveerd en kastanjebruin wanneer bezocht.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
 <TITLE>Een studie van bevokingsdynamiek</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
  link="red" alink="fuchsia" vlink="maroon">
  ... document inhoud...
</BODY>
</HTML>

Door gebruik te maken van style sheets kan hetzelfde effect bekomen worden als volgt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Een studie van bevokingsdynamiek</TITLE>
 <STYLE type="text/css">
  BODY { background: white; color: black}
  A:link { color: red }
  A:visited { color: maroon }
  A:active { color: fuchsia }
 </STYLE>
</HEAD>
<BODY>
  ... document inhoud...
</BODY>
</HTML>

Door gebruik te maken van externe (gelinkte) style sheets verkrijg je de flexibiliteit om de presentatie te wijzigen zonder de HTML bron van het document te wijzigen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
 <TITLE>Een studie van bevokingsdynamiek</TITLE>
 <LINK rel="stylesheet" type="text/css" href="slimme_style.css">
</HEAD>
<BODY>
  ... document inhoud...
</BODY>
</HTML>

Framesets en HTML lichamen. Documenten die framesets bevatten vervangen het BODY element door het FRAMESET element. Raadpleeg het deel over frames voor meer informatie.

7.5.2 Element identificatie: de id en class attributen

Attribuut definities

id = name [CS]
Dit attribuut wijst een naam toe aan een element. De naam moet uniek zijn in een document.
class = cdata-list [CS]
Dit attribuut wijst een klassenaam of set van klassenamen toe aan een element. Het nodige aantal elementen kan toegewezen worden aan dezelfde klassenaam of namen. Meervoudige klassenamen moeten gescheiden worden door spatiekarakters.
Het id attribuut wijst een unieke identificatie toe aan een element (welke nagegaan kan worden door een SGML parser). De volgende paragrafen zijn bijvoorbeeld te onderscheiden door hun id waarden:
<P id="mijnparagraaf"> Dit is een uniek benoemde paragraaf.</P>
<P id="jouwparagraaf"> Dit is ook een uniek benoemde paragraaf.</P>

Het id attribuut heeft verschillende rollen in HTML:

Het class attribuut wijst langs de andere kant één of meer klassenamen toe aan een element; Het element kan beschouwd worden als behorend tot deze klasses. Een klassenaam kan gedeeld worden door verschillende elementvoorbeelden. Het class attribuut heeft verschillende rollen in HTML:

In het volgende voorbeeld wordt het SPAN element gebruikt in samenwerking met de id en class attributen om documentboodschappen op te maken. Boodschappen verschijnen in zowel de Engelse, Franse als de Nederlandse versie.

<!-- Engelse boodschappen -->
<P><SPAN id="boodsch1" class="info" lang="en">Variable declared twice</SPAN>
<P><SPAN id="boodsch2" class="waarschuwing" lang="en">Undeclared variable</SPAN>
<P><SPAN id="boodsch3" class="fout" lang="en">Bad syntax for variable name</SPAN>
<!-- Franse boodschappen -->
<P><SPAN id="boodsch1" class="info" lang="fr">Variable d&eacute;clar&eacute;e deux fois</SPAN>
<P><SPAN id="boodsch2" class="waarschuwing" lang="fr">Variable ind&eacute;finie</SPAN>
<P><SPAN id="boodsch3" class="fout" lang="fr">Erreur de syntaxe pour variable</SPAN>
<!-- Nederlandse boodschappen -->
<P><SPAN id="boodsch1" class="info" lang="en">Variabele 2 keer gedeclareerd</SPAN>
<P><SPAN id="boodsch2" class="waarschuwing" lang="en">Ongedeclareerde variabele</SPAN>
<P><SPAN id="boodsch3" class="fout" lang="en">Slechte syntaxis voor variabele naam</SPAN>

De volgende CSS style regels kunnen visuele User Agents vertellen om de informationele boodschappen in groen, waarschuwingsboodschappen in geel en foutboodschappen in rood weer te geven:

SPAN.info    { color: green }
SPAN.waarschuwing { color: yellow }
SPAN.fout   { color: red }

Merk op dat de Franse "boodsch1", de Engelse "boodsch1" en de Nederlandse "boodsch1" niet in hetzelfde document zouden kunnen verschijnen aangezien ze dezelfde id waarde delen. Auteurs kunnen verder gebruik maken van het id attribuut om de presentatie van individuele boodschappen te verfijnen, er ankers van te maken, enz.

Bijna elk HTML element kan een identificatie of klasse-informatie toegewezen krijgen.

Veronderstel bijvoorbeeld dat we een document schrijven over een programmeertaal. Het document zal een aantal voorgevormde voorbeelden bevatten. We gebruiken het PRE element om de voorbeelde op te maken. We wijzen ook een achtergrondkleur (groen) toe aan al de gevallen van het PRE element die behoren tot de klasse "voorbeeld".

<HEAD>
<TITLE>... document titel ...</TITLE>
<STYLE type="text/css">
PRE.voorbeeld { background : green }
</STYLE>
</HEAD>
<BODY>
<PRE class="voorbeeld" id="voorbeeld-1">
...voorbeeld code hier...
</PRE>
</BODY>

Door de instelling van het id attribuut voor dit voorbeeld kunnen we (1) er een hyperlink naar maken en (2) de klasse style informatie overschrijven met style informatie voor dit geval.

Nota. Het id attribuut deelt dezelfde naamruimte (name space) als het name attribuut wanneer het gebruikt wordt voor ankernamen. Raadpleeg het deel over ankers met id voor meer informatie.

7.5.3 Block-level en inline elementen

Van bepaalde HTML elementen die kunnen voorkomen in BODY wordt gezegd dat ze "block-level" zijn, terwijl anderen "inline" (ook gekend als "tekst level") zijn. Het onderscheid is gebaseerd op verschillende concepten:

Inhoudsmodel
In het algemeen kunnen block-level elementen inline elementen en andere block-level elementen bevatten. Inline elementen kunnen in het algemeen enkel data en andere inline elementen bevatten. Inherent in dit structurele onderscheid is het idee dat block elementen "grotere" structuren vormen dan inline elementen.
Opmaken
Standaard worden block-level elementen anders opgemaakt dan inline elementen. In het algemeen beginnen block-level elementen met een nieuwe regel, inline elementen doen dit niet. Raadpleeg voor informatie over witruimte, lijnafbrekingen en block opmaak de sectie over text.
Richting
Omwille van technische redenen met betrekking op de [UNICODE] bidirectionele tekst algoritmen, verschillen block-level en inline elementen in hoe ze richtingsinformatie overerven. Raadpleeg het deel over overerving van teksrichting voor details.

Style sheets bieden de mogelijkheid om de weergave te specificeren van willekeurige elementen, ook wanneer een element weergegeven wordt als block of inline. In sommige gevallen, zoals een inline style voor lijst elementen, kan dit gepast zijn, maar in het algemeen wordt auteurs afgeraden om de conventionele interpretatie van HTML elementen op deze manier aan te passen.

De verandering van de traditionele presentatie voor block level en inline elementen heeft ook een effect op het bidirectionele tekst algoritme. Raadpleeg het deel over het effect van style sheets op bidirectionaliteit voor meer details.

7.5.4 Elementen groeperen: de DIV en SPAN elementen

<!ELEMENT DIV - - (%flow;)*            -- algemene taal/style container -->
<!ATTLIST DIV
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT SPAN - - (%inline;)*         -- algemene taal/style container -->
<!ATTLIST SPAN
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: vereist, Eind tag: vereist

Attributen elders gedefinieerd

De DIV en SPAN elementen bieden in conjunctie met de id en class attributen een generiek mechanisme om structuur toe te voegen aan documenten. Deze elementen definiëren dat inhoud inline (SPAN) of block-level (DIV) moet zijn, maar leggen geen presentationele beperkingen op de inhoud. Auteurs kunnen deze elementen dus gebruiken samen met style sheets, het lang attribuut, enz., om zo HTML de maken die voldoet aan hun eigen noden en smaak.

Veronderstel bijvoorbeeld dat we een HTML document willen genereren gebaseerd op een database van klantinformatie. Omdat HTML geen elementen bevat die objecten identificeert zoals "cliënt", "telefoonnummer", "email adres", enz., gebruiken we DIV en SPAN om de gewenste structurele en presentationele effecten te verkrijgen. We zouden het TABLE element als volgt kunnen gebruiken om de informatie te structureren:

<!-- Voorbeeld van data van de klantdatabase: -->
<!-- Naam: Andy Camps, Tel: (32) 11 611715, Email: andy.camps@playgarden.com -->

<DIV id="klant-camps" class="klant">
<P><SPAN class="klant-titel">Klantinformatie:</SPAN>
<TABLE class="klant-data">
<TR><TH>Familienaam:<TD>Camps</TR>
<TR><TH>Voornaam:<TD>Andy</TR>
<TR><TH>Tel:<TD>(011) 611715</TR>
<TR><TH>Email:<TD>andy.camps@playgarden.com</TR>
</TABLE>
</DIV>

<DIV id="klant-dreesen" class="klant">
<P><SPAN class="klant-title">Klantinformatie:</SPAN>
<TABLE class="klant-data">
<TR><TH>Familienaam:<TD>Dreesen</TR>
<TR><TH>Voornaam:<TD>Evelyn</TR>
<TR><TH>Tel:<TD>(011) 611715</TR>
<TR><TH>Email:<TD>evelyn.dreesen@playgarden.com</TR>
</TABLE>
</DIV>

We kunnen later eenvoudig style sheet declaraties toevoegen om de presentatie van deze database gegevens te verfijnen.

Raadpleeg voor een ander voorbeeld van gebruik het voorbeeld in het deel over de class en id attributen.

Visuele User Agents plaatsen in het algemeen een lijnafbreking voor en achter DIV elementen, bijvoorbeeld:

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

wordt typisch weergegeven als:

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc

7.5.5 Koppen: De H1, H2, H3, H4, H5 en H6 elementen

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  Er zijn zes levels van koppen van H1 (de meest belangrijke)
  tot H6 (de minst belangrijke).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- kop -->
<!ATTLIST (%heading;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: vereist, Eind tag: vereist

Attributen elders gedefinieerd

Een kop element omschrijft kort het onderwerp van het deel die het introduceert. Kopinformatie kan gebruikt worden door User Agents om bijvoorbeeld een inhoudstabel voor een document automatisch te genereren.

Er zijn zes levels van koppen in HTML met H1 als de meest belangrijke en H6 als de minst belangrijke. Visuele browsers geven meer belangrijke koppen gewoonlijk weer in grotere tekens dan minder belangrijke.

Het volgende voorbeeld toont hoe het DIV element gebruikt wordt om een kop te associëren met de document sectie die erop volgt. Hierdoor wordt het mogelijk om een stijl te definiëren voor die sectie (kleur van de achtergrond, lettertype, enz.) met style sheets.

<DIV class="sectie" id="bos-olifanten" >
<H1>Bos olifanten</H1>
<P>In deze sectie hebben we het over de minder bekende bos olifanten.
...deze sectie gaat verder...
<DIV class="subsectie" id="bos-habitat" >
<H2>Habitat</H2>
<P>Bos olifanten leven niet in bomen, maar ertussen.
...deze subsectie gaat verder...
</DIV>
</DIV>

Deze structuur kan gedecoreerd worden met stijlinformatie zoals:

<HEAD>
<TITLE>... document titel ...</TITLE>
<STYLE type="text/css">
DIV.sectie { text-align: justify; font-size: 12pt}
DIV.subsectie { text-indent: 2em }
H1 { font-style: italic; color: green }
H2 { color: green }
</STYLE>
</HEAD>

Genummerde secties en referenties
HTML biedt zelf geen sectie nummers die gegenereerd worden uit de koppen. Deze mogelijkheid kan echter geboden worden door User Agents. Binnenkort zullen style sheet talen zoals CSS auteurs toelaten om controle te hebben over het genereren van sectie nummers (handig voor voorwaartse verwijzingen in afgedrukte documenten zoals in "zie sectie 7.2").

Sommige mensen zien het overslaan van levels als een slechte gewoonte. Ze accepteren H1 H2 H1 terwijl ze H1 H3 H1 niet accepteren omdat de kop van level H2 overgeslagen is.

7.5.6 Het ADDRESS element

<!ELEMENT ADDRESS - - (%inline;)* -- informatie over de auteur -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Start tag: vereist, Eind tag: vereist

Attributen elders gedefinieerd

Het ADDRESS element kan gebruikt worden door auteurs om contact informatie te voorzien voor een document of een groot deel van een document zoals een formulier. Dit element verschijnt aan het begin of het eind van een document.

Een pagina op de W3C Web site gerelateerd aan HTML zou bijvoorbeeld de volgende contact informatie kunnen bevatten:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>, 
<A href="../People/Arnaud/">Arnaud Le Hors</A>, 
contact personen voor de <A href="Activity">W3C HTML Activiteit</A><BR> 
$Date: 1999/12/24 23:07:14 $
</ADDRESS>