Die 7 besten kostenlosen Online-HTML-Editoren zum Testen Ihres Codes

Die 7 besten kostenlosen Online-HTML-Editoren zum Testen Ihres Codes

Jede von Ihnen verwendete Website basiert auf HTML. Während Webentwickler Kenntnisse in JavaScript, Python, CSS und serverseitigem Scripting benötigen, hält HTML alles zusammen.





Ohne HTML gibt es kein Web, daher müssen Sie wissen, wie man es erstellt und bearbeitet. Anstatt ein HTML-Code-Testsystem auf Ihrem Computer einzurichten, ist es einfacher, Code in einem Browser zu testen.



Ob beim Hantieren mit kleinen HTML-Schnipseln oder kompletten Website-Projekten, ein Online-HTML-Editor ist ideal.





Warum Sie einen Online-HTML-Editor verwenden sollten

Die Verwendung eines browserbasierten HTML-Editors ist aus folgenden Gründen sinnvoll gegenüber etwas wie Notepad++:

  • Online-HTML-Editoren laufen direkt in Ihrem Webbrowser
  • Testen Sie Ihren HTML-Code online --- prüfen Sie, ob der Code wie erwartet ausgeführt wird
  • Sehen Sie sich Echtzeit-Webvorschauen an – die Vorschau wird während der Bearbeitung aktualisiert
  • Optimieren Sie Ihren Workflow – kein Speichern, Laden im Browser, Zurückwechseln zum Editor und Wiederholen
  • Plattformunabhängig --- Sie laufen auf jedem Gerät mit einer Webverbindung.

Dieser letzte Punkt ist sehr wichtig. Das bedeutet, dass Sie eine Webseite auf einem PC möglicherweise genauso einfach entwickeln können wie auf einem Chromebook. Sie können sogar ein Android-Tablet oder einen 50-Dollar-Computer wie den Raspberry Pi verwenden.



HTML-Codierung ist ein zugänglicher, unkomplizierter Zugang zum Verständnis von Programmierung und Entwicklung. Sie müssen Ihren HTML-Code ständig testen – was gibt es Besseres als Live-Ergebnisse in Ihrem Browserfenster?

Schauen wir uns einige der besten derzeit verfügbaren Online-HTML-Editoren an.



1. CodePen

CodePen ist eine „soziale Entwicklungsumgebung“ für Webentwickler, was im Grunde bedeutet, dass es sich um einen Online-Editor mit Kollaborationsfunktionen handelt. Es bietet ein einfaches Layout. Sie finden ein Bedienfeld für HTML, ein Bedienfeld für CSS und ein Bedienfeld für JavaScript sowie eines für die Echtzeitvorschau. Alle Panelgrößen können durch Ziehen der Kanten angepasst werden.

Sie können 'Stifte' erstellen, die wie individuelle Spielplätze zum Optimieren von Webcode sind. Mehrere Stifte können zu Sammlungen zusammengefasst werden.



Während die Anmeldung für die grundlegende Nutzung kostenlos ist, benötigen Private Stifte und Sammlungen eine Pro-Konto . Dies beginnt bei 8 USD/Monat und umfasst Asset-Hosting, einbettbare Themen, Zusammenarbeit in Echtzeit und Zugriff auf die vollständige Webentwicklungs-IDE von CodePen.

Viele Leute halten CodePen für den besten Online-HTML-Editor. Probieren Sie es aus, um zu sehen, ob es Ihren Bedürfnissen entspricht.

2. JSFiddle

JSFiddle ist so ziemlich das, wonach es klingt: eine Sandbox, in der Sie mit JavaScript herumspielen können. Sie wissen wahrscheinlich, dass JavaScript mit HTML und CSS Hand in Hand geht. Das bedeutet, dass Sie mit JSFiddle alle drei gleichzeitig mit der Bearbeitungsoberfläche von JSFiddle bearbeiten können.

Wenn Sie möchten, können Sie das JavaScript ganz überspringen.

Das Schöne an JSFiddle ist, dass Sie externe Anfragen in der Seitenleiste hinzufügen können. Auf diese Weise können Sie Off-Site-JavaScript- und CSS-Dateien einfügen, um Ihren HTML-Code zu verbessern. Ebenfalls nützlich ist die Schaltfläche Aufräumen, die die Einrückung Ihres Codes automatisch bereinigt, während das Klicken auf Collaborate eine Online-Zusammenarbeit in Echtzeit ermöglicht.

Der einzige Nachteil ist, dass Sie auf die Schaltfläche Ausführen klicken müssen, um das Vorschaufenster zu aktualisieren.

3. JSBin

Betrachten Sie JSBin als einfachere und sauberere Alternative zu JSFiddle. Sie können jede beliebige Kombination aus HTML, CSS und JavaScript bearbeiten, indem Sie einfach die Bedienfelder mit der oberen Symbolleiste umschalten. Für maximale Flexibilität können Sie auch das Vorschaufenster und ein Konsolenfenster nach Bedarf umschalten.

Kann WhatsApp SMS an Nicht-Benutzer senden?

Aber während Sie mit JSFiddle externe CSS- und JavaScript-Ressourcen verknüpfen können, beschränkt Sie JSBin auf vordefinierte JavaScript-Bibliotheken. Die Auswahl ist jedoch gut und reicht von jQuery über React bis hin zu Angular und mehr.

Während JSBin kostenlos ist und kein Konto erfordert, benötigen Sie ein Pro-Konto für erweiterte Funktionen. Dazu gehören private Bins, benutzerdefinierte Einbettungen, Asset-Hosting, Dropbox-Synchronisierung und Vanity-URLs für über JSBin veröffentlichte Seiten.

Vier. Liveweave

Liveweave ähnelt optisch den vorherigen Editoren mit einer ansprechenden Benutzeroberfläche. Wie JSFiddle ermöglicht Liveweave die Zusammenarbeit in Echtzeit, und wie JSBin können Sie vordefinierte Ressourcen von Drittanbietern wie jQuery einbinden.

Aber es hat auch ein paar einzigartige Funktionen. Der Lorem Ipsum Generator erstellt Platzhaltertext an Ihrer aktuellen Cursorposition. Der CSS Explorer bietet ein WYSIWYG-Tool zum Erstellen von CSS-Stilen und der Color Explorer hilft Ihnen bei der Auswahl perfekter Farben. In der Zwischenzeit können Sie mit dem Vektoreditor Vektorgrafiken für Ihre Site erstellen.

So verschieben Sie den Benutzerordner auf ein anderes Laufwerk

5. HTMLhouse

HTMLhouse ist eine gute Option, wenn Sie sich nur für HTML interessieren (d. h. kein CSS oder JavaScript). Sauber und minimalistisch, vertikal geteilt mit Bearbeitung links und Echtzeit-Vorschau rechts.

Nützlich ist die Möglichkeit, Ihren HTML-Code zu veröffentlichen und privat (über private URL) oder öffentlich (zu Durchsuchen-Seite von HTMLhouse ). Es ist einfach, aber effektiv, und genau hier kommt ein Online-HTML-Editor ins Spiel und zeichnet sich aus.

Beachten Sie, dass HTMLhouse von den Leuten von erstellt wurde und gepflegt wird Write.as , ein ablenkungsfreies Online-Schreibwerkzeug. Beachten Sie dies, wenn Sie planen, Ihren eigenen Site-Inhalt zu schreiben.

6. HTMLG

Eine andere Option HTMLG folgt dem gleichen Muster der Verwendung von Code- und Vorschaufenstern für HTML. Dieses Tool enthält jedoch kein CSS und JavaScript innerhalb desselben einheitlichen Projekts. Wenn Sie diese bearbeiten möchten, müssen Sie stattdessen eine neue Registerkarte öffnen und sie als separate Projekte bearbeiten.

Dies macht es ideal für reine HTML-Optimierungen und das Testen von Code in Ihrem Browser; weniger, wenn Sie CSS-Bearbeitungen einbinden möchten.

Beachten Sie, dass es ein Limit von 300 Wörtern gibt, wenn Sie vollständige Webseiten mit HTMLG testen. Um dies zu erhöhen, können Sie sich für die werbefreie Premium-Version ab nur 5,80 US-Dollar pro Monat anmelden.

7. Dabblet

Dabblet bietet eine etwas andere Sicht auf Online-HTML-Editoren und teilt den Bildschirm in zwei statt in drei/vier Bereiche. Sie haben also eine Ansicht für HTML & Ergebnis und eine separate (aber verlinkte) Ansicht für CSS & Ergebnis.

Dies bietet mehr Platz und eine klarere Sicht auf den Code und die Vorschau. Darüber hinaus hebt der integrierte HTML- und CSS-Validator von w3.org alle Probleme hervor.

Wenn Sie einen freien Platz auf dem Desktop benötigen, um Ihren Site-Code zu testen, ist dies möglicherweise der beste HTML-Editor für Sie.

Verwenden Sie die besten Online-HTML-Editoren, um Ihre Fähigkeiten zu verbessern

Wenn Sie HTML nur vor zehn Jahren kennengelernt haben, ist es jetzt an der Zeit, dies nachzuholen. HTML5 wurde bereits 2014 veröffentlicht und führte eine Handvoll neuer Standards und Funktionen ein. Nicht sicher, wo Sie anfangen sollen? Sehen Sie sich diese wichtigen neuen HTML5-Elemente an.

Möchten Sie bewährte Verfahren in HTML5-Webdesign und -Entwicklung kennenlernen? Überprüfen Sie diese Websites mit hochwertigen HTML-Codierungsbeispielen . Sie sollten sich auch diese anderen Tools ansehen, um Ihre Fähigkeiten in der Webentwicklung zu verbessern.

Teilen Teilen Tweet Email 15 Windows-Eingabeaufforderungsbefehle (CMD), die Sie kennen müssen

Die Eingabeaufforderung ist immer noch ein leistungsstarkes Windows-Tool. Hier sind die nützlichsten CMD-Befehle, die jeder Windows-Benutzer kennen muss.

Weiter lesen Verwandte Themen
  • Programmierung
  • Texteditor
  • Web Entwicklung
  • WYSIWYG-Editoren
  • HTML5
  • Skripting
Über den Autor Christian Cawley(1510 Artikel veröffentlicht)

Stellvertretender Redakteur für Sicherheit, Linux, DIY, Programmierung und Tech Explained und wirklich nützlicher Podcast-Produzent mit umfangreicher Erfahrung im Desktop- und Software-Support. Als Mitwirkender für das Linux-Format-Magazin ist Christian ein Raspberry-Pi-Tüftler, Lego-Liebhaber und Retro-Gaming-Fan.

Mehr von Christian Cawley

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren