HTML voor gevorderden: teksten met een goede opmaak

“Plaats de tussenkopjes van je tekst tussen strong-tags”, een zin die je ongetwijfeld wel eens hebt gelezen in een auteursbriefing. Hoewel het gebruik van deze strong-tags, die tekst dikgedrukt maken, niks nieuws is voor de meeste auteurs op Textbroker, zijn de HTML-verwachtingen van klanten de laatste tijd gestegen. Het komt dan ook regelmatig voor dat we e-mails ontvangen van auteurs die niet weten hoe ze moeten omgaan met de opmaakwensen van de klant. Vanuit dit opzicht zetten we in dit artikel graag het gebruik van verschillende HTML-tags even op een rij.

HTML – wat is dat eigenlijk?

De afkorting HTML staat voor “Hypertext Markup Language” en dient ter opmaak van webteksten en -pagina’s. Het uitgangspunt van HTML was een standaard voor opmaak te ontwikkelen, waarbij het kopiëren van tekst van het ene programma naar het andere programma niet zou zorgen voor een verschil in opmaak. Ideaal dus om webteksten van lay-out te voorzien.

Waarvoor worden deze ’tags’ gebruikt?

Hoe belangrijk de opmaak van een tekst is, wordt duidelijk aan de hand van een voorbeeld. Stel je eens voor dat je de krant open zou slaan en dat de tekst van die krant geen enkele vorm van opmaak zou bevatten. Koppen zijn even groot als de broodtekst, er staan geen onderschriften bij afbeeldingen, en er wordt geen gebruik gemaakt van opsommingen en tabellen. Grote kans dat je snel stopt met lezen.

Op internet, waar de concentratie van de lezer beduidend minder is dan die van een krantlezer, is het opmaken van tekst zeer belangrijk, omdat het de lezer helpt snel te kunnen zien of de pagina relevante informatie bevat. Het is om deze reden dat ook zoekmachines opmaak waardevol vinden; het kan immers zorgen voor betere zoekresultaten. Vandaar dat zoekmachines ervoor kiezen websites met een goede opmaak hoger in de zoekresultaten te zetten.

Uiteraard weten de klanten van Textbroker dit ook, hetgeen de stijgende vraag naar het gebruik van HTML in de tekstopdrachten op ons platform verklaart. Om onze auteurs het hierbij zo gemakkelijk mogelijk te maken, beschrijven we hieronder nogmaals hoe de meest voorkomende HTML-tags ook alweer werken.

Koppen

Het gebruik van koppen en tussenkopjes helpt bij het opdelen van een tekst in verschillende alinea’s of hoofdstukken. Hierbij wordt gebruikgemaakt van de zogenaamde H-tags, die een bepaalde tekstgrootte met zich meebrengen. Een voorbeeld:

Naast h1, h2 en h3 kan er tot en met h6 worden gebruikt, waarbij elke tag respectievelijk een kleinere kop weergeeft. Nummers 4 tot 6 worden echter zeer zelden gevraagd op Textbroker, vooral gezien het feit dat ze enkel bij langere teksten ingezet dienen te worden.

Alinea’s en witregels

Er zijn binnen HTML twee tags die het mogelijk maken een tekst op te delen in alinea’s: de br- en de p-tag. Ze werken echter anders en dienen dan ook in verschillende situaties te worden gebruikt.

De br-tag zorgt simpelweg voor een ‘harde enter’ – het doorschrijven op de volgende regel. De p-tag daarentegen zorgt ervoor dat een blokje tekst in zijn geheel als paragraaf wordt weergegeven, met een witregel zowel voor als na de tekst. Het gebruik van de twee tags is gemakkelijk te illustreren door ze in te voegen in een tekstje.

P-tag:
<p>Dit is een alinea, waarbij de HTML-tags zorgen voor een nette paragraafindeling. Het handmatig toevoegen van witregels voor en na de alinea is daarbij niet nodig, dat doet de tag voor je.</p>

Br-tag:
Dit is zin 1. Dit is zin 2, die nog netjes achter de eerste zin komt te staan. <br />
Dit is zin 3, die vanwege de br-tag automatisch op de volgende regel wordt geplaatst.

Mocht je met behulp van de br-tag een witregel willen invoegen, dan dien je tweemaal de br-tag in te voegen:

Dit is zin 1.<br />
<br />
Dit is zin 2.

Er is nog een noemenswaardig verschil op te merken tussen de p- en br-tags, namelijk dat de br-tag zelfsluitend is, terwijl de p-tag een open- en sluittag heeft. Dit wil zeggen dat de br-tag slechts 1 stukje code is, terwijl de p-tag zowel aan het begin van de paragraaf als aan het einde van de paragraaf een stukje code nodig heeft:

Dit is tekst.<br />
Dit is tekst op de volgende regel.

<p>Dit is in zijn geheel een alinea.</p>

Let daarbij ook op de plaatsing van de slash binnen de tags.

Tekstopmaak: dikgedrukt, schuin en onderstreept

Uiteraard is het met HTML ook mogelijk afzonderlijke woorden of zinnen een bepaalde opmaak mee te geven. Veelgebruikt hierbij zijn dikgedrukt, schuin en onderstreept. Deze vormen van opmaak zorgen er vooral voor dat de lezer gemakkelijk de belangrijkste informatie uit individuele zinnen kan halen. Deze drie vormen van opmaak worden als volgt gecreëerd met HTML:

Links

Een verdere door klanten veelgevraagde eis is het plaatsen van links in een tekst, en we krijgen dan ook regelmatig mailtjes van auteurs hoe dit precies dient te gebeuren. Voor het plaatsen van links wordt in HTML de zogenaamde anchor-tag (a-tag) gebruikt. Deze ziet er als volgt uit:

Op het Textbrokerplatform is er echter ook de mogelijkheid deze tag in te voeren met behulp van een knopje, waardoor je als auteur niet zelf de code hoeft in te typen. Daarvoor doe je het volgende:

1. Schrijf de tekst die uiteindelijk een link moet worden (in onderstaand voorbeeld “Dit wordt een link”).
2. Selecteer deze tekst (dit kan ook slechts één woord of een zinsdeel zijn) en klik op het icoontje dat op een kettinkje lijkt.
   
3. Voer de link in, waarnaar het geselecteerde woord moet verwijzen en klik op OK.
   
4. In het tekstveld verschijnt nu automatisch de a-tag rondom de tekst, met het goede internetadres op de juiste plek.
   

Opsommingen en lijstjes

Een daarnaast veel voorkomende wens van klanten is het gebruik van opsommingen, vooral omdat het een tekst overzichtelijk maakt en de belangrijkste punten bondig kan samenvatten. Uiteraard is het mogelijk simpelweg een koppelteken voor zinnen te zetten, hetgeen een opsomming suggereert, maar het is ook mogelijk lijstjes en opsommingen met behulp van HTML te construeren. Dit ziet er vaak een stuk netter uit.

In de regel vragen de klanten van Textbroker om opsommingen met bulletpoints, maar het is ook mogelijk met HTML-lijstjes een nummering te vormen. Deze twee vormen maakt men respectievelijk met de ul- en de ol-tag, altijd in combinatie met de li-tag:

Tags combineren

Uiteraard kan het voorkomen dat je als auteur meerdere tags moet combineren. Denk bijvoorbeeld aan een dikgedrukte link of een onderstreept woord binnen een opsomming. In dit soort gevallen is het belangrijk in de gaten te houden dat HTML-tags van buiten naar binnen en van binnen naar buiten werken. Dit wil zeggen dat de laatst geopende tag, als eerste moet worden gesloten. Kijk bijvoorbeeld eens naar de volgende dikgedrukte link. Je zult zien dat de a-tag als eerste wordt geopend (voor het woord “Textbroker”), maar als laatste wordt gesloten:

<a href=”textbroker.nl”><strong>Textbroker</strong></a>

Tot slot

We hopen dat we je met deze handleiding de taal van het web iets duidelijker hebben kunnen maken. Tot slot willen we nog noemen dat er op internet websites bestaan waar men HTML-code kan testen. Dit kan absoluut handig zijn voor de auteurs van Textbroker, vooral wanneer de klant omvangrijke HTML-wensen heeft. Een voorbeeld van een dergelijke website is de Tryit Editor, waar men simpelweg een code plaatst en op “See Result »” klikt. Je ziet direct het resultaat en kan gemakkelijk controleren of dit overeenkomt met de wensen en eisen van de klant.

Mocht je na het lezen van dit artikel nog steeds vragen hebben over HTML, laat het ons dan weten. HTML kan soms ingewikkeld zijn, en we helpen je graag verder.