2: teksten
Een zeer belangrijk onderdeel van bijna elke webapplicatie is het voorzien van teksten op de webpagina. We gebruiken hiervoor specifieke HTML-elementen. Er bestaan véél meer HTML-elementen met betrekking tot het schrijven van teksten dan degene die we hier opsommen. Voor meer informatie verwijzen we naar MDN.
titel
Koppen en subkoppen weerspiegelen de informatiehiërarchie in documenten. Zo kan een document beginnen met een grote kop, gevolgd door een inleiding of de meest belangrijke informatie. De pagina wordt verder opgebouwd met tussenkoppen en alinea's. Elk onderwerp kan bijvoorbeeld een nieuwe alinea beslaan, en elke paragraaf kan een kop hebben die de inhoud beschrijft.
In HTML zijn er 6 niveau's van titels voorzien. De elementen voor titels zijn te herkennen aan de letter 'h' van 'heading' en een niveaubepalend cijfer.
Ingebouwd in een browser zitten er al regels voor het weergeven van titels. Elk niveau van titels wordt op een unieke manier weergegeven. Deze weergave heeft echter niets te maken met de waarde van het HTML-element zelf.
<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
Hoewel het gebruik van meerdere h1-elementen op één pagina is toegestaan volgens de HTML-standaard, wordt dit niet beschouwd als een goede praktijk. Een pagina moet slechts 1 h1-element hebben. Dit element zal de inhoud van de pagina beschrijven.
paragraaf
Doorlopende tekst wordt in <p> element geplaatst. Vóór en na een paragraaf plaatst de browser standaard witruimte ter grootte van ongeveer één blanco regel. Indien het element gevolgd wordt door een tweede <p> element dan schuiven de witruimtes in elkaar en resteert tussen de blokken tekst slechts één blanco regel.
<p>lorem ipsum dolor sit amet, consectutor.</p>
Er bestaan geen verschillende niveau's van p-elementen. Dus er bestaat enkel <p>. Iets als een p1-element bestaat dus niet.
regeleinde
Om programmeren eenvoudig en overzichtelijk te houden, werd er besloten om extra witruimte, opgenomen in teksten, niet te tonen in de browser. Dit fenomeen noemen we: "white space collapsing".
Om toch een regeleinde in te voeren, maken we gebruik van het <br>-element. Het <br>-element is een element zonder inhoud en heeft geen eindtag in HTML.
<h1>Een korte titel</h1>
<p>Dit is een lange paragraaf waarin we graag op een bepaald moment een regeleinde plaatsen.<br>Een regeleinde is geen goede manier om zaken te positioneren in HTML.</p>
boven- en onderschrift
Boven- en onderschrift zijn tekens die boven of onder de normale schrijfhoogte worden geplaatst, gewoonlijk in een iets kleiner corps. Om deze eenvoudig te kunnen invoeren, kregen deze elk een eigen element, nl.: <sup>en <sub>. Deze worden gebruikt om bijvoorbeeld wiskundige formules te tonen in een browser.
<p>In deze paragraaf komt een formule: a<sup>2</sup> = b<sup>2</sup> + c<sup>2</sup></p>
nadruk en belang
Binnen een paragraaf wil je soms een woord of een stuk zin laten opvallen. HTML heeft daar twee elementen voor, en het verschil zit in de betekenis die je aan die tekst geeft, niet in hoe het eruitziet.
Met het <strong>-element duid je aan dat een stuk tekst belangrijk is, of ernstig of dringend. Browsers tonen dit standaard vetgedrukt.
Met het <em>-element (van emphasis) leg je de klemtoon op een stuk tekst, zoals je dat ook met je stem zou doen wanneer je de zin voorleest. Browsers tonen dit standaard schuin.
<p>Deze oefening is <strong>verplicht</strong>.</p>
<p>Ik zei dat je <em>nu</em> moest vertrekken.</p>
Beide elementen mag je in elkaar nesten wanneer een stuk tekst zowel belangrijk is als klemtoon krijgt. Let er dan op dat je de elementen in de juiste volgorde opent en sluit.
<p>Een paragraaf tekst <strong><em>kan</em></strong> soms gewoon zinloos zijn.</p>
Je komt op het internet ook nog het <b>-element (bold) en het <i>-element (italic) tegen. Die zeggen enkel iets over de weergave en niets over de betekenis. Voorleessoftware en zoekmachines kunnen daar dus niets mee. Gebruik daarom <strong> en <em>.
citaten
We gaan vaak verwijzen naar werk van anderen. Hiervoor bestaan er verschillende mogelijkheden in HTML. Elk van deze mogelijkheden heeft een specifieke juiste toepassing. Het is belangrijk om de verschillende HTML-elementen dus goed uit elkaar te houden.
blokcitaat
Wanneer we een volledig citaat los willen plaatsen van andere teksten. Maken we gebruik van het <blockquote>-element.
<blockquote cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
<p>Did you ever stop to think, and forget to start again?</p>
</blockquote>
inline citaat
Het <q>-element gebruiken we dan eerder wanneer we het citaat verwerken in onze eigen tekst.
<p>As A.A. Milne said, <q cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">Some people talk to animals. Not many listen though. That's the problem.</q></p>
Je merkt in beide voorbeelden het cite-attribuut. Dit attribuut geeft de bron van het citaat weer. Er bestaat echter ook een <cite>-element dat wordt gebruikt om de titel van een werk te duiden (vb. de titel van een boek, een liedje, een film, een TV-serie, een schilderij, een beeldhouwwerk,...), maar nooit een te verwijzen naar een persoon.
afkortingen
Wanneer we in onze tekst een afkorting willen plaatsen, kunnen we met het <abbr>-element ook ineens de volledige versie ervan tonen. Hiervoor maak je gebruik van het title-attribuut.
<p><abbr title="Professor">Prof.</abbr> Stephen Hawking is a theoretical physicist and cosmologist.</p>
auteur van de website
Met het <address>-element kan je de contactinformatie van de auteur/eigenaar van een document of van een artikel meegeven aan de lezer. Dit element heeft echter een andere betekenis afhankelijk van zijn locatie in het document.
Als het <address>-element in een <body>-element staat stelt het de contactinformatie van de auteur van de een webpagina voor. Als het <address>-element in een <article>-element staat, stelt het de contactinformatie met betrekking tot dat artikel voor.