Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Er zijn nog vele andere elementen in HTML om je tekst mee op te maken waar we in HTML tekst : basisprincipes niet aan toe zijn gekomen. De elementen die in dit artikel worden besproken zijn minder bekend maar niettemin nuttig om meer over te weten (en dan heb je de hele lijst nog lang niet gezien). In dit artikel leer je citaten op te maken, beschrijvende lijsten, computercode en andere verwante tekst, subscript en superscript, contactinformatie en nog veel meer.

Vereisten: Basiskennis HTML zoals aangeboden in Beginnen met HTML. Kennis over HTML tekstopmaak zoals aangeboden in HTML Tekst: basisprincipes.
Doel: Je leert hoe je minder bekende HTML-elementen kan gebruiken om gevorderde semantische functionaliteit mogelijk te maken.

Beschrijvende lijsten

In HTML Basisprincipes heb je geleerd hoe je eenvoudige lijsten in HTML op kan maken. We hebben het toen niet over een derde lijsttype gehad, eentje dat je nu en dan zal tegenkomen:  beschrijvende lijsten. Het doel van deze lijsten is om een aantal lijstonderdelen op te maken samen met de beschrijvingen die ermee worden geassociëerd. Ze kunnen termen en hun definities zijn of vragen en antwoorden. Als voorbeeld gaan we nu een stel termen en hun definities bekijken:

Alleenspraak
Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).
Monoloog
Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.
Terzijde
Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.

Beschrijvende lijsten gebruiken een andere verpakking als de andere lijsttypes— <dl>. Elk lijstonderdeel wordt door een <dt>-element omhuld (<dt> is ee beschrijvende term of description term in het Engels) en elke beschrijving bevindt zich in een <dd> (description description) element. We gaan nu de opmaak van ons voorbeeld voltooien:

<dl>
  <dt>Alleenspraak</dt>
  <dd>Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).</dd>
  <dt>Monoloog</dt>
  <dd>Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.</dd>
  <dt>Terzijde</dt>
  <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd>
</dl>

De standaardstijlen van de browser zullen de beschrijvingen van de  beschrijvende lijst ietwat laten inspringen. MDN's standaardstijl volgt deze conventie vrij nauw op maar MDN maakt de termen ook vet om ze extra te benadrukken.

alleenspraak
Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).
monoloog
Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.
terzijde
Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.

Merk ook op dat het is toegelaten om verscheidene beschrijvingen aan één enkele term te koppelen. Bijvoorbeeld:

terzijde
Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.
Vind je ook in een geschreven tekst of als onderdeel van een inhoud die verwant is met het onderwerp maar dat niet echt in de algemene inhoud past zodat die apart wordt gepresenteerd (vaak in een kader aan de zijkant).

Actief leren: Maak een reeks definities op

Het is tijd om zelf een beschrijvende lijst te maken. In het invoerveld voeg je elementen aan de ruwe tekst toe zodat die in het uitvoerveld als een beschrijvende lijst verschijnt. Als je wil, kan je ook je eigen termen en beschrijvingen gebruiken. 

Als je een fout maakt, kan je die altijd ongedaan maken door op de Maak Ongedaan-knop drukken. Als je echt vast raakt, druk dan op Toon Oplossing om het antwoord te zien.

Citaten

HTML beschikt ook over eigenschappen waameer je citaten kan opmaken. Je kan kiezen tussen elementen waarmee je de inhoud als een blokcitaat of als een inline citaat kan opmaken.

Blokcitaten

Als de inhoud op blokniveau wordt geciteerd, moet je dat aanduiden door die in een <blockquote>-element in te bedden. (Dit kan een paragraaf zijn, meerdere paragrafen, een lijst enz.). Verder moet je er in een cite-attribuut  een URL aan toevoegen die naar de bron van het citaat verwijst. De volgende opmaak bijvoorbeeld is uit de MDN pagina over het <blockquote>-element gehaald.

<p>Het <strong>HTML <code>&lt;blockquote&gt;</code> element</strong> (of <em>HTML Blok
Citaat Element</em>) maakt duidelijk dat het ingesloten element een langer citaat is.</p>

Om dit in een blokcitaat te veranderen, doen we dit :

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>Het <strong>HTML <code>&lt;blokquote&gt;</code> element</strong> (of <em>HTML Blok
  Citaat Element</em>) duidt aan dat het ingesloten element een langer citaat is.</p>
</blockquote>

De standaardstijl van een browser zal dit als een ingesprongen paragraaf weergeven die aanduidt dat dit een citaat is. MDN doet dit ook en voegt er nog wat extra stijl aan toe:

Het HTML <blockquote> element (of HTML Blokcitaat element) duidt aan dat de ingesloten tekst een langer citaat is.

Inline citaten

Inline citaten werken op exact dezelfde manier met één uitzondering: ze gebruiken het <q>-element. Als voorbeeld zie je de opgemaakte tekst hieronder: hij bevat een citaat uit de MDN <q> pagina:

<p>Het citaat element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld voor korte citaten die geen volledige paragraaf beslaan.  </q></p>

De standaardstijl van een browser zal dit als normale tekst weergeven die tussen aanhalingstekens staat en zo aanduidt dat het hier om een citaat gaat. Zoals dit:

Het citaat element — <q> — is bedoeld voor korte citaten die geen volledige paragraaf beslaan.

Het cite-attribuut en het cite-element

De inhoud van het cite-attribuut klinkt nuttig, maar spijtig genoeg doen browsers, schermlezers enz. er niet echt veel mee. Je kan de inhoud van cite, niet zichtbaar maken in de browser zonder dat je daarvoor je eigen oplossing in JavaScript of CSS moet schrijven. Als je de bron van je citaat beschikbaar wil maken op de pagina, kan je het <cite>-element beter naast het citaat-element plaatsen. Dit element moet eigenlijk de bron van het citaat bevatten, i.e. de naam van het boek of  van de persoon die het citaat heeft gezegd, maar er is geen reden waarom je de tekst in het <cite>-element niet op de één of andere manier aan de bron van het citaat zou kunnen linken:

<p>Volgens de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN-pagina over het blokcitaat</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>Het <strong>HTML <code>&lt;blockquote&gt;</code>-element</strong> (of <em>HTML Blokcitaat-element</em>) 
     duidt aan dat de ingesloten tekst een langer citaat is.</p>
</blockquote>

<p>Het citaatelement — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld
voor korte citaten die niet uit meerdere paragrafen bestaan.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN-pagina over het q-elementa</cite></a>.</p>

De bron van een citaat wordt standaar cursief gedrukt. Je kan deze code aan het werk zien in ons quotations.html voorbeeld.

Actief leren: Wie zei dat?

Tijd voor nog een voorbeeld met actief leren! In dit voorbeeld willen we het volgende:

  1. Verander de middelste paragraaf in een blokcitaat en voeg een cite-attribuut toe.
  2. Verander een deel van de derde paragraaf in een inline citaat en zorg ervoor dat het element ook een cite-attribuut bevat.
  3. Voeg een <cite>-element toe aan elk citaat.

Zoek online naar geschikte bronnen.

Als je een fout maakt, kan je altijd op Maak Ongedaan drukken. Als je echt vast raakt, kan je op de Toon Oplossing-knop drukken om het antwoord te zien.

Afkortingen

Het <abbr>-element is een ander vrij courant element dat je zal tegenkomen als je op het web surft. Het omhult een afkorting of acroniem en verschaft ook de volledige term (die in het title-attribuut steekt.) We gaan eerst een paar voorbeelden bekijken:

<p>We gebruiken <abbr title="Hypertext Markup Language">HTML</abbr> om onze webdocumenten te structureren.</p>

<p>Ik denk dat <abbr title="Monseigneur">Mgr.</abbr> Green het in de keuken deed met de kettingzaag.</p>

Deze zullen er ongeveer zo uitzien (de volledige tekst zal als een tooltip verschijnen als je er met je muis overeen glijdt):

We gebruiken HTML om onze webdocumenten te structureren.

Ik denk dat Mgr. Green het in de keuken deed met de kettingzaag.

Opmerking: Er is nog een ander element, <acronym>, dat in feite hetzelfde doet als <abbr>. Dit element was specifiek voor acroniemen bedoeld en niet zozeer voor afkortingen. Het wordt echter niet meer gebruikt — browsers ondersteunden het niet zo goed als <abbr> en de functies zijn zo gelijkaardig dat men het gevoel had dat het zinloos was om beide elementen te hebben. Gebruik dus gewoon altijd <abbr>.

Actief leren: maak een afkorting op

Voor deze eenvoudige opdracht, willen we dat je gewoon een afkorting opmaakt. Je kan het voorbeeld hier beneden gebruiken of het vervangen door eentje dat je zelf kiest.

Contactinformatie opmaken

HTML heeft een element om contactinformatie mee op te maken — <address>. Het element omhult gewoon je contactinformatie, bijvoorbeeld:

<address>
  <p>Chris Mills, Manchester, Het Grimmige Noorden, UK</p>
</address>

Er is wel een ding dat je moet onthouden: het <address>-element is bedoeld om de contactinformatie op te maken van de persoon die het HTML-document heeft geschreven en niet van eender welk adres. Het voorbeeld hierboven is dus enkel oké als Chris het document heeft geschreven waarin de opmaak verschijnt. Iets zoals het volgende is ook oké:

<address>
  <p>Deze pagina is geschreven door <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

Superscript en subscript

Nu en dan zal je superscript en subscript nodig hebben bij de opmaak van inhoud zoals een datum, een chemische formule en wiskundige vergelijkingen. Het <sup> en het <sub>-element zorgen ervoor dat die inhoud de juiste betekenis krijgt. Zoals in dit voorbeeld:

<p>Mijn verjaardag valt op de 25<sup>ste</sup> mei 2001.</p>
<p>De chemische formule van caffeïne is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>Als x<sup>2</sup> gelijk is aan 9, dan is x gelijk aan of -3.</p>

De output van deze code ziet er zo uit:

Mijn verjaardag valt op de 25ste mei 2001.

De chemische formule van caffeïne is C8H10N4O2.

Als x2 gelijk is aan 9, dan is x gelijk aan 3 of -3.

De weergave van computercode

Er bestaan een aantal elementen waarmee je computercode kan opmaken in HTML:

  • <code>: Voor de opmaak van algemene computercode.
  • <pre>: Voor de opmaak van tekstblokken met een vaste breedte waarin de witte ruimte bewaard blijft (in het algemeen zijn dat blokken met code. Je hoeft geen speciale karakters te gebruiken voor regeleindes of witte ruimte. Alles binnen de pre-tags wordt weergegeven zoals jij het hebt getypt.)
  • <var>: Voor de opmaak van de namen van variabelen.
  • <kbd>: Voor de opmaak van allerlei vormen van invoer die (onder andere via een toetsenbord)  is ingegeven in de computer.
  • <samp>: Voor de opmaak van de uitvoer van een computerprogramma.

We gaan een paar voorbeelden bekijken. Probeer er wat mee te spelen (je kan een kopie van ons other-semantics.html voorbeeldbestand nemen):

<pre><code>var para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop met in mijn ribben te porren!');
}</code></pre>

<p>Je zou geen weergave-elementen mogen gebruiken zoals <code>&lt;font&gt;</code> en <code>&lt;center&gt;</code>.</p>

<p>In het JavaScript voorbeeld hierboven vertegenwoordigt <var>para</var> een paragraaf-element.</p>

<p>Selecteer alle tekst met <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes van 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

De code hierboven zal er zo uitzien:

De opmaak van uren en data

HTML heeft ook het <time>-element om uren en data in een formaat om te zetten dat door een machine kan gelezen worden. Bijvoorbeeld:

<time datetime="2016-01-20">20 januari 2016</time>

Waarom is dit nuttig? Wel, er zijn vele manieren waarop mensen data noteren. De datum hierboven zou kunnen worden geschreven als:

  • 20 januari 2016
  • 20th January 2016
  • jan 20 2016
  • 20/06/16
  • 06/20/16
  • De 20ste van de volgende maand
  • 20e Janvier 2016
  • 2016年1月20日
  • Enzovoort

Maar deze verschillende vormen kunnen niet gemakkelijk worden herkend door de computers. Wat als je automatisch de data van alle gebeurtenissen in een pagina zou willen grijpen en die in een kalender steken ? Met het <time>-element kan je een ondubbelzinnige tijd en uur vastmaken aan je datum zodat die door een machine kan gelezen worden .

Het basisvoorbeeld hierboven toont ons een simpele datum, maar er zijn nog vele andere opties mogelijk. Bijvoorbeeld:

<!-- Eenvoudige standaarddatum -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Enkel jaar en maand -->
<time datetime="2016-01">January 2016</time>
<!-- Enkel maand en dag -->
<time datetime="01-20">20 January</time>
<!-- Enkel tijd, uren en minuten -->
<time datetime="19:30">19:30</time>
<!-- Je kan ook seconden en milliseconden weergeven! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Datum en tijd -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Datum en tijd met tijdzone -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Vermelding van een specifiek weeknummer-->
<time datetime="2016-W04">The fourth week of 2016</time>

Samenvatting

En zo komen we aan het einde van onze studie over HTML tekst en semantiek. Wees je er wel van bewust dat wat je in deze cursus hebt gezien lang niet alles is. Er zijn nog veel meer HTML tekstelementen. We hebben geprobeerd om de belangrijkste elementen te bespreken en een aantal van de courante element die je in het wild zal tegenkomen of ten minste interessant zal vinden. Om meer HTML-elementen te vinden, kan je een kijkje nemen op onze HTML element reference pagina. (de Inline text semantics sectie zou een zeer goede plaats kunnen zijn om te beginnen.) In het volgende artikel zullen we de HTML-elementen bekijken die je gebruikt om de verschillende onderdelen van een HTML-document te structureren.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: Tonnes, mientje
 Laatst bijgewerkt door: Tonnes,