Hoe maak je tekst vetgedrukt? In HTML en CSS zijn daar verschillende manieren voor en in dit artikel wil ik deze even met je langslopen.

Van eenvoudig vet maken van woorden en tekst tot het gebruiken van koppen en tussenkoppen op volgorde van belangrijkheid.

Bold en strong

Allereerst hebben we de html tag <b>. Dit is de meest basale en eenvoudige vorm om een stukje tekst vet te maken. Bijvoorbeeld omdat je dat mooi vindt staan. Door deze tag te gebruiken geef je verder niets aan zoals nadruk.

Daar heb je namelijk een andere tag voor: <strong>. Met strong benadruk je een stukje tekst omdat je dit net wat belangrijker vindt dan de tekst die er omheen staat. Je geeft aan je lezers weer dat je nadruk ergens op legt, vandaar dat de Engelse benaming strong wordt gebruikt.

Wanneer je WordPress gebruikt en je maakt een stukje tekst vetgedrukt dan wordt hiervoor ook altijd de tag <strong> gebruikt.

Wil je wekelijks nieuwe tips over HTML & CSS, bloggen of websites maken? Meld je aan voor de HTML-site Nieuwsbrief!

Layout en nadruk

Uiterlijk zullen deze twee codes overigens geen verschil maken. Qua layout maakt het dus niet uit of je <strong> of <b> gebruikt. Maar qua nadruk is er dus wel een verschil.

Voor een zoekmachine die jouw site bezoekt en langskomt is er dus ook een verschil. De tekst die binnen <strong> staat wordt daadwerkelijk geïnterpreteerd als iets belangrijker dan de rest.

Voorbeelden:

Deze tekst wordt vetgedrukt en dit niet.

Deze tekst wordt vetgedrukt en dit niet.

Kopteksten

In HTML kun je nog meer doen om teksten belang mee te geven, namelijk de kopteksten. Je hebt de grootste kop, die vaak boven een artikel staat, tussenkoppen die boven bijvoorbeeld een paragraaf staan.

Deze worden aangegeven met de code <h1> t/m <h6>.

Er zijn dus zes groottes als het gaat om koppen waarbij <h1> de grootste is en <h6> de kleinste. Niet alleen de grootte geef je hiermee aan, maar ook de volgorde van belangrijkheid.

De koptekst <h1> is de belangrijkste kop, de kleinste is tegelijkertijd ook de minst belangrijke.

Op een website gebruik je ze vaak niet alle zes. Op mijn website gebruik ik bijvoorbeeld alleen de kopteksten <h1> (de titel van een artikel), <h3> (een tussenkop in een artikel) en <h4> (een kopje bij bijvoorbeeld extra informatie).

Deze kopteksten goed gebruiken heeft alles te maken met semantiek en dat is steeds belangrijker geworden in de opbouw van een website, in het gebruik van HTML.

Voorbeelden:

Dit is de kop

Dan een paragraaf

Dan een tussenkop

En weer een paragraaf, met een stukje vetgedrukte tekst

CSS en vetgedrukt

In CSS heb je ook de mogelijkheid om teksten, of delen van teksten vetgedrukt te maken. En met CSS kun je nog een stapje verder gaan omdat je kunt bepalen hoe vetgedrukt de tekst dan moet zijn.

Natuurlijk moeten de lettertypes die je gebruikt wel geschikt zijn voor de nuanceverschillen.

Eerst even de code, dan de uitleg.

Bij ‘class’ met de naam meneertje wordt font-weight gebruikt. In dit geval kiezen we voor bold. Daarmee krijg je dezelfde verschijning als een normale vetgedrukte tekst.

Je kunt ook een getal kiezen van 100 t/m 900 (alleen de honderdtallen die er tussenzitten dus 200, 300 enz.).
Een ‘normal’ lettertype heeft als equivalent het getal 400. Kies je voor ‘bold’ dan is dat gelijk aan 700.
900 is dus de meest vette vorm die je kunt gebruiken.

Maar nogmaals, de meeste lettertypes kennen eigenlijk alleen maar de varianten normal en bold.

Een voorbeeld van een lettertype die meerdere varianten krijgt is de Google webfont ‘Open Sans’.

Screenshot Google lettertype ‘Open Sans’ met vetgedrukte varianten