Niemand vind het prettig om een kilometers aaneengesloten stukken tekst te lezen. Graag zien we een beetje structuur in de vorm van leestekens, paragrafen en kopjes. Voor dat eerste ben je zelf verantwoordelijk (ja, helaas ook in HTML), maar paragrafen en kopjes kunnen uitstekend gemaakt worden met HTML. Voor de koppen is zelfs een hele serie aan elementen aanwezig waarmee de hiërarchie van de kopjes bepaald kan worden. Zo blijft zelfs zonder de opmaak de tekst op de pagina nog volledig gestructureerd. Handig!
Paragrafen
Voor paragrafen is het element bijzonder eenvoudig in gebruik. Het element wat we hiervoor gebruiken is het <p>-element, en het enige wat je hiermee hoeft te doen is <p> voor een alinea/paragraaf zetten en </p> aan het einde. Bijna geen voorbeeld benodigd, maar voor het gemak toch eentje:
<p>Dit is een paragraaf. Dat kan je zien omdat zowel boven als onder deze blok tekst een witregel verschijnt, zo wordt het onderscheid met andere paragrafen duidelijk. Met behulp van CSS is dat aan te passen, en kan je ook de eerste regel laten inspringen.</p>
Belangrijke eigenschap van paragrafen, maar eigenlijk van alle tekst van HTML is dat ze dubbele spaties, enters en inspringingen met behulp van de tab-toets negeren. Als je dat gedrag wil aanpassen, dien je in plaats van het <p>-element het <pre>-element te gebruiken. Deze is op dezelfde manier te gebruiken als het <p>-element, maar toont de tekst exact zoals deze is ingevoerd tussen begin- en eindtag. Nadeel is wel dat de tekst standaard in een zogenaamd non-proportioneel lettertype wordt getoond, net zoals tekst uit typemachines of de codeblokken op deze site. Om dit aan te passen dien je gebruik te maken van CSS. Een voorbeeld:
<pre>Dit is een preformatted paragraaf. Dat kan je zien omdat zowel boven als onder deze blok tekst een witregel verschijnt, zo wordt het onderscheid met andere paragrafen duidelijk. Maar in deze paragraaf worden alle spaties, enters en tab-inspringingen getoond, in een lettertype dat ook door een typemachine wordt gebruikt.</pre>
Gelukkig is er ook een element waarmee je het afbreken van een regel ook kan regelen zonder meteen met een ander lettertype opgescheept te zitten, het <br>-element. Dit is best een bijzonder element, omdat het geen sluittag heeft, zoals veel andere HTML-elementen. Wanneer men gebruik maakt van XHTML dient men dan ook nog een extra slash te gebruiken, en het element komt er dan uit te zien als <br/>. De makers van deze site gebruiken echter gewone HTML in de voorbeelden, de redenen waarom kan je op de speciale pagina lezen. Een voorbeeld van het <br>-element:
<p>Van: €9,95<br>Voor:€10,95</p>
Hoewel dit voorbeeld op één regel staat, zal het worden weergeven op twee regels.
Koppen
Of je nu maar een beetje tekst hebt, of heel veel, je wil dit toch graag organiseren. HTML bied genoeg mogelijkheden voor allerlei soorten koppen. Met de elementen <h1> tot en met <h6> kan je zes verschillende groottes koppen maken die gaan van heel groot (<h1>) tot kleiner dan normale tekst (<h6>). Het zijn zelfstandige elementen, dus ze worden buiten een paragraaf geplaatst.
Hoewel je volledig vrij bent om koppen in elke willekeurige voorbeeld te gebruiken, is het toch een goed idee om ze op de meest logische manier te gebruiken: <h1> voor de paginatitel, <h2> voor de paragrafen en <h3> voor subparagrafen. Heel misschien heb je <h4> dan nog nodig, maar kijk dan uit dat je de tekst niet te ingewikkeld en te lang maakt. Heb je vijf of zes niveau's koppen op je pagina, dan moet je waarschijnlijk eens gaan kijken of de tekst niet beter gestructureerd kan worden.
Tenslotte nog een stukje voorbeeldcode:
<h1>Pagina over bla bla</h1> <p>Dit is een hoop gebla bla bla</p> <h2>Varianten van bla bla</h2> <p>Er zijn veel varianten van bla bla.</p> <h3>Bla bla zonder tekst</h3> <p>Alleen maar bla bla</p> <h3>Bla bla als vervolgtekst</h3> <p>Tekst die wordt aangevuld met bla bla</p> <h3>Andere tekst als bla bla</h3> <p>Bijvoorbeeld Lorum Ipsum</p>
De lettergroottes zijn instelbaar via CSS, daarover lees je binnenkort meer.
No related posts.
