Skip to main content

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.

“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:

Tags

Resultaat

<h1>Dit is een titel</h1>

Dit is een titel

<h2>Dit is een tussenkopje</h2>

Dit is een tussenkopje

<h3>Dit is een tussenkopje</h3>

Dit is een tussenkopje

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:

Tags

Resultaat

<strong>Belangrijke informatie</strong>Belangrijke informatie
<i>Belangrijke informatie</i>Belangrijke informatie
<u>Belangrijke informatie</u>Belangrijke informatie

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:

Tag

Resultaat

Hoe wordt men auteur bij <a href=”textbroker.nl”>Textbroker</a>?Hoe wordt men auteur bij Textbroker?

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

Resultaat

<ul>
<li>Een bulletpoint</li>
<li>Een bulletpoint </li>
<li> Een bulletpoint </li>
</ul>
  • Een bulletpoint
  • Een bulletpoint
  • Een bulletpoint
<ol>
<li>Eerste punt</li>
<li>Tweede punt</li>
<li>Derde punt</li>
</ol>
  1. Eerste punt
  2. Tweede punt
  3. Derde punt

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.


Reacties

217333 26. januari 2016 - 14:52

Op zich is dit handig om te weten voor degenen die nauwelijks ervaring hebben met html en/of cms systemen. Overigens mag er verondersteld worden dat een H1 kop inderdaad groer is dan een H2 kop, echter dit wordt in de css stylesheet gedefinieerd, niet in de html code zelf.

Beantwoorden

Emile Haffmans 14. september 2017 - 10:15

Dank voor je toevoeging! Dat klopt natuurlijk (hoewel onze auteurs uiteraard niet kunnen weten hoe de stylesheet van de klant in elkaar zit).

Beantwoorden

F.J. Verweij 11. september 2017 - 11:04

Als je een gewone tekst hebt in alinea’s met daartussen en witregel en boven elke alinea gebruik je een kopje, hoe zit het dan met het aantal witregels? Moet er na een kopje een witregel komen? Dan wordt het:

laatste zin alinea
witregel
kopje
witregel
volgende alinea

Of moeten, als je na een kopje een witregel gebruikt, er twee witregels volgen aan het einde van de alinea erboven?
Dus

Laatste zin alinea
witregel
witregel
kopje
witregel
eerste zin nieuwe alinea.

Of:
laatste zin alinea
witregel
kopje
GEEN alinea
eerste zin alinea.

Beantwoorden

Emile Haffmans 14. september 2017 - 10:17

Doorgaans worden er na tussenkopjes GEEN witregels geschreven. Na de titel van de tekst echter wel. Zo dus:

– Titel
– Witregel
– Eerste alinea
– Witregel
– Tussenkopje
– Tweede alinea

Mocht je hier vragen over hebben, dan mag je ons altijd mailen op [email protected]

Beantwoorden

Coen Naninck 6. februari 2018 - 17:55

In bovenstaande tekst staat dat tussenkopjes in strong tags moeten worden weergegeven terwijl later in de tekst staat dat daar h2, h3, etc. tags voor worden gebruikt. Vanwaar deze stelling?

Tussenkopjes moeten ALTIJD middels laatstgenoemde tags worden weergegeven; NOOIT middels strong tags. De strong tags zijn ervoor om nadruk te leggen op een woord, maar het gebruik ervan om als koptekst te fungeren is semantisch niet correct.

Nb. Op deze manier wordt het zoekmachines ook lastiger gemaakt om verschillende tekstonderdelen van elkaar te onderscheiden en kan het de pagina ‘ranking’ (Google) ook negatief beïnvloeden.

Punt 1 onder Links mist trouwens een punt aan het einde. 😉

Beantwoorden

Emile Haffmans 29. juli 2019 - 10:25

Dag Coen,

Goed punt! Je hebt absoluut gelijk dat over het algemeen H2- en H3-tags voor tussenkopjes gebruikt dienen te worden. Enige kanttekening daarbij is dat onze klanten het soms anders aanvragen (en daarbij vragen om strong-tags), maar dan staat dat netjes in de briefing van de opdracht genoemd.

Het puntje bij ‘Links’ heb ik nog even toegevoegd 🙂

Groeten uit Mainz,
Emile

Beantwoorden

Marjolein 17. maart 2019 - 15:29

Hoe maak je de opsomming 2.1, 2.2. etc. Ik probeer die te vinden maar kom het nergens tegen, ook in mijn boeken niet.

Alvast hartelijk dank voor de uitleg!

Groeten,
Marjolein

Beantwoorden

Emile Haffmans 29. juli 2019 - 10:22

Dag Marjolein, helaas is het in ons systeem niet mogelijk opsommingen te maken met decimalen (hetgeen sowieso relatief ingewikkeld is in HTML).

Mocht je hier verdere vragen over hebben, stuur ze dan gerust naar [email protected]

Succes!

Beantwoorden

O’Neil Beckford 26. juli 2019 - 22:01

Ik was bezig met mijn eerste tekst voor de textbroker webpagina, toen zag ik dat er geen HTML text editor boven was. Daarom had ik mijn tekst niet volledig kunnen afmaken. Ik zou mijn tekst kunnen inleveren maar dan zou ik de titel niet in H1 formaat kunnen veranderen en ook de tussenkopjes niet in H2 kunnen veranderen om te publiceren.

Wat zou ik nu kunnen doen in dit geval? Zou ik de tekst zomaar hoe het is kunnen opsturen of de naam van de tekst in HTML code opschrijven? Laat maar aub weten wat zou ik hiermee kunnen doen.

Groeten,
O’Neil

Beantwoorden

Emile Haffmans 29. juli 2019 - 10:11

Dag O’Neill, onze editor heeft opties voor de meest belangrijke HTML-tags. Als je andere wilt, dien je die zelf in de tekst te zetten, zoals in dit artikel wordt besproken.

Mocht je hier verdere vragen over hebben, stuur dan gerust een mailtje naar [email protected]

Succes!

Beantwoorden

Heeft u een vraag of opmerking bij een artikel? Laat het ons weten!

Uw e-mailadres wordt niet openbaar gemaakt. Verplichte velden zijn gemarkeerd *

*
*

Managed-Service

Wilt u complete tekstprojecten uitbesteden en de absolute topklasse in tekstkwaliteit ontvangen? Bent u geïnteresseerd in uitgebreide contentservices, zoals blogmanagement? Maak dan kennis met onze Managed-Service en profiteert u van ons Alles-In-Eén-Pakket.

Vraag vrijblijvend een offerte aan!

Self-Service

Heeft u relevante up-to-date content nodig? Binnen Self-Service bestelt u snel en eenvoudig uw tekst naar wens – en dat tegen topvoorwaarden.

Nu gratis aanmelden als opdrachtgever!

Auteurs

Duizenden auteurs wereldwijd verdienen bij dé tekstmarktplaats Textbroker geld met hun teksten. Ze bepalen zelf wanneer en hoeveel zij schrijven en kunnen zich zo verzekerd zien van een flexibel inkomen. Lees hier hoe je jouw woorden omzet in klinkende munt.

Nu gratis aanmelden als auteur!