{"id":113684,"date":"2025-06-16T22:36:34","date_gmt":"2025-06-16T19:36:34","guid":{"rendered":"https:\/\/elementor.com\/blog\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/"},"modified":"2025-12-24T07:15:39","modified_gmt":"2025-12-24T05:15:39","slug":"spatie-toevoegen-in-html-codes-en-tips-ultieme-gids","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/","title":{"rendered":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"113684\" class=\"elementor elementor-113684 elementor-1471\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82b658d e-flex e-con-boxed e-con e-parent\" data-id=\"82b658d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59838ff elementor-widget elementor-widget-text-editor\" data-id=\"59838ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Hoewel het toevoegen van een heleboel spaties in je HTML-code de eenvoudigste oplossing lijkt, zul je al snel merken dat browsers soms meespelen.<br \/>\nZe hebben de neiging om meerdere spaties samen te vouwen tot \u00e9\u00e9n enkele spatie, waardoor je beoogde lay-out vaak wordt verstoord.<br \/>\nIn deze gids behandelen we de fijne kneepjes van HTML-spaties en voorzien we je van alle technieken die je nodig hebt om een meester te worden in witruimte &#8211; vooral als je de krachtige websitebouwer Elementor gebruikt.  <\/span><\/p>\n<h2><b>HTML-spati\u00ebring begrijpen (en waarom spaties soms samenvallen)<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Het toevoegen van extra spaties in je HTML-code is de eenvoudigste manier om scheiding aan te brengen tussen woorden of elementen.<br \/>\nWebbrowsers hebben echter hun eigen idee\u00ebn over het weergeven van witruimte.<br \/>\nDit is het belangrijkste concept dat je moet begrijpen:  <\/span><\/p>\n<p><b>Browsers vouwen meerdere spaties samen:<\/b><span style=\"font-weight: 400;\">  Als je vijf spaties achter elkaar typt in je HTML, zal de browser dat meestal weergeven als een enkele spatie op de webpagina.<br \/>\nDit gedrag is ontworpen om tekst gemakkelijker aan te passen aan verschillende schermformaten en apparaten. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Stel je bijvoorbeeld voor dat je extra spaties probeert toe te voegen tussen woorden in een zin binnen een alinea tekst.<br \/>\nWanneer je die tekst in een webbrowser bekijkt, zullen de extra spaties waarschijnlijk verdwijnen, waardoor je een normale woordspatie overhoudt.<br \/>\nDit kan frustrerend zijn als je precieze controle nodig hebt over de lay-out of opmaak van je inhoud.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gelukkig zijn er veel betere manieren om de spati\u00ebring in HTML te regelen, zodat je precies de resultaten krijgt die je wilt.<\/span><\/p>\n<h2><b>Kerntechnieken voor het toevoegen van ruimte in HTML<\/b><\/h2>\n<h3><b>Niet-brekende spaties ( )<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">De niet-brekende spatie is je geheime wapen om te voorkomen dat woorden automatisch afbreken aan het einde van een regel.<br \/>\nDe spatie wordt in HTML weergegeven met de speciale entiteit Zie het als de lijm die twee woorden bij elkaar houdt, zodat ze altijd naast elkaar verschijnen. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier blinken niet-brekende spaties uit:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Woordparen behouden:<\/b><span style=\"font-weight: 400;\"> Je wilt bijvoorbeeld titels bij elkaar houden zoals &#8220;Dr. Smith&#8221; of ervoor zorgen dat een prijs en valutasymbool niet worden gesplitst (bijvoorbeeld &#8220;$100&#8221;).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Lastige regeleinden voorkomen:<\/b><span style=\"font-weight: 400;\">  Soms wordt een enkel woord naar de volgende regel verplaatst, waardoor er een afleidend gat ontstaat.<br \/>\nEen niet-brekende spatie kan dat woord bij de rest van de zin houden. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Opzettelijke spaties maken:<\/b><span style=\"font-weight: 400;\"> Je kunt meerdere entiteiten op een rij gebruiken om meer dan \u00e9\u00e9n spatie in te voegen, maar onthoud dat er betere manieren zijn om met grotere spaties om te gaan (die we later zullen behandelen).<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Om een niet-breekbare spatie te gebruiken, voeg je simpelweg in waar je de niet-breekbare spatie wilt hebben.<br \/>\nBijvoorbeeld: <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-505d09c elementor-widget elementor-widget-code-highlight\" data-id=\"505d09c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>html\r\nWe welcome Dr.&nbsp;Smith to our team.\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d94887e elementor-widget elementor-widget-text-editor\" data-id=\"d94887e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In dit voorbeeld blijven &#8220;Dr.&#8221; en &#8220;Smith&#8221; bij elkaar staan, zelfs als de browser het formaat van de tekst wil aanpassen.<\/span><\/p>\n<h3><b>Voorgeformatteerde tekst (&lt;pre&gt;)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">De tag &lt;pre&gt; is het hulpmiddel bij uitstek als je precies de spaties en regeleinden wilt behouden die je in je HTML-code hebt getypt.<br \/>\nHet is als een speciale container die tegen de browser zegt: &#8220;Afblijven! Laat deze tekstopmaak zoals hij is. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dit is waarom de &lt;pre&gt; tag nuttig is:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Code snippets: <\/b><span style=\"font-weight: 400;\">zijn de standaard manier om blokken code op een webpagina weer te geven, waarbij je zorgt voor de juiste inspringing en spati\u00ebring van de code.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Po\u00ebzie of tekstkunst weergeven:<\/b><span style=\"font-weight: 400;\"> Als je een gedicht wilt weergeven waarbij regelafbrekingen en spati\u00ebring cruciaal zijn voor de presentatie, dan zorgt de tag &lt;pre&gt; ervoor dat je opmaak intact blijft.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gegevens in tabelvorm (op een beperkte manier):<\/b><span style=\"font-weight: 400;\"> Hoewel niet primair ontworpen voor tabellen, kan de tag &lt;pre&gt; worden gebruikt om eenvoudige gegevens in tabelvorm weer te geven, waarbij spaties fungeren als scheidingsteken tussen &#8216;kolommen&#8217;.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Om voorgeformatteerde tekst te gebruiken, wikkel je je inhoud in de tags &lt;pre&gt; en &lt;\/pre&gt;.<br \/>\nBijvoorbeeld: <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd86065 elementor-widget elementor-widget-code-highlight\" data-id=\"dd86065\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><pre>\r\n  This is a line of text.\r\n  This is another line.\r\n        With extra spaces.\r\n<\/pre>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-142bd38 elementor-widget elementor-widget-text-editor\" data-id=\"142bd38\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dit zou precies worden weergegeven zoals je het hebt getypt, met alle regels en spaties behouden.<\/span><\/p>\n<h3><b>Regeleindes (&lt;br&gt;)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">De tag &lt;br&gt; is een eenvoudig maar krachtig hulpmiddel om een regeleinde te forceren binnen een blok tekst.<br \/>\nIn tegenstelling tot niet-brekende spaties, die de woordafstand be\u00efnvloeden, voegt de tag &lt;br&gt; een breuk in waardoor de tekst verder gaat op de volgende regel. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier lees je wanneer je de tag &lt;br&gt; moet gebruiken:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Regels scheiden in gedichten of adressen:<\/b><span style=\"font-weight: 400;\"> Als je specifieke regels van een gedicht of adres op hun regel wilt laten verschijnen, biedt de tag &lt;br&gt; een nette oplossing.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Korte pauzes binnen een alinea maken:<\/b><span style=\"font-weight: 400;\">  Soms wil je een kleine onderbreking binnen een alinea zonder de grotere spati\u00ebring die hoort bij het maken van een hele nieuwe alinea.<br \/>\nDe tag &lt;br&gt; werkt hier goed voor. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Om de &lt;br&gt; tag te gebruiken, voeg je hem gewoon in waar je de regeleinde wilt laten plaatsvinden.<br \/>\nHet is een zelfsluitende tag, wat betekent dat je geen aparte afsluitende &lt;\/br&gt; tag nodig hebt. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Voorbeeld:<\/span><\/p><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-915d6d8 elementor-widget elementor-widget-code-highlight\" data-id=\"915d6d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>\"Roses are red,<br>Violets are blue,<br>This poem uses line breaks,<br>And you can too!\"\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-66a0dd2 elementor-widget elementor-widget-text-editor\" data-id=\"66a0dd2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Probeer spaarzaam om te gaan met &lt;br&gt; tags.<br \/>\nVaak zijn er meer semantisch geschikte manieren om je inhoud te structureren, die we hierna zullen behandelen met paragrafen (&lt;p&gt;). <\/span><\/p>\n<h3><b>Alinea&#8217;s (&lt;p&gt;)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">De bescheiden tag &lt;p&gt; is de ruggengraat van de inhoudsorganisatie op webpagina&#8217;s.<br \/>\nHet definieert een paragraaf, een duidelijk blok tekst dat visueel gescheiden is van andere blokken op de pagina.<br \/>\nBrowsers voegen automatisch ruimte toe (meestal in de vorm van een verticale marge) boven en onder elke alinea, waardoor je inhoud structuur en ademruimte krijgt.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hier lees je waarom alinea&#8217;s belangrijk zijn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Leesbaarheid:<\/b><span style=\"font-weight: 400;\"> Alinea&#8217;s breken grote muren van tekst op in hanteerbare brokken, waardoor je inhoud makkelijker te scannen en te verteren is.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Semantische betekenis:<\/b><span style=\"font-weight: 400;\"> Het gebruik van &lt;p&gt; tags vertelt browsers en zoekmachines dat dit een afzonderlijke eenheid van inhoud is, waardoor machines de structuur van je pagina beter begrijpen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Stylingcontrole:<\/b><span style=\"font-weight: 400;\">  Met <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"23154\">CSS<\/a> kun je stijlen toepassen op alinea&#8217;s, zoals aangepaste lettertypen, tekstgroottes, kleuren en meer.<br \/>\nHoewel we ons later meer zullen richten op CSS spati\u00ebringstechnieken, is het begrijpen van &lt;p&gt; tags essentieel. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Het gebruik van paragraaftags is eenvoudig.<br \/>\nOmwikkel elke alinea van je tekst met openende &lt;p&gt; en sluitende &lt;\/p&gt; tags. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Gebruik geen <\/span><span style=\"font-weight: 400;\">&lt;p&gt;<\/span><span style=\"font-weight: 400;\">  tags alleen maar om spaties in te voegen.<br \/>\nCSS biedt veel krachtigere en preciezere hulpmiddelen om de ruimte tussen elementen op je pagina te regelen. <\/span><\/p>\n<h3><b>Spati\u00ebren met CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">HTML biedt basisgereedschappen voor spati\u00ebring, maar CSS geeft je onge\u00ebvenaarde controle over de spati\u00ebring van elementen op je website.<br \/>\nVan het verfijnen van marges en opvulling tot het aanpassen van teksteigenschappen, met CSS kun je pixel-perfecte lay-outs maken. <\/span><\/p>\n<h3><b>Marges<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Zie marges als de onzichtbare ruimte rond een element, die een buffer vormt tussen het element en zijn buren.<br \/>\nJe kunt de marges aan alle vier de kanten van een element bepalen: boven, rechts, onder en links. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dit is waarom marges krachtig zijn:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementen scheiden:<\/b><span style=\"font-weight: 400;\"> Marges zijn de belangrijkste methode om visuele scheiding aan te brengen tussen inhoudsblokken, secties, koppen, afbeeldingen en meer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Algemene pagina-indeling:<\/b><span style=\"font-weight: 400;\"> Marges spelen een cruciale rol bij het bepalen van de algemene structuur en &#8220;witruimte&#8221; van je website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Focus en nadruk:<\/b><span style=\"font-weight: 400;\"> Door strategisch grotere marges te gebruiken, kun je de aandacht vestigen op specifieke elementen op de pagina.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">In CSS kun je marges instellen met de eigenschap margin.<br \/>\nHier zijn een paar voorbeelden: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>marge:<\/b><span style=\"font-weight: 400;\"> 20px; (Hiermee wordt aan alle zijden een marge van 20 pixels toegepast)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>marge:<\/b><span style=\"font-weight: 400;\"> 10px 25px; (Stelt een marge in van 10 pixels boven\/onder en een marge van 25 pixels links\/rechts)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>marge: <\/b><span style=\"font-weight: 400;\">5px 10px 15px 20px; (Stelt afzonderlijke marges in voor boven, rechts, onder en links, in de volgorde met de klok mee)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Marges kunnen worden ingesteld met pixels (px), percentages (%) of andere CSS-eenheden zoals em en rem.<br \/>\nNegatieve marges kunnen ook worden gebruikt om overlappende effecten te cre\u00ebren. <\/span><\/p>\n<h3><b>Opvulling<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Padding is de ruimte tussen de inhoud van een element en zijn rand.<br \/>\nIn tegenstelling tot marges, die een scheiding cre\u00ebren buiten een element, vergroot padding de ruimte binnen een element. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dit is waarom padding een superster is op het gebied van afstand houden:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ademruimte voor inhoud:<\/b><span style=\"font-weight: 400;\"> Opvulling voorkomt dat tekst of andere inhoud tegen de randen van de houder botst, waardoor de leesbaarheid en het visuele comfort verbeteren.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controle over de achtergrond:<\/b><span style=\"font-weight: 400;\"> Als een element een achtergrondkleur of -afbeelding heeft, is de padding de plek waar die achtergrond zichtbaar is.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuele nadruk:<\/b><span style=\"font-weight: 400;\"> Door een grotere padding toe te passen, kun je een element groter en prominenter laten lijken.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Net als marges kun je opvulling regelen met de padding eigenschap in CSS.<br \/>\nDe syntaxis is hetzelfde: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>opvulling: <\/b><span style=\"font-weight: 400;\">20px; (past een opvulling van 20 pixels toe aan alle zijden)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>opvulling:<\/b><span style=\"font-weight: 400;\"> 10px 25px; (Stelt een opvulling in van 10 pixels boven\/onder en een opvulling van 25 pixels links\/rechts)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>opvulling: <\/b><span style=\"font-weight: 400;\">5px 10px 15px 20px; (Stelt individuele opvulling in voor boven, rechts, onder en links in met de klok mee)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Onthoud dat marges ruimte buiten een element plaatsen, terwijl padding ruimte binnen het element cre\u00ebert.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wanneer zowel margin als padding worden toegepast, is de totale ruimte tussen elementen een combinatie van de twee.<br \/>\nOok strekt de achtergrond van het element zich uit in het gebied van de padding. <\/span><\/p>\n<h3><b>Eigenschappen tekst<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">CSS biedt een verzameling eigenschappen die expliciet zijn ontworpen om te regelen hoe tekst wordt uitgespatieerd en opgemaakt binnen elementen.<br \/>\nLaten we de belangrijkste eens op een rijtje zetten: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>tekst-indent:<\/b><span style=\"font-weight: 400;\">  Deze eigenschap laat de eerste regel tekst inspringen binnen een element op blokniveau, zoals een paragraaf.<br \/>\nHet wordt vaak gebruikt om de traditionele stijl voor het inspringen van alinea&#8217;s te cre\u00ebren. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Voorbeeld: text-indent: 30px; (Laat de eerste regel van een alinea 30 pixels inspringen)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>regelhoogte:<\/b><span style=\"font-weight: 400;\">  Dit stelt de verticale afstand tussen regels tekst in, ook wel voorloop genoemd.<br \/>\nEen grotere regelhoogte vergroot de ruimte tussen de regels, waardoor tekst beter leesbaar wordt. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><b>Voorbeeld: <\/b><span style=\"font-weight: 400;\">line-height: 1.6; (Stelt de regelhoogte in op 1,6 keer de lettergrootte, voor voldoende tussenruimte)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>tussenruimte:<\/b><span style=\"font-weight: 400;\">  Regelt de hoeveelheid ruimte tussen woorden.<br \/>\nGebruik dit om de horizontale ruimte tussen woorden te vergroten of te verkleinen. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><b>Voorbeeld:<\/b><span style=\"font-weight: 400;\"> word-spacing: 5px; (Voegt 5 pixels extra ruimte toe tussen elk woord)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>interlinie:<\/b><span style=\"font-weight: 400;\">  Past de afstand tussen afzonderlijke letters aan, ook wel tracking genoemd.<br \/>\nPositieve waarden laten letters verder uit elkaar staan, terwijl negatieve waarden ze dichter bij elkaar drukken. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Voorbeeld: letter-spacing: 2px; (vergroot de ruimte tussen letters met 2 pixels)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>witruimte:<\/b><span style=\"font-weight: 400;\">  Deze eigenschap bepaalt hoe een browser omgaat met witruimte binnen de inhoud van een element.<br \/>\nBelangrijke waarden zijn onder andere: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>normaal<\/b><span style=\"font-weight: 400;\">: Standaard gedrag; klapt meerdere spaties in.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>nowrap<\/b><span style=\"font-weight: 400;\">: Voorkomt dat tekst naar nieuwe regels wordt gewrapt, zelfs als dit betekent dat de container overloopt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>pre<\/b><span style=\"font-weight: 400;\">: Vergelijkbaar met de tag &lt;pre&gt;, maar behoudt alle witruimte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><b>pre-line<\/b><span style=\"font-weight: 400;\">: Vouwt spaties in zoals normaal, maar behoudt regeleinden.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Teksteigenschappen kunnen worden toegepast op alinea&#8217;s, koppen en andere tekstelementen om hun uiterlijk aan te passen.<br \/>\nExperimenteer vrijuit om de perfecte balans voor je inhoud te vinden. <\/span><\/p>\n<h2><b>Verder dan de basis: Geavanceerde spati\u00ebringstechnieken<\/b><\/h2>\n<h3><b>Lege elementen en zichtbaarheid<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Soms is een stiekem &#8220;onzichtbaar&#8221; element de oplossing voor lastige ruimtebehoeften.<br \/>\nDit is hoe het werkt: <\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maak een leeg element:<\/b><span style=\"font-weight: 400;\"> Vaak wordt een &lt;div&gt; of een &lt;span&gt; gebruikt.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geef het afmetingen:<\/b><span style=\"font-weight: 400;\"> Gebruik CSS om een breedte en hoogte in te stellen voor dit element.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verberg de inhoud:<\/b><span style=\"font-weight: 400;\"> Gebruik de eigenschap zichtbaarheid: verborgen om het element zelf te laten verdwijnen, terwijl de afmetingen nog steeds ruimte op de pagina cre\u00ebren.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Deze techniek lijkt misschien vreemd, maar kan handig zijn voor het cre\u00ebren van een vaste spati\u00ebring als de andere methoden niet helemaal goed zijn.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Hoewel dit werkt, is het vaak beter om meer semantische CSS oplossingen te vinden door marges, opvulling of de onderstaande technieken te gebruiken.<\/span><\/p>\n<h3><b>Pseudo-elementen ::voor en ::na<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Met pseudo-elementen kun je specifieke delen van een element stijlen en, nog belangrijker, ruimte geven zonder je HTML te vervuilen met extra tags.<br \/>\nDe twee belangrijkste pseudo-elementen voor spati\u00ebring zijn:: before en:: after. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Zo werken ze:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inhoud invoegen:<\/b><span style=\"font-weight: 400;\">  Met deze pseudo-elementen kun je inhoud voor of na de bestaande inhoud van een element invoegen.<br \/>\nDeze ingevoegde inhoud wordt onderdeel van de visuele lay-out van het element. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dimensies controleren:<\/b><span style=\"font-weight: 400;\">  Met CSS kun je voor-en-na pseudo-elementen een breedte, hoogte, marge en opvulling geven.<br \/>\nDit maakt ze onzichtbare vakjes die afstandseffecten kunnen cre\u00ebren. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuele trucjes:<\/b><span style=\"font-weight: 400;\"> Veelgebruikte toepassingen zijn het toevoegen van decoratieve pictogrammen, het cre\u00ebren van ruimte voor aangepaste tooltips of het invoegen van achtergrondafbeeldingen die naast de inhoud van het hoofdelement zijn geplaatst.<\/span><\/li>\n<\/ul>\n<h3><b>Flexbox<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Flexbox (kort voor Flexible Box Layout) is een CSS opmaakmodule die een revolutie teweeg heeft gebracht in de manier waarop we flexibele, responsieve ontwerpen maken.<br \/>\nHet biedt krachtige hulpmiddelen voor het uitlijnen en verdelen van ruimte binnen containers. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dit is waarom Flexbox uitstekend geschikt is voor afstandscontrole:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexibele distributie:<\/b><span style=\"font-weight: 400;\">  Met eigenschappen zoals justify-content kun je de ruimte tussen flexitems gemakkelijk verdelen.<br \/>\nBijvoorbeeld, justify-content: space-around voegt gelijke ruimte toe tussen items, terwijl justify-content: space-between items zo ver mogelijk uitspreidt binnen de container. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Uitlijningsvermogen:<\/b><span style=\"font-weight: 400;\">  De eigenschap align-items regelt de uitlijning langs de secundaire as van de Flexbox-container.<br \/>\nHiermee kun je elementen verticaal centreren binnen een container of ze uitlijnen op de boven- of onderrand, waardoor je verschillende afstandsopties kunt cre\u00ebren. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Reactievermogen:<\/b><span style=\"font-weight: 400;\"> Flexbox lay-outs passen zich netjes aan verschillende schermformaten aan, waarbij items en de tussenruimte automatisch worden aangepast als dat nodig is.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Vereenvoudigde complexe lay-outs:<\/b><span style=\"font-weight: 400;\"> Flexbox kan veel lay-outscenario&#8217;s stroomlijnen die traditioneel moeilijk waren met oudere technieken, en vereist vaak minder code en minder &#8220;hacks&#8221; voor de spati\u00ebring.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Hier zijn enkele essenti\u00eble Flexbox-eigenschappen voor spati\u00ebring:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Rechtzetten-inhoud:<\/b><span style=\"font-weight: 400;\"> Regelt de verdeling van de ruimte langs de hoofdas van de Flexbox-container.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>uitlijn-items:<\/b><span style=\"font-weight: 400;\"> Regelt de uitlijning langs de dwarsas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>flex-richting:<\/b><span style=\"font-weight: 400;\"> Stelt in of items in een rij of kolom worden gelegd.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">flex-wrap: Bepaalt of items moeten worden ingepakt op meerdere regels<\/span><\/li>\n<\/ul>\n<p><b>Opmerking:<\/b><span style=\"font-weight: 400;\"> Flexbox heeft iets meer om te leren dan eenvoudige marges en opvulling, maar het is de moeite waard om het te begrijpen!<\/span><\/p>\n<h3><b>CSS raster<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">CSS Grid is een ander krachtig opmaakgereedschap.<br \/>\nHet is vooral bekend voor het maken van complexe tweedimensionale rasterachtige lay-outs, maar het biedt ook eenvoudige manieren om de ruimte tussen elementen binnen het raster te beheren. <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>rasterafstand:<\/b><span style=\"font-weight: 400;\">  Dit is de belangrijkste eigenschap!<br \/>\nHiermee wordt de afstand tussen rasterrijen en -kolommen ingesteld, zodat er een uniforme goot ontstaat. <\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Voorbeeld: grid-gap: 20px; (Cre\u00ebert een ruimte van 20 pixels tussen alle rasterpunten)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexibiliteit voor individuele items:<\/b><span style=\"font-weight: 400;\"> Je kunt ook marges, opvulling en uitlijning aanpassen voor individuele rasteritems, waardoor je de algemene afstand kunt regelen en specifieke elementen kunt verfijnen.<\/span><\/li>\n<\/ul>\n<p><b>Opmerking:<\/b><span style=\"font-weight: 400;\">  CSS Grid blinkt uit als je een duidelijke rasterachtige indeling in gedachten hebt.<br \/>\nVoor eenvoudigere indelingen zijn Flexbox of zelfs traditionele spati\u00ebringstechnieken met marges en opvulling misschien meer geschikt. <\/span><\/p>\n<h2><b>Voorbeelden van Elementor spati\u00ebring en best practices uit de praktijk<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Tot nu toe hebben we de fundamentele bouwstenen van HTML en CSS spati\u00ebring behandeld.<br \/>\nLaten we nu eens kijken hoe Elementor website builder deze concepten overneemt en je werkstroom verbetert.<br \/>\nBereid je voor op intu\u00eftieve bediening en krachtige functies die het maken van de perfecte lay-out tot een plezier maken.  <\/span><\/p>\n<h3><b>Algemene Elementor spati\u00ebringsscenario&#8217;s<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Hier zijn enkele alledaagse situaties waarin je de spati\u00ebring moet aanpassen in Elementor:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Secties uit elkaar plaatsen:<\/b><span style=\"font-weight: 400;\"> Ademruimte cre\u00ebren tussen belangrijke inhoudssecties op een pagina.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Afstand tussen widgets:<\/b><span style=\"font-weight: 400;\"> Widgets rangschikken binnen kolommen en de tussenruimte eromheen aanpassen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tekstopmaak:<\/b><span style=\"font-weight: 400;\"> Hierbij gaat het om het verfijnen van regelafstanden, alinea marges en koppen stijlen en zorgen voor een consistent uiterlijk van de tekst op je hele site.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visueel evenwicht:<\/b><span style=\"font-weight: 400;\"> Het bereiken van een harmonieuze lay-out waarbij afstand een cruciale rol speelt in de algehele visuele aantrekkingskracht.<\/span><\/li>\n<\/ul>\n<h3><b>Hoe Elementor de spati\u00ebring stroomlijnt<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visuele, sleep-en neerzet-besturingselementen:<\/b><span style=\"font-weight: 400;\">  Pas marges en opvulling voor elementen aan met intu\u00eftieve schuifregelaars of door visuele handvatten direct in de editor te verslepen.<br \/>\nBekijk je wijzigingen in realtime! <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Globale stijlen:<\/b><span style=\"font-weight: 400;\"> Definieer standaardvoorkeuren voor spati\u00ebring voor consistentie op je hele website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Responsieve ontwerptools:<\/b><span style=\"font-weight: 400;\"> Zorg ervoor dat je spati\u00ebring zich perfect aanpast aan verschillende schermformaten met de apparaatspecifieke besturingselementen van Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geavanceerd CSS aanpassen:<\/b><span style=\"font-weight: 400;\"> Indien nodig kun je direct CSS op maat openen en schrijven voor elk element, zodat je volledige controle hebt als de standaardopties niet voldoende zijn.<\/span><\/li>\n<\/ul>\n<h3><b>Beste praktijken voor Elementor spati\u00ebring<\/b><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Begin met een plan:<\/b><span style=\"font-weight: 400;\">  Denk na over de algemene visuele hi\u00ebrarchie en stroom die je wilt.<br \/>\nEen snelle mockup van je lay-out kan helpen bij het plannen van de benodigde ruimte. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Omarm de secties, kolommen en widgets van Elementor:<\/b><span style=\"font-weight: 400;\"> Gebruik deze structurele elementen om inhoud te organiseren en cre\u00eber een natuurlijke tussenruimte met de ingebouwde instellingen van Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Verfijn waar nodig:<\/b><span style=\"font-weight: 400;\"> Pas de marges en opvulling van afzonderlijke elementen aan voor pixelperfecte resultaten.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geef prioriteit aan leesbaarheid:<\/b><span style=\"font-weight: 400;\"> Zorg ervoor dat je tekstspaties het scannen vergemakkelijken en vermijd krappe of te losse lay-outs.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Test op verschillende apparaten:<\/b><span style=\"font-weight: 400;\"> Gebruik de responsieve modus van Elementor om ervoor te zorgen dat de spati\u00ebring er geweldig uitziet op mobiele apparaten en tablets, niet alleen op desktops.<\/span><\/li>\n<\/ol>\n<h2><b>Waarom Elementor Websitebouwer<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In deze gids hebben we de details van spati\u00ebring in HTML en CSS besproken.<br \/>\nMaar wat het Elementor platform zo&#8217;n krachtige combinatie maakt voor websitebouwers van alle niveaus, is hoe naadloos ze deze concepten integreren. <\/span><\/p>\n<h4><b>Gebruiksgemak<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Intu\u00eftieve interface:<\/b><span style=\"font-weight: 400;\">  Vergeet het ontcijferen van code.<br \/>\nMet de visuele bouwer van Elementor kun je op elementen klikken en de spati\u00ebring direct aanpassen met schuifregelaars en visuele hulpmiddelen.<br \/>\nDit stelt je in staat om wijzigingen aan te brengen zonder bang te hoeven zijn dat je lay-out kapot gaat.  <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Geen codering nodig (tenzij je dat wilt):<\/b><span style=\"font-weight: 400;\">  Bereik professionele resultaten zonder ook maar \u00e9\u00e9n regel CSS te schrijven.<br \/>\nMaar als je vertrouwd bent met code, biedt Elementor aangepaste CSS-velden om je opties nog verder uit te breiden. <\/span><\/li>\n<\/ul>\n<h4><b>Ontwerpkracht<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexibiliteit zonder overweldiging: <\/b><span style=\"font-weight: 400;\">Elementor vindt een balans tussen precieze controle en een toegankelijke interface zonder je te overweldigen.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gestroomlijnde workflow:<\/b><span style=\"font-weight: 400;\">  Je hoeft niet meer te springen tussen je HTML\/CSS-code en de voorkant om te zien hoe wijzigingen eruit zien.<br \/>\nMet de realtime editor van Elementor kun je direct experimenteren en voorbeeldaanpassingen bekijken. <\/span><\/li>\n<\/ul>\n<h4><b>Prestaties en snelheid<\/b><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Optimalisatie van Elementor Hosting:<\/b><span style=\"font-weight: 400;\">  Elementor Hosting is gebouwd op het Google Cloud Platform en bevat functies zoals Cloudflare Enterprise <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cdn\/\"   title=\"What Is A CDN (Content Delivery Network)?\u00a02025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"31031\">CDN<\/a>, caching op serverniveau en automatische beeldoptimalisatie.<br \/>\nDit zorgt ervoor dat je site, met zijn zorgvuldig ontworpen spati\u00ebring, bliksemsnel laadt voor bezoekers. <\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Schone code:<\/b><span style=\"font-weight: 400;\"> Elementor staat bekend om het genereren van relatief schone en effici\u00ebnte code, waardoor pagina&#8217;s snel laden, zelfs met complexe lay-outs.<\/span><\/li>\n<\/ul>\n<h2><b>Conclusie<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Witruimte, ooit gezien als een leegte die opgevuld moest worden, wordt nu gezien als een essentieel ontwerpelement.<br \/>\nDoor het strategisch gebruik van ruimte op je webpagina&#8217;s onder de knie te krijgen, beschik je over een krachtig hulpmiddel om het oog te leiden, een visuele hi\u00ebrarchie te cre\u00ebren en de algehele gebruikerservaring te verbeteren.<br \/>\nOf je nu zorgvuldig de HTML-code aanpast of de visuele kracht van de Elementor websitebouwer gebruikt, vergeet niet dat ruimte nooit een bijzaak is &#8211; het is een integraal onderdeel van het ontwerp van je website.  <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Met Elementor en het geoptimaliseerde hostingplatform krijg je onge\u00ebvenaarde controle over spati\u00ebring, gekoppeld aan de snelheid en effici\u00ebntie om die pixel-perfecte aanpassingen te realiseren.<br \/>\nMet deze krachtige combinatie kun je websites maken die er niet alleen prachtig uitzien, maar ook buitengewoon goed presteren. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Omarm de kunst van het spati\u00ebren en laat het je aanwezigheid op het web naar nieuwe hoogten brengen.<br \/>\nMet de opgedane kennis ben je klaar om websites te ontwerpen die zowel visueel boeiend als functioneel zijn. <\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich.<br \/>\nAls je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie.<br \/>\nAls je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen.<br \/>\nAls je pagina&#8217;s opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.   <\/p>\n","protected":false},"author":2024234,"featured_media":113326,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[254,515],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-113684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-nl","category-bronnen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Spatie toevoegen in HTML: Codes en tips (ultieme gids)<\/title>\n<meta name=\"description\" content=\"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina&#039;s opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spatie toevoegen in HTML: Codes en tips (ultieme gids)\" \/>\n<meta property=\"og:description\" content=\"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina&#039;s opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-16T19:36:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-24T05:15:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Spatie toevoegen in HTML: Codes en tips (ultieme gids)\",\"datePublished\":\"2025-06-16T19:36:34+00:00\",\"dateModified\":\"2025-12-24T05:15:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\"},\"wordCount\":3259,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Blog\",\"Bronnen\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\",\"name\":\"Spatie toevoegen in HTML: Codes en tips (ultieme gids)\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-06-16T19:36:34+00:00\",\"dateModified\":\"2025-12-24T05:15:39+00:00\",\"description\":\"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina's opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/nl\/category\/blog-nl\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Spatie toevoegen in HTML: Codes en tips (ultieme gids)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)","description":"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina's opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/","og_locale":"nl_NL","og_type":"article","og_title":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)","og_description":"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina's opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.","og_url":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-06-16T19:36:34+00:00","article_modified_time":"2025-12-24T05:15:39+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Geschreven door":"Itamar Haim","Geschatte leestijd":"16 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)","datePublished":"2025-06-16T19:36:34+00:00","dateModified":"2025-12-24T05:15:39+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/"},"wordCount":3259,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Blog","Bronnen"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/","url":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/","name":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-06-16T19:36:34+00:00","dateModified":"2025-12-24T05:15:39+00:00","description":"Witruimte, het strategisch gebruik van ruimte in webdesign, is een kunst op zich. Als je het goed doet, verbetert het de leesbaarheid, leidt het de aandacht en cre\u00ebert het een gevoel van visuele harmonie. Als je het slecht doet, kan een website rommelig, verwarrend en ronduit onprofessioneel overkomen. Als je pagina's opbouwt in HTML, is het essentieel om te weten hoe je de spati\u00ebring kunt regelen om het gepolijste uiterlijk te krijgen dat je wenst.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/nl\/spatie-toevoegen-in-html-codes-en-tips-ultieme-gids\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/elementor.com\/blog\/nl\/category\/blog-nl\/"},{"@type":"ListItem","position":3,"name":"Spatie toevoegen in HTML: Codes en tips (ultieme gids)"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/nl\/#website","url":"https:\/\/elementor.com\/blog\/nl\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/blog\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/nl\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/113684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=113684"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/113684\/revisions"}],"predecessor-version":[{"id":148657,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/113684\/revisions\/148657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media\/113326"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=113684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=113684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=113684"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_persona?post=113684"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/nl\/wp-json\/wp\/v2\/marketing_intent?post=113684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}