Web: Essentials

Appearance

HTML: tekst ​

De basis van tekst binnen HTML bestaat uit 3 soorten tags:

  • <p>: de paragraaf tag
  • <h1>, <h2>, <h3>, <h4>, <h5> en <h6>: de heading tags
  • <ul>, <ol> en <li>: de lijsten en lijst-element tags

Deze worden nog aangevuld door diverse specifieke tags zoals: <em>, <strong>, <blockquote>, <time>, ...

Paragraaf tag ​

De <p> tag is het meest gebruikte element voor gewone tekst. Elke paragraaf wordt automatisch omringd door witruimte en vormt een blok-element. Browsers voegen standaard marges toe boven en onder paragrafen voor betere leesbaarheid.

Voorbeeld:

html
<p>Hoi hoi allemaal!</p>

<p>Dit is een beetje text in een textbestandje.</p>

Heading tags ​

Heading tags structureren je content hiërarchisch. <h1> is de hoofdtitel (slechts één per pagina), <h2> zijn hoofdsecties, <h3> subsecties, enzovoort tot <h6>. Deze hiërarchie helpt zowel gebruikers als zoekmachines de structuur van je content te begrijpen. Koppen zijn ook cruciaal voor toegankelijkheid - screenreaders gebruiken ze voor navigatie.

Voorbeeld:

html
<h1>Dit is de pagina titel</h1>
<h2>Dit is een hoofdsectie</h2>
<h3>Dit is een subtitel</h3>

Lijsten ​

HTML biedt twee soorten lijsten: ongeordende lijsten (<ul>) met bulletpoints voor opsommingen en geordende lijsten (<ol>) met nummering voor stappen of rankings. Alle lijstitems worden ingesloten in <li> tags binnen de <ul> of <ol> tags.

Voorbeeld:

html
<p>Mijn ongeordend todo lijst:</p>
<ul>
  <li>Dance</li>
  <li>Sleep</li>
  <li>Eat</li>
  <li>Repeat</li>
</ul>

<p>Mijn geordend todo lijst:</p>
<ol>
  <li>Eat</li>
  <li>Sleep</li>
  <li>Dance</li>
  <li>Repeat</li>
</ol>

<em> en <strong> tags ​

Deze worden gebruikt om tekst te benadrukken:

  • <em>: deze tag (emphasis) geeft semantische nadruk aan tekst - het vertelt browsers en screenreaders dat deze tekst benadrukt moet worden gelezen. Standaard wordt em-tekst cursief weergegeven, maar de echte waarde zit in de betekenis, niet het uiterlijk.
  • <strong>: deze tag geeft aan dat tekst van sterk belang is. Browsers tonen dit standaard als vetgedrukte tekst, maar net als bij <em> gaat het om de semantische betekenis. Screenreaders zullen strong-tekst met meer nadruk voorlezen. Gebruik <strong> voor belangrijke waarschuwingen, kernpunten of cruciale informatie.

Voorbeeld:

html
<p>Dit is een tekst met <em>extra nadruk</em></p>
<p>Dit is een <strong>belangrijke</strong> tekst</p>

Break ​

Als je een regel tekst op een volgende lijn wil plaatsen dan kan je de zelfsluitende
tag gebruiken.

Voorbeeld:

html
<p>De volgende tekst <br>komt op een nieuwe regel</p>

Blockquote ​

Met de <blockquote> en <cite> tags kan je een citaat met auteur en referentie aanduiden. Het optionele cite attribuut op de <blockquote> tag dient om een link toe te voegen naar de bron van het citaat.

Voorbeeld:

html
<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>

Time ​

<time> geeft aan dat informatie een tijdstip of een lengte in tijd is. Het datetime attribuut dient om de datum of tijd in een gestructureerd formaat te noteren.

Voorbeeld:

html
<p>
  The Cure will be celebrating their 40th anniversary on <time datetime="2018-07-07">July 7</time> in London's Hyde
  Park.
</p>