De HTML-editor gebruiken
Gebruik deze editor voor kleine statische ontwerpen, zoals een tekstblok, tabel of CSS-experiment. De lichte tekst in de HTML- en CSS-vakken is een voorbeeld; het eerste voorbeeldvenster toont het resultaat. Selecteer een voorbeeldveld om met een leeg vak te beginnen. Laat je dat vak leeg, dan keert het lichte voorbeeld terug zonder een eerder resultaat te herstellen of export te activeren.
Voer je eigen opmaak en stijlen in. Je kunt een fragment plakken, zoals een artikel, of de inhoud van een volledig HTML-document. De editor bouwt een statisch document opnieuw op uit ondersteunde elementen; documentmetadata blijven daarom niet behouden. Zodra je begint te bewerken, wordt alleen je echte invoer gebruikt; lichte voorbeeldtekst uit een ander leeg veld wordt niet toegevoegd. Je tekst blijft staan als je tussen velden wisselt.
Wat het voorbeeld toont
Het voorbeeld is een afzonderlijke pagina in een sandbox. Het toont ondersteunde HTML en je CSS zonder die stijlen op de editor zelf toe te passen. Je kunt tekst, koppen, lijsten, tabellen, gewone formuliervelden en CSS-indelingen bekijken. Het voorbeeldvenster kan scrollen als je ontwerp groter is dan de beschikbare ruimte. De breedte volgt het editorpaneel: het is geen simulator voor een vast apparaat.
JavaScript, gebeurtenisafhandelaars, ingesloten pagina's, SVG, mediaspelers en externe bronnen worden weggelaten of geblokkeerd. Links navigeren niet en formulieren verzenden niets. Externe afbeeldingen, lettertypen, stylesheets en CSS-imports laden niet. Ingesloten base64-afbeeldingen van PNG, JPEG, GIF en WebP kunnen worden getoond. Een melding geeft verwijderde elementen of attributen aan; bronnen in CSS worden door het documentbeleid geblokkeerd. De invoervakken behouden de oorspronkelijke tekst, ook niet-ondersteunde code, zodat je die kunt bekijken of wijzigen.
Twee kleine voorbeelden
Voer voor een kop de HTML en CSS hieronder in. Het voorbeeld toont ‘Hallo’ als donkergroene kop. Verander de tekst tussen de tags om de woorden te wijzigen; verander de CSS-kleur voor een andere weergave.
Gebruik voor een lijst <ul><li>Plannen</li><li>Controleren</li></ul> met CSS li { margin-bottom: 8px; }. Je ziet twee opsommingstekens met ruimte na elk item. Zo kun je een klein tekstblok controleren voordat je het naar je eigen project kopieert.
HTML: <h1>Hallo</h1>
CSS: h1 { color: #166534; }Kopiëren en downloaden
HTML kopiëren en HTML downloaden gebruiken hetzelfde huidige statische document als het voorbeeld. De export combineert ondersteunde opmaak en CSS in één UTF-8-bestand page.html met een beperkend inhoudsbeleid. Open het bestand in een browser om het te bekijken of in een teksteditor voor de broncode. Het is een zelfstandig statisch concept, geen gehoste website of inzetbare toepassing met werkende scripts.
Wissen verwijdert je HTML, CSS en resultaat, met bevestiging als je code hebt ingevoerd. Lege velden tonen weer lichte voorbeelden; die zijn geen opgeslagen gebruikersinhoud. Normaal typen volgt de tekstbewerking van de browser. De pagina waarschuwt vóór vertrek na wijzigingen, maar bewaart niet automatisch een concept. Download het statische HTML-bestand vóór het sluiten om het ondersteunde resultaat te bewaren.
Beperkingen en problemen oplossen
De gezamenlijke invoer is beperkt tot 100.000 tekens, maximaal 3.000 HTML-knooppunten en 64 geneste niveaus. Bij overschrijding blijft de invoer zichtbaar, maar zijn voorbeeld en export uitgeschakeld. Verklein de invoer om verder te gaan. Lege invoer heeft geen downloadbaar resultaat.
Browsers herstellen vaak ontbrekende eindtags en kunnen ongeldige CSS-declaraties negeren. Deze editor is geen validator voor webstandaarden: een zichtbaar voorbeeld bewijst niet dat de bron geldig, toegankelijk of klaar voor productie is. Werkt een regel niet, controleer dan de selector en syntaxis en of hij een geblokkeerde externe bron nodig heeft. Gebruik de ontwikkelaarshulpmiddelen van je browser in je eigen project voor een volledige diagnose.
Veelgestelde vragen
Kan ik JavaScript uitvoeren?
Nee. Deze tool is voor statische HTML en CSS. Scripts zijn in het voorbeeld geblokkeerd en worden uit de geëxporteerde pagina verwijderd.
Waarom verschijnt een afbeelding of weblettertype niet?
Externe bronnen, ook relatieve URL's, zijn geblokkeerd. Gebruik systeemlettertypen of een ingesloten ondersteunde rasterafbeelding; de editor haalt geen website op en uploadt je bestanden niet.
Wordt mijn oorspronkelijke broncode overschreven?
De filtering van het voorbeeld verandert de invoervakken niet. Het gedownloade document bevat het ondersteunde statische resultaat; niet-ondersteunde broncode zit dus niet in die export.
Wordt mijn concept opgeslagen of gedeeld?
De tool verwerkt de bron in je browser en heeft geen cloudopslag of deelfunctie. Als je de pagina verlaat, kun je wijzigingen verliezen. Sla het HTML-bestand op als je klaar bent.