Kopteksten

Er worden zes heading levels gebruikt binnen de FDND pagina's, aangeduid door <h1>, <h2>, <h3>, <h4>, <h5> en <h6>. Deze dienen op correcte wijze te worden genest zodat de document outline een nette hierarchie heeft.

Heading level 1

<h1> wordt één keer per pagina gebruikt en staat in het <header> element.

Heading 2

<h2> wordt één keer per <section> of <article> toegepast welke in het <main> element staan.

Heading 3

<h3> mag per <section> of <article> meerdere keren voor komen nadat er binnen het parent element minstens een <h2> element aan vooraf gaat.

Heading 4

<h4> op zelfde wijze als <h3> maar er gaat binnen het parent element minstens een <h3> element aan vooraf.

Heading 5

<h5> op zelfde wijze als <h4> maar er gaat binnen het parent element minstens een <h4> element aan vooraf.

Heading 6

<h6> op zelfde wijze als <h5> maar er gaat binnen het parent element minstens een <h5> element aan vooraf.

Basis elementen

Paragraven

<p> heeft een neutrale vormgeving waarbij kleuren worden bepaald door het kleurenschema van het omringende <article> of <section> element.

p + p krijgt een margin aan de bovenkant bij de 2e paragraaf zodat lappen tekst opgedeeld worden en makkelijker te lezen zijn.

Links

<a href=""> wordt toegepast binnen de lopende tekst in een paragraaf. Links binnen de pagina worden anders weergegeven als links buiten de pagina, deze krijgen een icoon om te laten zien dat er van de huidige site weg genavigeerd wordt.

Links naar bestanden met een .pdf en .doc of een .zip, .rar en .tar extensie krijgen automatisch een icoon toebedeeld.

Lijsten

Het <ul> element:

is bedoeld voor lijsten zonder volgordelijkheid
wordt weergegeven met een cirkel als lijstaanduiding.

Het <ol> element:

is bedoeld voor lijsten met volgordelijkheid
wordt weergegeven met cijfers als lijstaanduiding.

Gangbare Inline elementen

<abbr> geeft de uitwijding van afkortingen als Ad en FDND weer. Er verandert niets qua opmaak maar je kunt erover hoveren om de title te zien.

<b> staat voor b(ring to attention) en vestigt aandacht zonder verdere semantische waarde toe te kennen.

<code> wordt weergegeven op een manier die laat zien dat het om een kort codefragment gaat. Wij gebruiken dit om bestandsnamen als ./README.md of CLI commando's als git pull op te nemen in een paragraaf.

<em> staat voor em(phasize) en wordt gebruikt om semantische nadruk te geven.

<i> staat voor i(diomatic text) wordt gebruikt voor technische terminologie, jargon etc. zonder verdere semantische waarde toe te kennen.

<mark> markeert een stuk tekst alsof je er met een highlighter overheen gegaan bent.

<strong> staat voor strong(ly emphasize) en wordt gebruikt om sterke semantische nadruk te geven.

<time datetime=""> geeft een tijd of datum gerelateerde verwijzing aan, bijvoorbeeld 15 april 2021.

Obscure Inline elementen

<del> representeert ~~een stuk tekst dat uit het document verwijderd is~~. Het wordt herkenbaar opgemaakt met een achtergrond in de highlight kleur en doorgehaalde tekst. Ook staat er een min-teken voor de tekst die verwijderd wordt.

<ins> representeert een stuk tekst dat aan het document toegevoegd is. Het wordt herkenbaar opgemaakt met een achtergrond in de highlight kleur en er staat een min-teken voor de tekst die verwijderd wordt.

<kbd> maakt knopjes als Ctrl + Shift

<s> haalt ~~een stuk tekst door~~.

<sub> is subschrift voor de cijfers in scheikundige formules zoals C₈H₁₀N₄O₂ beter bekend als caffeïne en C₁₈H₂₇NO₃ beter bekend als capsaïcine.

<sup> is superschrift voor voetnoten¹ of wiskundige formules als de stelling van Pythagoras: a² + b² = c² of Einsteins relativiteitstheorie: E=mc².