Cookies
Webinar: bezielde blogs schrijven in 5 stappen
Ja, ik doe mee!

Page content

Wat is HTML en hoe zet je dit in?

Wat is HTML en hoe zet je dit in?

HTML staat voor HyperText Markup Language. Alle websites op het internet gebruiken HTML. Het is daarmee ook de basis van iedere webtekst op elke website.

In het Nederlands kun je deze code vertalen in opmaaktaal. Het is de opmaaktaal voor tekst in een tekstdocument.

Hoe ziet HTML eruit?

Als voorbeeld nemen we de HTML code van een vetgedrukte tekst.

Een vetgedrukte tekst creëer je op deze manier via de volgende code:

<strong>De tekst die vetgedrukt moet zijn</strong>

De benamingen van de toetsenbord combinaties

Alle HTML codes hebben de <, > en / als toetsenbord combinaties.

< heeft als benaming het minderdanteken.
> heeft als benaminghet meerdanteken.
/ heeft als benaming de schuine streep.

Hoe wijzig ik HTML?

Als je eenmaal weet hoe het werkt (dat is vaker zo), dan is het erg eenvoudig om een HTML code toe te voegen of aan te passen.

De meest gebruikte HTML codes zien er als volgt uit en schrijf je op deze manier:

Stap 1

Je begint met de minderdanteken naar links (<), je typt de opmaaktaal en typt vervolgens de meerdanteken naar rechts (>).

<opmaaktaal>

Stap 2

Vervolgens typ je het woord of de zin die je opgemaakt wilt hebben.

<opmaaktaal>Het woord of de zin die je opgemaakt wilt hebben

Stap 3

Tot slot moet je de HTML code sluiten. Dit doe je door wederom het minderdanteken naar links in te typen (<).

Anders dan in stap 1 moet je nu een schuine streep in de code zetten (/), om vervolgens dezelfde opmaaktaal in te typen zoals in stap 1, en te eindigen met een meerdanteken naar rechts (>).

Zo ziet de HTML code er dan uit:

<opmaaktaal>Het woord of de zin die je opgemaakt wilt hebben</opmaaktaal>

Waar wijzig ik een HTML code?

Het is binnen WordPress erg eenvoudig om je HTML code aan te passen.

Rechtsboven in de pagina waarin jij je artikel schrijft kun je kiezen uit Visual en Tekst (zie onderstaande afbeelding).

Onder Tekst staan de codes van je artikel. Onder Visual zie je het visuele beeld dat is gecreëerd door de codes. Dit is dan ook het beeld dat de bezoeker van de website krijgt te zien en hoogstwaarschijnlijk ook de pagina waarin jij je artikelen schrijft.

HTML codes in WordPress

Tekst

Wanneer je op Tekst drukt zie je dat het artikel wat je aan het bewerken bent veranderd in een soort codetaal.

Je moet het namelijk zo zien:

Een website bestaat volledig uit code, dit geldt ook voor je blogs en artikelen. In elke website waarin jij vetgedrukte teksten, linkjes, kopteksten, schuingedrukte teksten en alle andere bewerkingen ziet schuilt op de achtergrond een code om deze bewerkingen waar te maken.

HTML WordPress

Welke HTML codes zijn er?

Er zijn ontelbaar veel HTML codes. Ik heb de belangrijkste, hieronder voor je beschreven.

Tekst vetgedrukt

Een vetgedrukte test ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<strong>De tekst</strong>

Tekst cursief

Een cursieve tekst, ofwel een schuin gedrukte tekst, ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<em>De tekst</em>

Een link naar een website

Een link naar een andere pagina of website ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<a href="De link van de website">Het stukje tekst die de link krijgt</a>

Voorbeeldje:

Ik wil jou via een link naar mijn cursus ‘vindbare webtekst opbouwen’ krijgen. Die link plaats ik dus in een woord of tekst zodat jij er op kan klikken.

In codetaal ziet dat er als volgt uit:

<a href="https://geryaal.nl/online-diensten/">Ga nu naar mijn cursus 'vindbare webtekst opbouwen'</a>

Op de website krijgen de bezoekers het op deze manier te zien:

Ga nu naar mijn cursus ‘vindbare webtekst opbouwen’

Een tekst in de blockquote

Een tekst in de blockquote ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<blockquote>De tekst</blockquote>

Een doorgestreepte tekst

Een doorgestreepte tekst ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<del>De tekst</del>

Een tekst met een streep eronder

Een tekst met een streep eronder ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<ins>De tekst</ins>

Een opsomming met puntjes

Een opsomming met puntjes ziet er voor de bezoeker zo uit:

  • De tekst in regel 1
  • De tekst in regel 2
  • De tekst in regel 3

In de HTML code is het vertaald naar:

<ul><li>De tekst in regel 1</li>
<li>De tekst in regel 2</li>
<li>De tekst in regel 3</li></ul>

Een opsomming in de tekst heeft 2 codes. Een code waarmee je aangeeft dat je wilt opsommen in de tekst (codetaal ul) en de code voor elke extra regel in de opsomming (codetaal li).

De opmaak van de opsomming met puntjes begint dus met <ul> en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code </ul>.
Elke nieuwe regel in de opsomming begint met <li> waarbij je aan het einde van deze regel de code sluit met </li>

Een opsomming met cijfertjes

Een opsomming met cijfertjes ziet er voor de bezoeker zo uit:

  1. De tekst in regel 1
  2. De tekst in regel 2
  3. De tekst in regel 3

In de HTML code is het vertaald naar:

<ol><li>De tekst in regel 1</li>
<li>De tekst in regel 2</li>
<li>De tekst in regel 3</li></ol>

Een opsomming met cijfertjes werkt precies hetzelfde als een opsomming met puntjes. Je vervangt nu alleen de codetaal ul voor ol.

De opmaak van de opsomming met cijfertjes begint dus met <ol> en bij de allerlaatste zin van de opsomming sluit je de opmaak door de code </ol>.
Elke nieuwe regel in de opsomming begint met <li> waarbij aan het einde van deze regel je de code sluit met </li>.

Een code uitlichten

Zoals je in dit artikel ziet licht ik de codes uit door markeringen. Deze markeringen worden vaak ook specifiek gebruikt voor codes. Voor de bezoeker ziet dat er zo uit:

De tekst

In de HTML code is het vertaald naar:

<code>De tekst</code>

Kopteksten

In WordPress en andere websitesystemen kun je gebruik maken van 6 soorten kopteksten die allen hun eigen grootte en waarde hebben. We noemen deze kopteksten ook wel H1, H2, H3, H4, H5 en H6.

Ze hebben allemaal een soortgelijke code waarvan logischerwijs alleen de cijfers verschillen. De codes zien er als volgt uit:

Koptekst 1, ofwel H1

Een koptekst 1 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h1>De tekst</h1>

Koptest 2, ofwel h2

Een koptekst 2 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h2>De tekst</h2>

Koptest 3, ofwel h3

Een koptekst 3 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h3>De tekst</h3>

Koptest 4, ofwel h4

Een koptekst 4 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h4>De tekst</h4>

Koptest 5, ofwel h5

Een koptekst 5 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h5>De tekst</h5>

Koptest 6, ofwel h6

Een koptekst 6 ziet er voor de bezoeker zo uit:

De tekst

In de HTML code is het vertaald naar:

<h6>De tekst</h6>

Moet ik het ook op deze manier aanpassen?

Ik hoor je al bijna denken:

‘Moet ik al deze codes dan echt toepassen als ik mijn website wil bewerken?’

Geen paniek! Want er is een veel overzichtelijkere manier.

Gebruik maken van HTML

Gebruik maken van HTML codes is niet voor iedereen interessant. Er zijn echter ook mensen die een artikel schrijven waarbij ze zelf de HTML codes in typen. Sommige mensen vinden dit een prettige manier van werken.

Daarnaast kan het gebeuren dat de codes in het artikel niet helemaal kloppen waardoor je het op deze manier makkelijk aan kan passen.

Voor het toevoegen van bepaalde widgets, die WordPress niet in het besturingssysteem heeft zitten, ben je genoodzaakt om deze widget via de HTML code toe te voegen (maar laten we het nu niet te ingewikkeld maken).

Taakbalk

Er is namelijk een veel overzichtelijkere manier om deze HTML codes te gebruiken.

Kijk maar eens naar de taakbalk boven in de pagina op het moment dat je een artikel aan het schrijven bent. Elke handeling die je vanuit deze taakbalk uitvoert vertaald zich op de achtergrond in een HTML code.

Taakbalk in WordPress

Voorbeeldje:

Ik wil het allereerste woord van dit artikel vetgedrukt hebben.

Ik selecteer het woord HTML (door met de muis over het woord te gaan terwijl ik tegelijkertijd de linkermuisknop ingedrukt houd) en druk in de taakbalk op B.

Vetgedrukte tekst

Zoals je in onderstaande afbeelding ziet is het woord nu vetgedrukt. Op de achtergrond is deze handeling vertaald naar een HTML code.

HTML vetgedrukte tekst in WordPress

De HTML pagina

We gaan even kijken hoe deze bewerking is vertaald naar een HTML code.

Wanneer ik rechts bovenin op Tekst druk kom ik in de HTML pagina terecht.

Tekst HTML pagina

Vanaf daar kun je alle HTML codes van de tekst zien en zie je dat er ook een HTML code staat voor de tekst die ik vetgedrukt heb gemaakt.

HTML code strong

Experimenteer met HTML

Je hoeft deze HTML codes echt niet te begrijpen om een succesvolle website te creëren. Ik kan mij goed voorstellen dat je niks van al deze codes snapt.

Het kan echter wel erg leuk zijn om met deze codes te experimenteren. Je zult zien dat artikelen schrijven nóg makkelijker wordt wanneer je op de hoogte bent van deze codes.

Veel plezier! 😉

Gerelateerde WordPress artikelen

Gratis SEO Checklist

Ik heb een gratis SEO Checklist voor je klaarstaan waarmee je je blogs/website van A tot Z optimaliseert. Klik op de afbeelding hieronder of voorgaande link om deze te downloaden.

SEO Checklist Downloaden

    Comment Section

    0 reacties op “Wat is HTML en hoe zet je dit in?

    Plaats een reactie


    *