HTML editor

Gratis HTML bewerken met een direct voorbeeld

Deze HTML editor helpt je om een stukje webpagina te maken, een bestaande tekststructuur te controleren of HTML te oefenen. Je bewerkt de code links en ziet het resultaat rechts. Je hebt geen account of installatie nodig.

Begin met een kleine taak: een duidelijke kop, een alinea, een lijst of een link. Zo zie je welk onderdeel van je code het resultaat verandert. De editor publiceert je werk niet op internet.

Zo gebruik je de HTML editor

De editor opent met een eenvoudig HTML-document. De tekst tussen <body> en </body> vormt de zichtbare inhoud. Met <h1> maak je een hoofdkop en met <p> een alinea.

• Vervang de voorbeeldkop en alinea door je eigen tekst. Het voorbeeld wordt tijdens het typen bijgewerkt.
• Gebruik Tab voor twee spaties inspringing. Na Enter neemt de editor de bestaande inspringing van de regel over.
• Maak een link met <a href="https://voorbeeld.nl/contact">Neem contact op</a>. Gebruik een beschrijvende linktekst.
• Klik op Kopieer HTML om de code in een ander programma te gebruiken, of op Download als .html om pagina.html te bewaren.
• Controleer de opgeslagen pagina in je eigen websiteomgeving voordat je haar publiceert.

Wat kun je hier met HTML, CSS en JavaScript?

HTML bepaalt de structuur van je inhoud. CSS die je in een <style>-element of style-attribuut opneemt, kan de opmaak van het voorbeeld aanpassen. Er zijn geen aparte CSS- of JavaScript-panelen.

JavaScript wordt in het afgeschermde voorbeeld niet uitgevoerd. De editor is bedoeld om HTML en eenvoudige opmaak te bekijken, niet om een volledige webapplicatie of een werkend formulier te testen. Een voorbeeld dat er goed uitziet, bewijst bovendien niet dat de HTML foutloos of toegankelijk is.

Een HTML-bestand bewaren en publiceren

Je invoer wordt niet automatisch bewaard. Kopieer of download de code voordat je de pagina herlaadt of sluit. Het bestand pagina.html is een lokaal bestand; een download maakt nog geen openbare website.

Wil je de code op je bedrijfswebsite gebruiken? Zet de inhoud in de daarvoor bedoelde editor van je website of laat de wijziging door je webbeheerder verwerken. Controleer daarna de echte pagina, omdat de vormgeving en functies daar kunnen afwijken van dit voorbeeld.

HTML controleren voor een duidelijke webpagina

Goede HTML helpt de inhoud begrijpelijk te structureren. De keuze voor een editor levert op zichzelf geen hogere Google-positie op. Kijk daarom naar wat je pagina vertelt en of bezoekers de juiste vervolgstap kunnen vinden.

• Geef de pagina een beschrijvende titel en gebruik koppen die de inhoud van de onderdelen duidelijk maken.
• Schrijf linkteksten die vertellen waar de bezoeker naartoe gaat. Verbind verwante uitleg met de juiste dienst- of contactpagina.
• Beschrijf informatieve afbeeldingen met passende alternatieve tekst en controleer de bestandsgrootte.
• Test de gepubliceerde pagina op mobiel en controleer of formulieren en contactlinks werkelijk werken.

Veelvoorkomende fouten bij HTML bewerken

Een ontbrekend aanhalingsteken of verkeerd gesloten tag kan de weergave veranderen. Werk in kleine stappen en controleer na iedere aanpassing het resultaat. Sluit geneste elementen in omgekeerde volgorde: eerst het element dat je als laatste hebt geopend.

Plak niet meteen een volledige complexe website in de editor. Los een probleem eerst op met alleen de betrokken kop, alinea of lijst. Voeg andere onderdelen daarna één voor één toe. De tool geeft geen automatische foutmeldingen over ongeldige HTML.

Van een goede pagina naar relevante bezoekers

Werk je aan een zakelijke pagina die wel online staat, maar weinig aanvragen oplevert? Controleer dan naast de HTML ook de zoekvraag, het aanbod en de route naar contact. Een duidelijke pagina beantwoordt de vraag van de bezoeker en maakt zichtbaar voor wie de dienst geschikt is.

Je kunt eerst zelfstandig de SEO-checklist gebruiken. Voor advies over je bedrijfswebsite kun je je domein en telefoonnummer achterlaten, zodat Ranktool de situatie met je kan bespreken.

Veelgestelde vragen

Primaire bronnen

• MDN — basis van HTML
• Google Search Central — SEO Starter Guide