Mit einem HTML-Editor können Sie HTML-Code erstellen und ändern. Doch welche Editoren sind am besten? Dieser Vergleich stellt die Top 22 für HTML-Editoren (WYSIWYG, kostenlos, Online und Quellcode) mit ihren Stärken und Schwächen vor.

Ich erstelle seit 2000 Websites für Schulen. Vorzugsweise verwende ich dafür nur HTML und CSS. Auch für Schulhomepage.de nutze ich kein CMS, sondern nur HTML, CSS und JavaScript. Ich habe viele HTML-Editoren ausführlich getestet und möchte Ihnen in diesem Artikel meine Erfahrungen und einen Überblick geben.

  1. Inhaltsverzeichnis

Was ist ein HTML-Editor?

Ein HTML-Editor ist eine Software, die Sie bei der Entwicklung von Webseiten mit HTML unterstützt. In einen HTML-Editor geben Sie Strukturierungs-Elemente wie beispielsweise <p> für einen Absatz ein. Der HTML-Editor überprüft diese Elemente und macht bei Fehlern Korrektur­vorschläge. Viele HTML-Editoren haben eine integrierte Vorschau-Funktion. Hiermit sieht der Entwickler, wie das eingegebene HTML im Browser dargestellt wird. Die meisten HTML-Editoren unterstützen auch Skriptsprachen wie PHP und JavaScript oder Stylesheet-Sprachen wie CSS.

Visual Studio Code - bester kostenloser HTML-Editor mit Vorschau
Visual Studio Code - bester kostenloser HTML-Editor mit Vorschau

Fazit: Die besten HTML-Editoren

HTML-Editoren mit WYSIWYG-Vorschaufunktion - kostenlos

Der beste HTML-Editor ist Visual Studio Code. Er ist kostenlos, funktioniert auf Windows, Linux und macOS und Sie können mit der Erweiterung "Live Preview" eine hervorragende Vorschaufunktion hinzufügen. Ebenso sprechen die größte Beliebtheit unter Entwicklern, die enorm vielen Funktionen, tollen Möglichkeiten zur Anpassung sowie die Versionskontrolle mit Git/Github für den Editor. Eine Einarbeitung in Visual Studio Code lohnt sich langfristig, da er der aktuelle "Industriestandard" ist. Er ist damit das beste Beispiel für einen guten HTML-Editor.

Microsoft entwickelt Atom zwar nicht mehr weiter, dennoch eignet sich Atom exzellent für nahtlose Zusammenarbeit im Team. Er bleibt daher für Puristen bei der Teamarbeit eine gute Wahl.

Mit Brackets ist eine professionelle Webentwicklung für Einsteiger sehr gut möglich. Jedoch gibt es keinen professionellen Support und Brackets wird nur noch gelegentlich als Open-Source-Projekt weiterentwickelt.

Kostenpflichtig

Dreamweaver ist erste Wahl, wenn Sie professionellen Support wünschen. Dafür müssen Sie monatlich jedoch über 23 Euro bezahlen. Dreamweaver ist ein hervorragendes Web-Entwicklertool, aber sehr teuer und hat oft Probleme mit der Geschwindigkeit.
Eine exzellente Alternative zu Dreamweaver mit Profi-Support ist der CoffeeCup HTML Editor. Die Funktionen sind ähnlich umfangreich und hervorragend. Sie mieten nicht monatlich alle Funktionen, sondern zahlen einmalig für die Funktionen, die Sie wirklich benötigen.

Wenn Sie Code am liebsten gar nicht schreiben, sondern nur im Vorschaumodus designen möchten, ist RocketCake der HTML-Editor Ihrer Wahl.

Online HTML-Editoren

Es gibt viele tolle Online HTML-Editoren. Mit allen können Sie kostenlos und sehr einfach Webseiten mit HTML, CSS, JavaScript und einer Live-Vorschau in einem Browserfenster erstellen. Die Funktionen eines Online HTML-Editors sind jedoch im Vergleich zu einem HTML-Editor als Software deutlich geringer. Außerdem benötigen Sie immer einen Internetzugang. Daher eignen sich Online-Tools besser für einzelne Webseiten und Code-Schnippsel als für die Entwicklung einer kompletten Website.

Der beste kostenlose Online-HTML-Editor ist JSFiddle. Er bietet großartige Unterstützung bei HTML, CSS und JavaScript. Besondere Highlights sind außerdem:

  • Live-Zusammenarbeit im Team
  • Speicherung von Projekten in verschiedenen Versionen mit einem Account. Super!

Fast genauso gut ist Liveweave, das als Highlight einen gratis Editor für Vektorgrafiken und CSS-Styles umfasst.

Der beste Online HTML-Editor für Profis ist Codepen. Das Online-Tool ist sehr beliebt und bietet in der Basisversion kostenlose Webseitenerstellung mit HTML, CSS und JavaScript. In der kostenpflichtigen Pro-Version ist Ihr Code nur nach einem Login sichtbar und Sie können Bilder, CSS, JavaScript, PDF-Dateien usw. hochladen und einbinden. Ebenso ist eine Live-Zusammenarbeit an Code und Projekten einfach möglich.

Quelltext-Editoren

Die besten Quellcode-HTML-Editoren sind Visual Studio Code (kostenlos, ohne Nutzung der Vorschaufunktion), der Klassiker Notepad++ (kostenlos) und Sublime Text. Diese Editoren bieten Webentwicklern, die keine Vorschau benötigen und die vielen kleinen Helferlein beim Code-Schreiben schätzen, hervorragende Hilfen. Sowohl Notepad++ als auch Sublime Text sind großartig, wenn Sie eine aufgeräumte und einfache Benutzeroberfläche mögen.

HTML-Editor deutsch

Wenn Sie einen HTML-Editor mit der Anzeigesprache Deutsch für alle Befehle, die Hilfe usw. verwenden möchten, ist dies mit diesen HTML-Editoren als Software möglich: Notepad++, NoteTab, PSPad, Phase 5, Visual Studio Code, Brackets, Dreamweaver, CoffeeCup, BlueGriffon, RocketCake, und CKEditor.
Lediglich Sublime Text und Atom bieten nur Englisch als Sprache.

Bei den Online HTML-Editoren ist es genau anders herum: Lediglich HTML-Editor Online können Sie auch auf deutsch nutzen, alle anderen nur auf englisch.

HTML-Editor Windows

Alle hier vorgestellten HTML-Editoren bis auf CotEditor können Sie mit Windows verwenden. Für die Online-HTML-Editoren benötigen Sie zusätzlich nur einen Browser. Dies sind die besten HTML-Editoren für Windows.

HTML-Editor macOS

Die besten HTML-Editoren für macOS sind Visual Studio Code, der CotEditor ohne Vorschaufunktion sowie Brackets und RocketCake für visuelle Webentwicklung.

Welche HTML-Editoren gibt es?

Beliebteste Entwickler-Tools für Websites 2023

Die Entwickler­plattform Stackoverflow.com hat 2023 über 90.000 Webentwickler nach den am meisten eingesetzten Entwicklertools (Integrated Development Environment, IDE) befragt. Dies sind die beliebtesten Tools zur Webentwicklung 2022:

beliebteste HTML-Editoren - IDE 2023
beliebteste HTML-Editoren - IDE 2023

Die aus meiner Sicht wichtigsten HTML-Editoren sind:

Kategorien

HTML-Editoren lassen sich in verschiedene Kategorien unterteilen:

Welche Funktionen bietet ein moderner HTML5-Editor?

Ein moderner HTML5-Editor unterstützt Sie bei der Entwicklung von Webseiten mit HTML, CSS, JavaScript und weiteren Skriptsprachen.

Moderne Web-Editoren bieten eine Vielzahl von Funktionen, die die Entwicklung von modernen Webseiten deutlich erleichtern und beschleunigen:

  • Syntax-Highlighting: Befehle oder Tags werden durch Highlighting farblich hervorgehoben
  • Versionskontrolle: Wieder­herstellung alter Dateiversionen ist möglich
  • automatische Code-Vervollständigung und Vorschläge
  • Fehlererkennung von falschem Code
  • WYSIWYG-Vorschau: in einer Vorschau wird live jede Code-Änderung wie in einem Browser angezeigt; WYSIWYG = "what you see is what you get"
  • komplexe Funktionen zum Suchen und Ersetzen
  • Themes verändern Aussehen, Farbe oder Anordnung des Tools
  • Site-Verwaltung einzelner Webseiten als gesamte Website
  • Plugins: Erweiterung der Funktionen
  • Responsive Webdesign für Smartphones und Tablets

HTMl-Editor Vergleichstabelle

HTML-Editor
Notepad++ Sublime Text Phase 5 Visual Studio Code Brackets Dreamweaver CoffeeCup Rocket Cake BlueGriffon CKEditor JSFiddle Codepen
Editor-Typ Quellcode-Editor WYSIWYG-HTML-Editor mit Vorschau Online-HTML-Editor
Betriebssystem Windows Windows, macOS, Linux Windows Windows, macOS, Linux Windows, macOS, Linux Windows, macOS Windows Windows, macOS, Linux Windows, macOS nur Webanwendung nur online nur online
Programmier­sprachen
+ Markup
HTML, PHP, CSS, JavaScript und viele mehr HTML, PHP, CSS, JavaScript HTML, PHP, CSS, JavaScript und viele mehr HTML, PHP, CSS, JavaScript und viele mehr HTML, PHP, CSS, JavaScript und viele mehr HTML, PHP, CSS, XHTML, JavaScript HTML, CSS, JavaScript, Markdown HTML, CSS, JavaScript HTML, CSS, JavaScript HTML, CSS, JavaScript HTML, CSS, JavaScript HTML, CSS, JavaScript
Anzeige­sprache Deutsch, Englisch nur Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch Deutsch, Englisch nur Englisch nur Englisch
Versions­kontrolle nein nein nein ja, mit Github nein nein nein nein nein nein nein nein
Syntax-Highlighting ja ja ja ja ja ja ja ja ja ja ja ja
Code-Vervollständigen auto auto auto auto auto auto auto auto auto auto auto auto
Suchen und Ersetzen komplex komplex komplex komplex komplex komplex komplex komplex komplex grundlegend grundlegend grundlegend
Site-Verwaltung ja ja ja ja ja ja ja ja ja nein nein ja (nur Pro)
Plugins / Themes sehr viele zahlreich wenige sehr viele sehr viele sehr viele sehr viele nein wenige viele nein nein
Responsive Webdesign mit Plugin viele Tools und Vorlagen möglich sehr viele Plugins sehr viele Plugins Bootstrap, viele Plugins ab 29 USD ja ab 75€ ja ja ja
WYSIWYG-Vorschau nein nein nein ja mit Chrome ja mit Chrome ja mit geteiltem Bildschirm ja mit Split-Screen ja, bevorzugt ja ja, bevorzugt ja ja
Preis kostenlos kostenlos kostenlos testen, 89$ kostenlos kostenlos teuer: min. 23€/Monat kostenlos, Premium: 29$ kostenlos, Premium: 39€ kostenlos kostenlos bis 5 Personen kostenlos, "Supporter": 8€ kostenlos, Pro: ab 7€
Vorteile Klassiker, extrem schnell, sehr viele Funktionen, Notepad++ Portable gleichzeitiges Bearbeiten mehrerer Codezeilen, viele Tutorials mehrere Dokumente gleichzeitig editieren, viele Funktionen sehr viele Programmier­sprachen, sehr große Fangemeinde, extrem viele Funktionen extrem viele Funktionen, große Community, Live-Vorschau mit Chrome Bootstrap-Vorlagen, exzellenter Code, mit Vorschau, professioneller Support Echtzeit-Vorschau, FTP integriert, enorm viele Erweiterungen, moderate Preise Code-Bearbeitung unnötig, da visuelles Design ausreicht, Live-Vorschau (WYSIWYG) FTP integriert, Rechtschreib­prüfung, EPUB-Unterstützung mit Vorschau, Office-Dokumente, Teamarbeit keine Installation nötig, Live-Vorschau, Live-Zusammen­arbeit, Account, Speichern-Versionen keine Installation nötig, Live-Vorschau, große Community
Nachteile keine Live-Vorschau mit WYSIWYG kein WYSIWYG mit Browservorschau, nur für Windows keine WYSIWYG-Browservorschau, Design veraltet Live-Vorschau nur mit Chrome Weiter­entwicklung nur gelegentlich sehr teuer, langsam, wenn viele Dateien gleichzeitig geöffnet sind viele Profi-Funktionen kostenpflichtig Fokus auf visuelle Bearbeitung, daher nur einfache Code-Funktionen Live-Vorschau im geteilten Fenster, Design veraltet nur mit Webanwendung (CMS), Installation anspruchsvoll keine Site­verwaltung, Site­verwaltung und Datei-Upload nur Pro
Fazit bester Quelltexteditor für Webseiten + Programmie­ren, ohne Vorschau exzellenter Quellcode-Editor für nur 80USD, ohne Vorschau toller kostenloser Quelltext-Editor, ohne Vorschau beliebtester + bester HTML-Editor für Webseiten und Programmieren toller kostenloser Editor mit Live-Vorschau, für Einsteiger exzellenter Web-Editor mit Live-Vorschau, wenn Geld keine Rolle spielt exzellenter Editor mit Live-Vorschau, günstige Alternative zu Dreamweaver vorwiegend visuelles Designen, selten Code-Bearbeitung toller Editor mit Vorschau in kostenpflichtiger Version exzellenter Editor für CMS bester kostenloser Online-HTML-Editor Toll für Code-Schnipsel und -Teilen, einfache Profi-Web­ent­wicklung online

Die besten HTML-Editoren als Software

Die meisten Entwicklungs­umgebungen für Webseiten werden als Software auf einem Computer mit Windows, macOS oder Linux installiert. Die Vorteile einer Software sind die Unabhängigkeit von Browser und Internetzugang. Eine Software kann spezielle Funktionen hervorragend integrieren und läuft als Programm stabiler und schneller als ein Browser.

Die besten Quellcode-HTML-Editoren ohne Vorschaufunktion

Web-Editoren bieten klassisch die Bearbeitung von Quelltext ohne Echtzeit­vorschau. Sie zeigen nur den Quellcode einer Webseite an. Dabei bieten sie auf vielfache Weise Hilfen bei der Entwicklung in HTML, PHP, JavaScript und vielen weiteren Programmier­sprachen.

Ein Vorteil der Quellcode-Editoren ist die hohe Geschwindigkeit, da die Software nicht aufwendig eine Echtzeit­vorschau des Codes berechnen muss. Ferner können diese Tools meist minimalistisch eingerichtet werden. Wer also eine übersichtliche und minimale Benutzeroberfläche mag, ist hier genau richtig.

Nachteil der Quellcode-Editoren ist, dass eine Echtzeitvorschau fehlt. Der Entwickler muss sich also immer vorstellen, wie der Code im Browser aussieht. Wenn Sie daher immer live Ihren Code als Vorschau sehen möchten, wählen Sie am besten ein WYSIWYG-HTML-Editor mit Echtzeitvorschau.


Notepad++ - kostenloser Texteditor

HTML-Editor kostenlos - Notepad++
HTML-Editor kostenlos - Notepad++

Notepad++ (kurz Note++) ist der Klassiker und der zweitbeliebteste Quellcodeeditor. Er ist kostenlos, sehr bediener­freundlich und schnell und glänzt mit umfangreichen Funktionen. Profis nutzen die exzellente Entwicklungs­umgebung Notepad++ sehr gerne zur Entwicklung von Webanwendungen, sofern sie keine Echtzeit­vorschau benötigen. Aber auch Privatanwender setzen Notepad++ gerne ein, da er leicht zu erlernen und "free" ist. Notepad++ gehört zu den 5 beliebtesten Entwickler-Tools.

Dateien Vergleichen mit der Erweiterung "Compare"

Sehr hilfreich ist die Erweiterung "Compare". Mit dieser Funktion zeigt Ihnen Notepad++ farblich markiert die Unterschiede im Quellcode von zwei oder mehr Dateien.

Vorteile:

  • Vergleich von verschiedenen Dateien sehr einfach mit der Erweiterung "Compare"
  • Hervorhebung von PHP oder HTML5-Code
  • Durchsuchen von ganzen Verzeichnissen
  • Syntaxhervorhebung
  • Autovervollständigung von Code
  • Makro-Rekording: Aufnahme von Befehlsketten, mit dem häufig wiederkehrende Befehle automatisiert ausgeführt werden können
  • regelmäßige Aktualisierung
  • viele Optionen mit großem Funktionsumfang
  • Auszeichnungssprachen wie HTML und XML
  • Zeilenumbruch
  • Sonderzeichen
  • umfangreiche Bedienung per Tastaturkürzel (Shortcuts)
  • Plugins: umfangreiche Erweiterungsmöglichkeiten
  • Aufgaben mit vielen Dateien verarbeitet der Editor sehr schnell und effizient
  • Notepad++ Portable
  • Sprachen: Deutsch und Englisch

Nachteile:

  • kein WYSIWYG mit Browservorschau
  • funktioniert nicht auf Linux oder einem Mac

Preis, Website und Download

Notepad++ Portable: ohne Installation

Mit Notepad++ Portable (Englisch: "tragbar", "transportierbar") haben Programmierer die Möglichkeit, den Texteditor ohne Installation auf einem Computer zu nutzen. Notepad++ Portable wird zuerst auf einem USB-Stick eingerichtet. Danach kann Notepad++ Portable an jedem beliebigen Windows-Computer vom USB-Stick genutzt werden.

Notepad++-Alternativen für Windows: NoteTab und PSPad

Wer mit Notepad++ nicht zurechtkommt, kann den mehrfach ausgezeichneten Text-Editor NoteTab Light für Windows oder Linux ausprobieren. NoteTab ist in der Version Light Freeware und kostet in der Pro-Version 39,95 US-Dollar. Der Texteditor bietet ähnliche Funktionen wie Notepad++. Dabei ist NoteTab besonders schnell und bietet enorm viele Komfort­funktionen.

Eine weitere hervorragende Notepad++-Alternative ist PSPad. Der Freeware-Editor PSPad ist ein unicode-fähiger Editor für Microsoft Windows, der besonders Programmierer und Webentwickler unterstützt. Das vielfach ausgezeichnete PSPad bietet insbesondere Syntax­highlighting, Unterstützung für viele Programmier­sprachen und eine HTML-Vorschau.

Notepad++ für den Mac: Alternativen

Notepad++ funktioniert leider nicht auf einem Apple Macintosh-Computer. Jedoch gibt es mit dem CotEditor einen hervorragenden Texteditor als Alternative zu Notepad++ für den Mac:

CotEditor für MacOS

Notepad++ Mac Alternative - CotEditor
Notepad++ Mac Alternative - CotEditor

Vorteile:

  • Syntaxhervorhebung
  • unterstützt Auszeichnungssprachen wie HTML und XML
  • umfangreiche Funktionen für Suchen & Ersetzen
  • Code-Einsatz mit Vorlagen
  • Split-Editor: mehrere Fenster
  • Makro-Rekording zur Aufnahme von häufig wiederkehrenden Befehlsketten
  • regelmäßige Aktualisierung
  • sehr schnell und effizient
  • Vervollständigung von Code
  • Zeilenumbruch
  • Sprachen: Deutsch und Englisch

Nachteile:

  • CotEditor hat keine Echtzeit­vorschau
  • nur für macOS

Preis, Website und Download


Sublime Text

Sublime Text Quelltext HTML-Editor
Sublime Text Quelltext HTML-Editor

Sublime Text eignet sich hervorragend zum Editieren von HTML5, CSS, JavaScript, PHP und mehr. Funktionen wie Multiple Cursors, Multiple Select und Copy bzw. Paste sind enorm hilfreich. Sie machen die Arbeit im HTML5-Editor Sublime Text sehr effizient und schnell.

Sublime Text Vorteile:

  • Sublime Text bietet Multiple Cursors und Multiple Select: gleichzeitiges Bearbeiten mehrerer Codezeilen
  • Ein- und Ausblenden von Quellcode
  • sehr umfassende Dokumentation
  • sehr viele Tutorials
  • Codeschnipsel
  • Sonderzeichen
  • Benutzeroberfläche und Werkzeugleiste sind bei Sublime Text vollständig anpassbar
  • Ein- und Ausblenden von nicht genutzten Schaltflächen
  • einfache Bedienung mit Tastaturkürzel (Shortcuts)
  • zu Zeichenketten oder Symbolen springen
  • automatischer Zeilenumbruch
  • mehrere Zeilen auswählbar
  • Einfärbung von Code
  • leichte Bedienung per Tastaturkürzel

Sublime Text Nachteile:

  • keine WYSIWYG-Browservorschau
  • Sprache: nur Englisch
  • nur für Windows

Preis, Website und Download

  • Sublime Text ist kostenpflichtig. Sie können den Editor unbegrenzt testen. Bei produktivem Einsatz für eine Website müssen Sie für Sublime Text eine Lizenz für mindestens 80 Dollar erwerben.
  • https://www.sublimetext.com

Phase 5 - kostenlos

Phase 5 HTML-Editor
Phase 5 HTML-Editor

Das von Ulli Meybohm 1998 ins Leben gerufene Phase 5 ist inzwischen ein Klassiker. Das von Meybohm entwickelte kostenlose Phase 5 ist sehr übersichtlich gestaltet.

Mit Phase 5 sehen Sie keine Vorschau des Codes. Deshalb können Sie das Ergebnis nur mit Hilfe eines Browsers ansehen. Phase 5 eignet sich deshalb vor allem für Entwickler, die schnell schreiben können und keine Vorschau benötigen. Im Vergleich zu Notepad++ bietet Phase 5 weniger Funktionen. Dennoch können Sie mit CSS und HTML5 sehr schnell und effektiv arbeiten. So können Sie beispielsweise einen HTML Link sehr leicht und schnell einfügen.

Vorteile:

  • Projektverwaltung
  • Cascading Style Sheets (CSS)
  • Java(Script) und VBScript
  • die Gestaltung von Formularen
  • einen integrierten Bildbetrachter
  • einen Syntax Debugger zum Fehlerbeseitigen
  • Umlautkonvertierung
  • Zeilenumbruch
  • projektweites Ersetzen von Text
  • benutzerdefinierte Menüs und Vorlagen
  • einen Dateimanager zum schnellen Wechsel zwischen den einzelnen Dokumenten
  • mehrere Dokumente gleichzeitig editieren
  • Tabellenassistenten
  • leichte Bedienung per Tastaturkürzel (Shortcuts)
  • Sprachen: Deutsch und Englisch

Nachteile:

Preis, Website und Download

  • Phase 5 ist gratis für Privatanwender und Schulen. Firmen, eingetragene Vereine und Behörden müssen eine Lizenz erwerben.
  • https://www.phase5.info

Weitere Informationen zu Phase 5 bietet der Artikel "Phase 5 - exzellenter kostenloser Quellcode-Editor"


Vim - free Open Source Texteditor für Puristen

Vim - free Open Source Texteditor für Puristen
Vim - free Open Source Texteditor für Puristen

Vim ist ein hochgradig konfigurierbarer freier Texteditor, mit dem sich jede Art von Text sehr effizient erstellen und ändern lässt. Er ist als "vi" in den meisten UNIX-Systemen und in Apple OS X enthalten. Vim steht für „Vi Improved“, was bedeutet, dass es sich um eine überarbeitete grafische Version des Urgesteins "Vi-Texteditor" handelt.

Auch auf Windows wird der kostenlose Texteditor gerne von Puristen genutzt. Vim gehört zu den 5 beliebtesten Entwickler-Tools und lässt sich größtenteils komplett mit der Tastatur navigieren. Vim ist äußerst stabil und wird regelmäßig weiterentwickelt.

Vorteile:

  • Syntaxhervorhebung für rund 500 Sprachen
  • Autovervollständigung
  • Split-Screens
  • Tab-Anordnung
  • Blowfish-Verschlüsselung
  • umfassende Dokumentation
  • mehrere Betriebsmodi: Normal-, Einfüge-, Kommandozeilen-, Auswahl- und Ex-Modus sowie Visueller Modus
  • Plattformübergreifende Kompatibilität
  • Sehr anpassbar und anpassungsfähig
  • riesige und aktive Benutzerbasis
  • enorm viele Module und Add-Ons
  • einfache Bedienung
  • sehr schnell
  • Bedienung per Tastaturkürzel (Shortcuts)
  • Sprachen: Deutsch und Englisch

Nachteile:

  • keine visuelle Browser-Vorschau (WYSIWYG)
  • Steile Lernkurve. Erfordert eine längere Einarbeitungs- und Gewöhnungszeit; Vorkenntnisse in Programmierung sinnvoll

Preis, Website und Download


Die besten WYSIWYG-HTML-Editoren mit Vorschaufunktion

WYSIWYG HTML-Editoren mit Vorschau haben einen großen Vorteil: Sie müssen sich nicht vorstellen, wie Ihr Code live aussehen wird. Sie sehen in der Live-Vorschau, ob der Code Ihrer Vorstellung entspricht.

Nachteil ist, dass die Vorschaufunktion den HTML-Editor verlangsamt und Sie durch den geteilten Bildschirm weniger Code sehen.

Im Folgenden lernen Sie die besten WYSIWYG Web-Editoren mit Vorschau mit ihren Vor- und Nachteilen kennen.

Visual Studio Code mit Vorschaufunktion - kostenlos

Visual Studio Code Quelltext-Editor
Visual Studio Code Quelltext-Editor

Visual Studio Code (kurz VS Code) ist ein Open-Source-Quelltext-Editor von Microsoft. Sie dürfen die Software für private und kommerzielle Projekte kostenlos nutzen. Sie können Visual Studio Code mit den Betriebssystemen Windows 10 oder 11, macOS und Linux verwenden.

Visual Studio Code ist ein Quelltext-HTML-Editor ohne integrierte Vorschaufunktion (WYSIWYG). Mit der kostenlosen Erweiterung "Live Preview" verbinden Sie die Entwicklungs­umgebung mit dem Chrome-Browser, sodass jede Änderung in Echtzeit angezeigt wird:

Visual Studio Code Live Preview
Visual Studio Code Live Preview

VS Code ist ein sehr mächtiger textbasierter Editor und bei Entwicklern der beliebteste Quellcode-Editor. Deshalb gibt es enorm viele Erweiterungen und Visual Studio Code ist sehr zukunftssicher. Es unterstützt neben HTML5, CSS und JavaScript für die Entwicklung von Websites viele weitere Programmier­sprachen. Darunter sind beispielsweise PHP, Visual Basic .NET, C, C++, C++/CLI, C++/CX, C#, F#, SQL-Server, TypeScript und Python. Wer sich mit VS Code auskennt, muss bei der Entwicklung mit anderen Sprachen keinen neuen Editor kennenlernen.

Microsoft aktualisiert Visual Studio Code monatlich und bietet gratis umfangreiche Tutorials und Videos an. Mit diesen Hilfen fällt der Einstieg sehr leicht.

Visual Studio Code ist der insgesamt beste HTML-Editor:

Vorteile:

  • funktioniert auf Windows, Linux und macOS
  • Vorschaufunktion über Erweiterung "Live Preview"
  • sehr große Fangemeinde und beliebtester Editor bei Entwicklern
  • sehr gute Syntaxhervorhebung
  • fortgeschrittene Autovervollständigung
  • Themes für optische Veränderungen
  • Erweiterungsfähigkeit durch Extensions
  • extrem viele Funktionen
  • monatliche Updates
  • automatische Bereinigung des Codes
  • einfache Projektverwaltung
  • Versionskontrolle mit Git/Github
  • anpassbare Benutzeroberfläche sowie Werkzeugleiste
  • funktioniert mit den Betriebssystemen Windows, Linux und macOS
  • Emmet integriert: Emmet ist eine Kurzschreibweise zum schnellen Erstellen von XML-, HTML- und CSS-Code
  • Live Server: Entwicklungsumgebung zum Testen mit allen Browsern
  • Sprachen: Deutsch und Englisch

Nachteile:

  • für kleinere Projekte eventuell zu umfangreich

Preis, Website und Download


Adobe Brackets mit WYSIWYG-Vorschau - kostenlos

Adobe Brackets ist zunächst wie ein Quelltext-HTML-Editor ohne integrierte WYSIWYG-Vorschaufunktion (what you see is what you get). Sie können den kostenlosen Editor mit dem Google Chrome Browser jedoch so verbinden, dass jede Änderung live angezeigt wird. Dies erleichtert die Entwicklung von Webseiten erheblich. Sie sehen somit wie bei einem Editor mit WYSIWYG-Vorschau, was Ihre Code-Änderung macht:

Adobe Brackets WYSIWYG-Editor mit Live Vorschau
Adobe Brackets WYSIWYG-Editor mit Live Vorschau
Quelle: Youtube.com

Für Brackets gibt es keinen professionellen Support. Brackets wird nur noch gelegentlich als Open-Source-Projekt weiterentwickelt, da Adobe die Weiter­entwicklung 2021 eingestellt hat.

Vorteile:

  • leicht zur erlernen für Einsteiger, da sehr übersichtlich
  • Live-Vorschau aller Code-Änderungen in Chrome-Browser
  • Schnelles Bearbeiten von CSS, indem Sie per Klick auf eine ID alle CSS-Regeln sehen
  • Tools werden nur angezeigt, wenn sie gerade hilfreich sind
  • viele Erweiterungen, z. B. responsive Webdesign, W3C HTML-Validator für Code und FTP-Client
  • aktive Open Source Community
  • kann auf Windows, macOS und Linux eingesetzt werden
  • Fokussierung auf Entwicklung von Webseiten
  • Vorschau im aktuellsten Chrome-Browser
  • Responsive Webdesign
  • Viele Entwicklungsoptionen
  • viele Komfortfunktionen
  • anpassbare Werkzeugleiste
  • Sprachen: Deutsch und Englisch

Nachteile:

  • fast keine, lediglich: Aktualisierungen unregelmäßig nach mehreren Monaten: Die Weiterentwicklung von Brackets wurde 2021 von Adobe eingestellt, wird aber als Open-Source-Projekt weiterentwickelt.

Preis, Website und Download


Adobe Dreamweaver: mit WYSIWYG-Vorschau

Adobe Dreamweaver WYSIWYG-Editor
Adobe Dreamweaver WYSIWYG-Editor

Dreamweaver ist der Klassiker unter den Entwicklungs­umgebungen mit Vorschaufunktion. Die Code-Qualität ist hervorragend und es gibt fast nichts, was der Editor nicht kann. Webdesigner und -Entwickler können auf eine Vielzahl an visuellen Layout-Funktionen, Werkzeugen und Effekten zurückgreifen. Dreamweaver ist ein sehr ausgereiftes Multimedia-Werkzeug, mit dem Profis arbeiten.

Dreamweaver unterstützt die Webentwicklung mit AJAX, CSS 3 und HTML5. Es bietet eine Fülle an kleinen Helfern, die die Entwicklung vereinfachen.

Sie können Dreamweaver nicht einmalig erwerben, sondern müssen das Programm monatlich mieten. Dies macht den Editor langfristig sehr teuer.

Vorteile:

  • Vorlagen für neue Webseiten mit Bootstrap
  • umfangreiche Sammlung von Code-Schnipseln
  • exzellente Integration einer Live-Vorschau mit WYSIWYG
  • gleichzeitige Ansicht von Code und Vorschau in einem Fenster
  • exzellente Integration in die Adobe Design-Produkte der Creative Cloud
  • Syntax-Highlighting
  • Tabellenassistent
  • ansprechende Benutzeroberfläche
  • enormer Funktionsumfang
  • einfache Projektverwaltung
  • Dateibrowser
  • viele Auszeichnungs­sprachen wie HTML und XML
  • viele Komfortfunktionen
  • anpassbares Design
  • eigene Codeschnipsel
  • Bereinigung von Code
  • Schriftarten
  • einfache Artikelpflege
  • Erstellung von Makros zum Aufzeichnen von Befehlsketten
  • Sprachen: Deutsch und Englisch
  • Versionskontrolle mit Git

Nachteile:

  • sehr teuer, da nur monatlich für über 23 Euro zu mieten
  • langsam, wenn viele Dateien gleichzeitig geöffnet sind

Preis, Website und Download

Dreamweaver: nur teuer mieten statt kaufen

Dreamweaver ist das einzige Web-Entwicklungstool, das Sie nicht kaufen, sondern nur monatlich für über 23 Euro mieten können. Damit sind Kunden gezwungen für neue Versionen und Funktionen zu bezahlen, die sie vielleicht nie benötigen. Ferner wird es bei langjähriger Nutzung extrem teuer - selbst für professionelle Webdesigner.

Völlig unverständlich ist, dass Adobe die monatliche Miete auch für den Education-Bereich aufrechterhält. Schüler, Studenten und Lehrer zahlen im ersten Jahr 19 Euro monatlich für alle Adobe Produkte, ab dem 2. Jahr 29 Euro monatlich. Wer sich in einer Berufsausbildung befindet, wird in den meisten Fällen diese hohen Preise nicht zahlen können.

Daher kann insbesondere für den Education-Bereich vom Kauf eines Adobe-Produktes nur abgeraten werden. Alle anderen in diesem Artikel vorgestellten Firmen bieten ihren HTML-Editor für Schüler, Studenten und Lehrer vergünstigt zum Kauf oder sogar kostenlos an. Bei Adobe hingegen zahlen Sie pro Jahr, was sie bei den anderen Firmen maximal beim Kauf zur Nutzung für beliebig lange Zeit bezahlen.

Auch bei Bestellung mehrerer Lizenzen für Bildungseinrichtungen gibt es zwar einen Rabatt, aber immer nur zum monatlichen Mietpreis.


CoffeeCup HTML Editor

CoffeeCup HTML-Editor: exzellente Alternative zu Dreamweaver
CoffeeCup HTML-Editor: exzellente Alternative zu Dreamweaver

CoffeeCup HTML Editor ist ein sehr benutzer­freundlicher Editor mit Echtzeitvorschau, der bereits in der kostenlosen Version viele nützliche Funktionen beinhaltet.

Mit CoffeeCup können Sie auf einem Windowscomputer sehr leicht mit HTML, CSS oder Markdown eigene Webseiten erstellen. CoffeeCup eignet sich vor allem für Entwickler, die Webseiten textbasiert erstellen und dabei gerne eine Live-Vorschau benutzen.

Es gibt eine große Anzahl an kosten­pflichtigen Erweiterungen, mit denen fast keine Entwicklerwünsche offenbleiben. Allerdings kostet jede professionelle Erweiterung zusätzlich Geld. Daher sollten Sie zunächst testen, welche Funktionen Sie benötigen. Dann überlegen Sie, ob sich der Aufpreis für Sie lohnt.

Insgesamt hat CoffeeCup ähnlich viele hervorragende Funktionen wie Dreamweaver. Der Vorteil gegenüber Dreamweaver ist, dass Sie nicht monatlich alle Funktionen wie bei Dreamweaver mieten. Stattdessen kaufen Sie einmalig die Funktionen, die Sie benötigen. Das ist langfristig deutlich günstiger.

Vorteile:

  • Projektverwaltung
  • Markdown
  • integrierter Datei-Upload per FTP
  • Codeschnipsel
  • Bibliothek für häufig verwendeten Code
  • JavaScript zur Kompatibilität mit alten Browserversionen
  • Echtzeitvorschau über den Split-Screen
  • Syntaxhighlighting
  • Autovervollständigung von Code
  • Schriftarten
  • komfortable Prüfung auf Syntaxfehler
  • viele Komfortfunktionen
  • anpassbare Registerkarten und Werkzeugleiste für mehr Übersichtlichkeit
  • sehr viele Profi-Funktion können hinzugekauft werden
  • Sprachen: Deutsch und Englisch

Nachteile:

  • viele Profi-Funktionen kostenpflichtig: ab 29 USD
  • Codevalidierung und Codebereinigung sind kostenpflichtig
  • nur für Windows

Preis, Website und Download

  • CoffeeCup ist in der Grund- und Testversion kostenlos. Für Profi-Funktionen wie Site-Verwaltung mit Prüfung der Abhängigkeiten der Webseiten, Templates sowie Code-Validierung werden mindestens 29 Dollar fällig.
  • www.coffeecup.com/html-editor/

Atom - kostenlos

Atom - kostenloser WYSIWYG-HTML-Editor mit Vorschaufunktion
Atom - kostenloser WYSIWYG-HTML-Editor mit Vorschaufunktion

Atom wurde von GitHub, der größten Software- und Webentwicklungs-Community im Internet entwickelt, die ebenso zu Microsoft gehört. Herausragende Funktion von Atom ist die Zusammenarbeit im Team. Sie können gleichzeitig mit mehreren Benutzern an einer Datei oder einem Projekt arbeiten.

Atom verfügt darüber hinaus über eine integrierte Unterstützung für Git/Github. Damit existiert für alle Dateien eine Versions­kontrolle. Alte Versionen einer Datei können Sie einfach wiederherstellen.

Microsoft hat sich entschlossen Atom nicht mehr weiterzuentwickeln. Stattdessen liegt der Fokus nun ganz auf Visual Studio Code.

Vorteile:

  • WYSIWYG-Editor: mit einem Plugin ist eine Echtzeitvorschau möglich
  • viele Plugins und Themes, auch von Drittanbietern
  • sehr einfache Zusammenarbeit im Team
  • Atom läuft auf Windows, Linux und macOS.
  • modularer Aufbau mit einem sehr schlanken Kern
  • sehr viele Funktionen: beliebig erweiterbar
  • minimalistische und vollständig anpassbare Benutzeroberfläche
  • gleichzeitige Ansicht von Code und Vorschau
  • Syntaxhervorhebung von Code-Elementen
  • Fehlererkennung bei Code
  • Codeschnipsel

Nachteile:

  • Atom wurde wie Visual Studio Code von Microsoft entwickelt: Während Visual Studio Code monatlich neue Funktionen erhält, wird Atom nicht mehr weiterentwickelt. Dementsprechend steigen die Nutzerzahlen von Visual Studio Code und die Zahlen für Atom sinken.
  • Sprache: nur Englisch

Preis, Website und Download


BlueGriffon - kostenlos

BlueGriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau
BlueGriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau

NVU und die Weiter­entwicklungen KompoZer sowie BlueGriffon sind ebenfalls exzellente Webeditoren mit dem Vorteil, dass sie auch eine Vorschaufunktion besitzen. So zeigen Sie per Mausklick, ob der Code im Browser so aussieht, wie Sie es sich vorstellen.

Für die Vorschau verwenden BlueGriffon sowie KompoZer die Mozilla-Engine, wodurch Sie alles so wie im Firefox-Browser sehen. Daher eignet sich die Software sowohl für Anfänger als auch für professionelle Entwickler. Denn insbesondere der Quellcode von BlueGriffon ist exzellent.

BlueGriffon Vorteile:

  • WYSIWYG-Editor: Bearbeitung von Seiten im Vorschaufenster ohne Coding möglich
  • Integriertes FTP-Dateimanagement
  • HTML5-Code wird auf Basis der Firefox-Engine erstellt
  • integrierte Rechtschreibprüfung
  • Unterstützung des offenen EPUB Standards für E-Books
  • Responsive Design (für Smartphones und Tablets)
  • gleichzeitige Ansicht von Code und Vorschau
  • Einfärbung von Code-Elementen
  • Codeschnipsel
  • Weiterentwicklung von KompoZer
  • Sprachen: Deutsch und Englisch

Nachteile:

  • Responsive Webdesign (für Smartphones und Tablets) sowie EPUB nur in der kostenpflichtigen Version

Preis, Website und Download

  • BlueGriffon ist kostenlos. Responsive Design sowie EPUB können Sie erst mit einer kostenpflichtigen Version ab 75 Euro erstellen.
  • http://bluegriffon.org/

Weitere Informationen zu BlueGriffon bietet der Artikel "Bluegriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau | Download und Tutorial"


RocketCake: ohne Programmierkenntnisse

RocketCake - kostenloser WYSIWYG-HTML-Editor
RocketCake - kostenloser WYSIWYG-HTML-Editor

RocketCake ist ein moderner kostenloser HTML-Editor mit WYSIWYG-Vorschau. Der Fokus liegt auf der visuellen Erstellung von Webseiten. Sie gestalten Webseiten mit der Maus per Drag und Drop. Der Webentwickler benötigt somit keine Programmier­kenntnisse. Dabei schreibt der Editor im Hintergrund sehr sauberen HTML5-Code und CSS. Dieser Code lässt sich zwar nicht in einem geteilten Bildschirm gleichzeitig anzeigen, aber in einem neuen Fenster optional leicht bearbeiten.

RocketCake ermöglicht die einfache Erstellung von responsiven Websites für mobile Geräte. Dafür ist u. a. der Breakpoint CSS Editor zuständig. Das CSS legt Auflösungen fest, sodass sich bei unterschiedlichen Bildschirm­größen das Layout ändert.

Eine Alternative zu RocketCake ist der kostenlose Editor OpenElement, der sehr ähnlich ohne Programmier­kenntnisse funktioniert.

Vorteile:

  • Fokus auf visuelles Erstellen von Websites per Drag und Drop in Vorschau-Ansicht
  • kaum HTML oder CSS Kenntnisse notwendig
  • HTML-Code wird auf Basis der Google Chrome Engine erstellt
  • Responsive Design für Smartphones und Tablets
  • Vorlagen für einfachen Start
  • intuitive Benutzeroberfläche
  • leicht anpassbare Schriftart und Schriftfarbe
  • keine Programmier­kenntnisse notwendig
  • Sprachen: Deutsch und Englisch
  • läuft auf Windows und macOS

Nachteile:

  • Premium-Support nur in der Professional Edition
  • Benutzerdefinierter CSS-, HTML-, JavaScript- und PHP-Code nur in der Professional Edition

Preis, Website und Download

  • RocketCake ist kostenlos. Die Professional Edition mit Premiumsupport und erweiterten Coding-Funktionen kostet 39 Euro
  • www.ambiera.com/rocketcake/

CKEditor: Vorschau-Editor für CMS

CKEditor WYSIWYG-Editor mit Vorschau

CKEditor Version 5 ist ein sehr moderner kostenloser HTML-Editor mit Vorschaufunktion. Allerdings lässt sich die Software nicht einfach auf einem Computer installieren. Sie benötigen eine Web-Anwendung wie ein Content Management System (CMS), in das der CKEditor integriert wird. Fast alle CMS wie WordPress, Typo3 oder Joomla nutzen CKEditor. Damit können Redakteure ohne Programmier­kenntnisse sehr einfach Inhalte wie Text und Bilder in der Anwendung bearbeiten.

Vorteile:

  • Integration in fast alle Webanwendungen möglich
  • Arbeit mit Vorschau
  • HTML-Code kann direkt bearbeitet werden
  • leichter Import von Office-Dokumenten
  • Export zu Word und PDF
  • einfache Teamarbeit
  • Anpassen von Schriftart und Schriftfarbe mit wenigen Klicks
  • Sprachen: Deutsch und Englisch

Nachteile:

  • nur zusammen mit Webanwendung nutzbar
  • Installation anspruchsvoll

Preis, Website und Download


Die besten kostenlosen Online-Editoren mit WYSIWYG

Es gibt eine Reihe toller kostenloser Online-HTML-Editoren mit WYSIWYG-Vorschau, die sehr benutzerfreundlich sind. Sie können diese Editoren ohne Installation in einem Browser nutzen. Es gibt hierbei zwei Kategorien:

1. Kostenlose Online-HTML-Editoren

Alle Online-HTML-Editoren bieten die Möglichkeit kostenlos und einfach Webseiten mit HTML, CSS und JavaScript zu erstellen. Dabei ist es meistens eine Frage des persönlichen Geschmacks mit welcher Benutzeroberfläche Sie am besten zurechtkommen.

Die kostenlosen Editoren haben jedoch diese Nachteile:

  • Code ist immer öffentlich
  • kein Datei-Upload wie Bilder, CSS, JavaScript, PDF-Dateien etc.
  • keine Zusammenarbeit im Team; Ausnahmen: JSFiddle und Liveweave

Dies sind die besten kostenlosen Online-HTML-Editoren:

  • JSFiddle und Liveweave sind die einzigen Tools, die auch eine kostenlose Live-Zusammenarbeit im Team ermöglichen. Liveweave umfasst darüber hinaus auch eine Liste an vordefinierten Libraries sowie einen Editor zur Erstellung von Vektorgrafiken und CSS-Styles. JSFiddle hingegen bietet zusätzlich kostenlos die Möglichkeit Projekte in einem Account zu speichern und dabei verschiedene Versionen zu speichern. Toll!
    Daher ist JSFiddle der mit Abstand beste kostenlose Online-HTML-Editor!
  • HTML-Editor Online
  • HTML-Editor.tools
  • HTML5 Editor Online
  • HTML-Editor.online

2. Online-HTML-Editoren mit kostenpflichtigen Profifunktionen

Nur wenige Online-HTML-Editoren bieten neben der kostenlosen Erstellung von HTML, CSS und JavaScript auch Profifunktionen wie:

  • Datei-Upload von Bildern, CSS, JavaScript, PDF-Dateien etc.
  • Privatsphäre. Code ist nicht öffentlich sichtbar, sondern nur mit Login
  • Live-Zusammenarbeit an Code und Projekten

Die besten Online-HTML-Editoren mit Profifunktionen sind:

Kostenlose Online-HTML-Editoren

JSFiddle - mit kostenloser Live-Zusammenarbeit und Speichern

JSFiddle - kostenloser Online-HTML-Editor mit WYSIWYG Live-Vorschau, Speichern-Funktion und Live-Zusammenarbeit
JSFiddle - kostenloser Online-HTML-Editor mit WYSIWYG Live-Vorschau, Speichern-Funktion und Live-Zusammenarbeit

JSFiddle ist ein sehr populäres und oft verwendetes Online-Tool, um schnell und einfach kleine Codeschnippsel zu erstellen. Mit der Fork-Funktion können Benutzer eigene Versionen erzeugen und den Code weiter entwickeln. Mit der Save-Funktion lassen sich verschiedene Versionen des Codes sichern. Zusätzlich können externe Ressourcen wie JavaScript, Grafiken und CSS-Dateien eingebunden werden. Über die Collaborate-Funktion können Sie einen Link zum Code verschicken, sodass mehrere Benutzer diesen gleichzeitig in einer Live-Zusammenarbeit weiterentwickeln können.

JSFiddle ähnelt im Aussehen, den Funktionen und bei der "Live-Zusammenarbeit" sehr Liveweave. Es gibt jedoch Unterschiede: Nur JSFiddle bietet die Möglichkeit Projekte und verschiedene Versionen in einem Account zu speichern. Liveweave hingegen hat als Alleinstellungsmerkmal die Editoren für Vektorgrafiken und CSS-Styles. Bei der Entscheidung zwischen JSFiddle und Liveweave gewinnt JSFiddle mit den Speichermöglichkeiten in einem Account. Denn die Editoren für Vektorgrafiken und CSS-Styles können Sie auch als eigenständige Tools nutzen und dann den Code in JSFiddle importieren.

JSFiddle ist daher der mit Abstand beste kostenlose Online-HTML-Editor!

Vorteile:

  • Live-Zusammenarbeit in Team
  • Projekte lassen sich in einem Account speichern
  • Online in jedem Browser nutzbar
  • Installation nicht notwendig
  • WYSIWYG Echtzeit­vorschau
  • Vorschau zeigt Kombination von HTML, CSS und JavaScript
  • große Entwickler-Community
  • Autovervollständigung von Code

Nachteile:

  • nur HTML, CSS und JavaScript
  • Dateien lassen sich nur extern einbinden
  • Sprache: nur Englisch
  • Code ist immer öffentlich sichtbar; nur als kostenpflichtiger "Supporter" können Sie den Code mit einem Account schützen

Preis, Website und Download

  • JSFiddle ist in den umfassenden Grundfunktionen kostenlos, "Supporter": 8€ monatlich
  • https://jsfiddle.net

Liveweave - mit kostenloser Live-Zusammenarbeit

Liveweave - kostenloser Online-HTML-Editor mit Live-Zusammenarbeit und WYSIWYG
Liveweave - kostenloser Online-HTML-Editor mit Live-Zusammenarbeit und WYSIWYG

Liveweave ist ein hervorragender kostenloser WYSIWYG Online-HTML-Editor. Liveweave zeigt sich in einer sehr schönen und übersichtlichen Benutzeroberfläche. Die einzelnen Entwicklungsbereiche können Sie nach ihren Wünschen anordnen.

Liveweave bietet kostenlose Entwicklung mit HTML, CSS und JavaScript sowie vordefinierten Libraries, welche direkt integriert werden können. Zusätzlich können Sie CSS-Styles mit einem Explorer einfach zusammenklicken, sowie mit einem Editor für Vektorgrafiken leicht erstellen. Mit diesem lassen sich SVG-Grafiken zuerst zeichnen und nach dem Speichern als Code hinzufügen. Herausragendes Highlight ist eine kostenlose Live-Zusammenarbeit im Team. Der Link zum aktuellen Code kann einfach verschickt werden. Anschließend können beliebig viele Benutzer mitarbeiten und dabei chatten oder miteinander sprechen.

Vorteile:

  • kostenlose Live-Zusammenarbeit im Team
  • Webseiten mit HTML, CSS und JavaScript kostenlos erstellbar
  • WYSIWYG-Vorschau wie im Browser
  • Syntaxhighlighting
  • keine Installation, sondern nur Internetzugang notwendig

Nachteile:

  • keine Site-Verwaltung einer Website mit mehreren Webseiten
  • kein Datei-Upload für beispielsweise Bilder, CSS oder PDF-Dateien
  • Code ist immer öffentlich
  • keine Speichermöglichkeit in einem Account
  • nur Englisch

Preis, Website und Download

HTML-Editor Online - kostenlos

HTML-Editor online WYSIWYG
HTML-Editor online WYSIWYG

html-online.com ist ein kostenloser WYSIWYG Online-HTML-Editor. Hiermit können Sie HTML kostenlos von jedem beliebigen Computer oder Tablet editieren und in einer Live-Vorschau prüfen. html-online.com ist besonders hilfreich, wenn Sie gerade keinen Zugriff auf den installierten Editor Ihrer Wahl haben. Online können Sie schnell HTML erstellen oder bearbeiten. Auf diese Weise beheben Sie beispielsweise kleine Fehler oder probieren etwas Neues aus.

Vorteile:

  • benötigt keine Installation, sondern nur einen Internetzugang
  • kaum HTML oder CSS Kenntnisse notwendig
  • HTML-Code wird auf Basis der Google Chrome Engine erstellt
  • Responsive Design für Smartphones und Tablets
  • Vorlagen für einfachen Start
  • WYSIWYG-Vorschau wie im Browser
  • Code-Komprimierung
  • Syntaxhighlighting
  • Sprachen: Deutsch und Englisch

Nachteile:

  • Keine Site-Verwaltung einer Website mit vielen Webseiten
  • Suchen und Ersetzen ist in mehreren Webseiten nicht möglich
  • Internetzugang und moderner Browser zwingend notwendig
  • Integration von lokalen Bildern und Grafiken schwierig

Preis, Website und Download

HTMLEditor.tools

HTMLEditor.tools - online WYSIWYG-Editor
HTMLEditor.tools - online WYSIWYG-Editor

HTMLEditor.tools ist ein übersichtlicher WYSIWYG-HTML-Editor in Internet. Der Browser-Inhalt wird in zwei Fenster aufgeteilt: eins für den Code und eins für die Echtzeitvorschau.

Dieser Editor verfügt über ein umfangreiches Set von Werkzeugen, mit denen Sie dynamische und responsive HTML-Seiten erstellen können.

Ein tolles Feature ist die Verwendung von Farbcodes zur Unterscheidung zwischen dem HTML-Code und dem Inhalt. Diese Funktion erleichtert Ihnen die Änderung des Codes, ohne dass Sie befürchten müssen, das falsche Tag zu ändern.

Vorteile:

  • komplett online
  • ohne Installation nutzbar
  • kostenlos
  • Farbmarkierung von Code
  • sehr benutzerfreundlich
  • keine Werbung

Nachteile:

  • alle Funktionen erst mit kostenpflichtiger Pro-Version
  • Sprache nur Englisch

Preis, Website und Download

html5-editor.net

HTML5-Editor.net - online HTML5-Editor mit Vorschau
HTML5-Editor.net - online HTML5-Editor mit Vorschau

Einen weiteren tollen Online-Editor mit WYSIWYG gibt es bei html5-editor.net. Dieser Editor bietet Ihnen eine Vorschau in zwei Fenstern, sodass Sie direkt sehen, was Ihre Code-Änderung bewirkt.

Er unterstützt viele Medieninhalte wie Bilder, Audio-Dateien und Videos. Außerdem verfügt er über ein Live-Editing-Tool, mit dem Sie den HTML-Code in Echtzeit sehen können, während er generiert wird. Nachdem Sie Ihre Inhalte erstellt haben, können Sie die HTML-Datei kopieren und sie auf Ihrer Website verwenden. Das Tool ähnelt sehr dem Editor von htmleditor.tools.

Vorteile:

  • im Internet verfügbar
  • keine Installation notwendig
  • komplett kostenfrei
  • werbefrei

Nachteile:

  • einige Profi-Funktionen fehlen
  • Sprache: nur Englisch

Preis, Website und Download

HTML-Editor.Online

HTMLEditor.online -  Free Online HTML-Editor mit WYSIWYG
HTMLEditor.online - Free Online HTML-Editor mit WYSIWYG

Bei htmleditor.online finden Sie einen besonders benutzerfreundlichen Online-WYSIWYG-Editor für HTML. Das Tool ist kostenlos und ermöglicht es den Nutzern, beeindruckende HTML-Seiten ohne Programmierung zu erstellen.

Sie können zwischen dem Editor-Tool und dem Quellcode-Tool hin- und herschalten, indem Sie auf die Schaltfläche "Quellcode" im Editor klicken.

Der Editor verfügt über die meisten Funktionen des populären WordPress-Editors, einschließlich Rechtschreibprüfung und zahlreicher Textstile. Sie können Bilder in Ihre Webseiten einbinden, aber leider keine Audio- oder Videoinhalte. Abgesehen von dieser eingeschränkten Medienunterstützung ist es insgesamt ein hervorragendes Werkzeug für die Bearbeitung von HTML5-Seiten.

Vorteile:

  • Online nutzbar
  • Installation nicht notwendig
  • sehr benutzerfreundlich

Nachteile:

  • keine Aufteilung mit zwei Fenstern für Code und Vorschau
  • Einbau von Audio- und Video-Dateien nicht möglich
  • Sprache: nur Englisch

Preis, Website und Download

Online-HTML-Editoren mit kostenpflichtigen Profi­funktionen

Codepen

Codepen - texbasierter Online-Editor mit WYSIWYG Live-Vorschau
Codepen - texbasierter Online-Editor mit WYSIWYG Live-Vorschau

Codepen.io ist eine tolle Plattform für Webentwickler, die Webprojekte in HTML, CSS und JavaScript entwickeln.

Codepen eignet sich besonders gut zum Entwickeln und Teilen von Code für Webprojekte. Sie können komplette Websites entwickeln, aber auch einzelne Webseiten oder Teile wie beispielsweise eine responsive Tabelle. Das Browser-Fenster ist dabei geteilt: Die obere Hälfte bietet zu je einem Drittel Platz für HTML, CSS und JavaScript. Die untere Hälfte zeigt in Echtzeit eine Vorschau des Codes.

Es können Code-Schnipsel für einzelnen Seiten oder Funktionen gesammelt und geteilt werden. In der kostenlosen Version ist der Code immer öffentlich, in der Pro-Version kann dieser verborgen werden.

Vorteile:

  • Online in jedem Browser nutzbar
  • Installation nicht notwendig
  • WYSIWYG Echtzeit­vorschau
  • Vorschau zeigt Kombination von HTML, CSS und JavaScript
  • Codepens sind Code-Schnipsel, die jeder beliebig nutzen und live verändern kann
  • sehr große Entwickler-Community
  • gelungene Kombination aus Texteditor und Online-Editor
  • Autovervollständigung von Code

Nachteile:

  • nur HTML, CSS und JavaScript
  • Import von Bild-, Audio- und Video-Dateien nicht kostenlos, sondern nur in der kostenpflichtigen Pro-version möglich
  • Sprache: nur Englisch
  • Arbeiten im Team nur in der kostenpflichtigen Pro-Version möglich

Preis, Website und Download


JSFiddle - Supporter-Version für Profis

Ein weiterer großartiger Online-HTML-Editor mit Profifunktionen ist in der "Supporter"-Version für 8 Euro monatlich JSFiddle.


Weiterführende Artikel

Weitere Tipps zu HTML:

  • HTML Link einfügen mit a href - so geht's!
  • HTML einfach und verständlich erklärt
  • HTML-Validator: 3 beste Tools zum Prüfen und Korrigieren von HTML und CSS
  • Phase 5 - exzellenter kostenloser Quellcode-Editor
  • Bluegriffon - kostenloser WYSIWYG-HTML-Editor mit Vorschau | Download und Tutorial
  • Linkchecker: kostenlos alle defekten Links finden - 5 beste Tools

FAQ

Was ist der beste HTML-Editor?

Der beste HTML-Editor ist Visual Studio Code:

  • VS Code funktioniert auf Windows, Linux und macOS
  • Vorschaufunktion mit der Erweiterung "Live Preview"
  • größte Beliebtheit unter Entwicklern
  • enorm vielen Funktionen
  • tolle Möglichkeiten zur Anpassung
  • Versionskontrolle mit Git/Github
  • als "Industriestandard" etabliert
  • monatlich neue Version von Microsoft
  • kostenlos

Was ist der beste HTML-Editor Online?

Der beste kostenlose HTML-Editor Online ist JSFiddle. Er bietet großartige Unterstützung bei HTML, CSS und JavaScript. Ferner bietet er eine sehr übersichtliche Bildschirmteilung in Code-Ansicht und Live-Vorschau mit vielen Bearbeitungsfunktionen. Besondere Highlights sind: Live-Zusammenarbeit im Team sowie Speicherung von Projekten in verschiedenen Versionen mit einem Account. Super!

Fast genauso gut ist Liveweave, das als Highlight einen kostenlosen Editor für Vektorgrafiken und CSS-Styles umfasst.

Der beste kostenpflichtige HTML-Editor Online ist Codepen. Er bietet zusätzlich einen Upload für Bilder und andere Dateien sowie die Möglichkeit, dass Code nur mit einem Login sichtbar ist.

Was ist ein WYSIWYG-HTML-Editor?

WYSIWYG steht für „What You See Is What You Get“ (Englisch für „Was du siehst, ist [das], was du bekommst."") Ein WYSIWYG-HTML-Editor zeigt dementsprechend den Code als Vorschau so an, wie ein Benutzer ihn in einem Browser sieht. Die Anzeige der Inhalte erfolgt dabei in Echtzeit. Die Live-Vorschau erleichtert die Entwicklung enorm, da der Entwickler sofort sieht, ob sein geschriebener Code den gewünschten Inhalt anzeigt.

Was ist der beste WYSIWYG-Editor?

Der beste WYSIWYG-HTML-Editor mit Vorschaufunktion ist Visual Studio Code:

  • funktioniert auf Windows, Linux und macOS
  • Vorschaufunktion mit der Erweiterung "Live Preview"
  • größte Beliebtheit unter Entwicklern
  • enorm vielen Funktionen
  • tolle Möglichkeiten zur Anpassung
  • Versionskontrolle mit Git/Github
  • etabliert als "Industriestandard"
  • monatlich eine neue Version von Microsoft
  • kostenlos

Womit kann ich HTML schreiben?

HTML schreiben Sie ganz einfach kostenlos mit diesen Programmen:

  • Die beste Möglichkeit HTML zu schreiben ist mit einem kostenlosen HTML-Editor wie Notepad++ oder dem besten HTML-Editor Visual Studio Code mit Vorschaufunktion.
  • Windows-Editor: Diesen rufen Sie in Windows über "Startmenü" > "Windows-Zubehör" > "Editor" auf. Schreiben Sie dort Ihren HTML-Code hinein und speichern Sie den Code dann über "Datei" > "Speichern unter" > "Dateityp: alle Dateien (*.*)" als datei.html
  • Alternativ können Sie Ihren HTML-Code auch in eine Word-Datei schreiben und dann über "Datei" > "Speichern unter" mit dem Dateityp "Webseite (.htm)" speichern.

Was ist der beste HTML-Editor mit Vorschau?

Der beste HTML-Editor mit Vorschau ist Visual Studio Code:

  • funktioniert auf Windows, Linux und macOS
  • Vorschaufunktion mit der Erweiterung "Live Preview"
  • größte Beliebtheit unter Entwicklern
  • enorm vielen Funktionen
  • tolle Möglichkeiten zur Anpassung
  • Versionskontrolle mit Git/Github
  • etabliert als "Industriestandard"
  • monatlich eine neue Version von Microsoft
  • kostenlos
AnzeigeJimdo - kostenlos testen