Enkele woorden of hele passages kunnen heel eenvoudig cursief en vet worden gemaakt. Allereerst de variant voor vetgedrukte tekst. Hiervoor zijn in principe twee HTML-elementen beschikbaar: b en strong.
Welkom bij <b>PSD-Tutorials.de</b>! <br /> Welkom bij <strong>PSD-Tutorials.de</strong>!
Een blik op het resultaat in de browser levert het volgende beeld op:
Blijkbaar zorgen beide elementen dus voor een identieke weergave. Waarom bestaan er dan toch twee verschillende elementen? In werkelijkheid zijn er nog andere weergavemogelijkheden voor websites dan die van de bekende standaardbrowsers. Denk bijvoorbeeld aan leesprogramma's voor blinde mensen of aan mobiele apparaten. De HTML-elementen die door het W3C worden aangeboden, zijn bedoeld ter ondersteuning van de semantiek. Zo betekent het b-element nu daadwerkelijk niet meer dat er iets vetgedrukt moet worden weergegeven. b betekent eerder een tekst die visueel wordt benadrukt, maar geen verhoogd belang heeft. Dit kan bijvoorbeeld gaan over productnamen of trefwoorden in documenten.
Het strong-element stond voorheen voor nadrukkelijkere benadrukking. em werd daarentegen gebruikt voor benadrukte, belangrijke tekst (empathisch). strong was in eerdere HTML-versies de versterking van em. Aan beide elementen wordt in HTML5 een andere betekenis toegekend.
Allereerst een tekst met normale nadruk.
<p> Katten zijn schattige dieren. </p>
Nu dezelfde tekst nogmaals, maar deze keer met de nadruk op het eerste woord.
<p> <em>Katten</em> zijn schattige dieren. </p>
Door het gebruik van em wordt de nadruk gelegd op het woord Katten. Dit zou bijvoorbeeld kunnen voorkomen in een discussie over welke dieren nu schattiger zijn, honden of katten.
Nu zou je in het voorbeeld ook het em-element kunnen toepassen op het woord zijn.
<p> Katten <em> zijn </em> schattige dieren. </p>
Delen die zijn gemarkeerd met em worden cursief weergegeven in de browser. Hetzelfde visuele effect kan worden bereikt met het i-element.
Volgens de werkversie van HTML5 staat het i-element nu niet meer voor cursief.
<p> Hartelijk welkom bij <i>PSD-Tutorials.de</i> </p>
Vanaf nu betekent dit element eigenlijk dat je er een andere sfeer mee wilt overbrengen. Het i-element is bijvoorbeeld interessant voor het markeren van technische termen of taxonomische benamingen.
Dit is allemaal behoorlijk theoretisch, dat weet ik. In principe zou je moeten proberen je aan de HTML5-richtlijnen te houden. Aan de andere kant zal niemand je natuurlijk de kop inslaan als je strong in plaats van b gebruikt.
<p> <em>Regel met em</em><br /> <i>Regel met i</i><br /> <strong>Regel met strong</strong><br /> <b>Regel met b</b> </p>
Uiteindelijk moeten de browserfabrikanten hier iets aan doen.
Voor de daadwerkelijke vormgeving van teksten die zijn voorzien van de genoemde elementen, is uiteindelijk toch CSS verantwoordelijk.
Afkortingen met abbr
Om een afkorting te markeren, wordt teruggegrepen naar hetzelfde element dat tot nu toe voor afkortingen is gebruikt, namelijk naar abbr.
Het Duits-Oostenrijkse bureau van <abbr title="World Wide Web Consortium">W3C</abbr> is sinds april 2009 gevestigd aan de Fachhochschule Potsdam.
Browsers die het abbr-element correct interpreteren, tonen de tekst die binnen het abbr-element is omsloten onderstreept.
Bovendien is het raadzaam om abbr een title-attribuut toe te wijzen. Daarin schrijf je meestal de volledige uitdrukking voor de afkorting. Wanneer de bezoeker met de muisaanwijzer over de afkorting gaat, wordt de uitdrukking getoond in een tooltip-venster.
Adresgegevens met address
Met het address-element kan men adresinformatie markeren.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Browsers tonen de inhoud van het address-element doorgaans cursief.
Programmacode markeren met code
Het code-element wordt gebruikt om programmacode te markeren. In die zin is er ten opzichte van eerdere HTML-versies niets veranderd. Nog steeds wordt code gebruikt voor dat doel.
<pre>
Dat is een HTML-kopsectie:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Meestal combineert men code met het pre-element om zo de inspringingen die in de programmacode worden gebruikt, te behouden.
De HTML5-specificatie raadt aan het class-attribuut te gebruiken in combinatie met het code-element. Aan dit attribuut kan men de taal toewijzen die wordt gebruikt binnen het code-element. Hier zijn enkele typische voorbeelden van hoe dergelijke aanduidingen eruit kunnen zien:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Of en hoe browsers deze instructies uitvoeren, is niet vastgelegd door het W3C.
<pre>
Dat is een HTML-kopsectie:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Op dit moment heeft het class-attribuut in ieder geval geen zichtbare effecten op de browser. Niettemin kunnen menselijke kijkers op deze manier zien in welke taal de programmacode is geschreven wanneer zij een blik werpen op de broncode van de pagina.
Kleinschrift met small
Het small-element was oorspronkelijk bedoeld om tekst kleiner dan normaal weer te geven. In HTML5 is small expliciet bedoeld voor kleine lettertjes. Dit kleine lettertype kan bijvoorbeeld het volgende bevatten:
• Copyrightinformatie
• Disclaimer
• Licentievoorwaarden
• Algemene voorwaarden
Het W3C benadrukt dat small niet gebruikt zou moeten worden voor lange tekstpassages.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Text onderstrepen
Je kunt woorden onderstrepen met behulp van het u-element. Hier is een voorbeeld:
<p>Welkom bij <u>PSD-Tutorials.de</u></p>
Het resultaat wordt als volgt weergegeven in de browser:
Als je naar het resultaat kijkt, is dat inderdaad het gewenste effect. Er is echter een addertje onder het gras. Onderstreepte teksten op internet staan doorgaans voor hyperlinks. Als je nu een onderstreepte tekst of woord weergeeft, denken bezoekers mogelijk dat het om een hyperlink gaat. De poging om erop te klikken zal natuurlijk mislukken. Je zou dus het onderstrepen moeten vermijden.
