Kostenlose HTML-, Markup- und Stylesheet-Editoren 10 Quelltext-Editoren für die Webentwicklung

Von Christian Rentrop

Anbieter zum Thema

Ob HTML, CSS oder JavaScript: Für Web-Projekte eignet sich nichts besser als ein HTML-Editor, entsprechende Tools gibt es allerdings wie Sand am Meer. Wir haben zehn besonders interessante kostenlose Kandidaten für Sie zusammengestellt.

Atom ist dank der tiefen Integration mit GitHub mittlerweile ein besonders populärer Editor.
Atom ist dank der tiefen Integration mit GitHub mittlerweile ein besonders populärer Editor.
(Bild: Atom.io)

Ein Fenster im Code-Editor, ein Browserfenster mit der geöffneten Website, die Finger immer wieder auf dem Speichern- und Reload-Hotkey: Wer professionell Websites baut oder anpasst, macht sich diese Arbeitsweise schnell zu Eigen und schubst in Windeseile Elemente, Code und Layouts in ein Webprojekt.

Um das vernünftig bewerkstelligen zu können, ist es allerdings sinnvoll, die richtigen Werkzeuge zur Hand zu haben. Dummerweise ist die Auswahl an HTML-Editoren gigantisch – und alle eignen sich irgendwie für die Webentwicklung. Selbst der olle DOS-Editor, sein bis heute kaum weiterentwickeltes Windows-Pendant oder die diversen Kommandozeilen-Editoren wie Vi und Nano sind für HTML, CSS und Co. geeignet.

Mittlerweile gibt es aber natürlich deutlich modernere Alternativen mit GUI-Unterstützung. Wir haben die zehn besten Gratis-Editoren für Linux, macOS, Windows und das iPad für Sie herausgesucht.

Atom

Atom ist dank der tiefen Integration mit GitHub mittlerweile ein besonders populärer Editor.
Atom ist dank der tiefen Integration mit GitHub mittlerweile ein besonders populärer Editor.
(Bild: Atom.io)

Wer Web-Projekte in GitHub entwickelt, kommt an Atom nicht vorbei: Der Open-Source-Editor wurde von GitHub selbst entwickelt und ist dementsprechend eng an die Plattform geknüpft. Trotzdem ist Atom auch ein ganz normaler Text-Editor, mit dessen Hilfe sich Webprojekte realisieren lassen.

Dazu besitzt Atom einige praktische Features, etwa eine permanente Anzeige aller Projektdateien oder das schnelle Aufsplitten der Code-Fenster für besonders schnelles und übersichtliches Bearbeiten. Zudem besitzt der Editor eine Funktion für kollaboratives Arbeiten an Projektdateien, wodurch er sich auch für Teams eignet.

Plattformen: Windows, Linux, macOS

Bluefish

Der Bluefish-Editor ist dank einiger Funktionen besonders effizient.
Der Bluefish-Editor ist dank einiger Funktionen besonders effizient.
(Bild: Bluefish)

Schon das ulkige Icon macht den Bluefish Editor sympathisch. Doch auch die Funktionalität des Open-Source-Editors kann sich sehen lassen: Der Editor besitzt eine Reihe praktischer Schnelltasten, die es erlauben, typische Tags mit einem Klick oder per Hotkey einzufügen.

Die praktische Ordner-Ansicht links erlaubt schnelles Wechseln zwischen den Dateien eines Web-Projekts. Zudem unterstützt der Editor Zencoding, ein HTML- und CSS-Markup für schnelleres Entwickeln und kann zudem auch für eine Reihe von Programmiersprachen eingesetzt werden.

Plattformen: Windows, Linux, macOS

BlueGriffon

Eigentlich als WYSIWIG-Editor gedacht, eignet sich BlueGriffon auchallgemein für Quelltexte.
Eigentlich als WYSIWIG-Editor gedacht, eignet sich BlueGriffon auchallgemein für Quelltexte.
(Bild: BlueGriffon)

Statt des blauen Fischs ein blauer Greif: Der HTML-Editor BlueGriffon ist nicht mit Bluefish verwandt, sondern der Nachfolger des beliebten WYSIWYG-Editors Nvu, der seinerseits aus den Resten des Netscape Communicators hervorgegangen ist. Inzwischen ist BlueGriffon aber erwachsen geworden: Auch wenn der Schwerpunkt auf der WYSIWYG-Entwicklung liegt, kann er natürlich auch als Quelltext-Editor eingesetzt werden.

Praktisch bei der Webentwicklung ist dabei vor allem der Dual-View-Modus, bei dem Änderungen am Quelltext direkt in der Live-Vorschau erscheinen – und umgekehrt. Damit ist der Editor ideal für Webentwickler, die noch üben möchten, eignet sich aber durchaus auch für ernsthafte Projekte, zumal er auch als eBook-Layout-Tool verwendet werden kann.

Plattformen: Windows, Linux, macOS

Brackets

Brackets von Adobe kann unter anderem mit einem Plug-in für die Wordpress-Entwicklung punkten.
Brackets von Adobe kann unter anderem mit einem Plug-in für die Wordpress-Entwicklung punkten.
(Bild: Adobe)

Brackets ist Adobes Antwort auf Atom und die zahlreichen kostenpflichtigen HTML-Editoren. Der Editor rühmt sich damit, besonders modern zu sein, und tatsächlich ist das Interface sehr elegant gestaltet, ohne unnötige Bedienelemente.

Funktional ist Brackets trotzdem mächtig: Dank zahlreicher Erweiterungen unterstützt Brackets eine Vielzahl von Sprachen und Zusatzfunktionen, die mit wenigen Klicks installiert werden können. Sogar ein Plug-in für die Wordpress-Entwicklung ist verfügbar.

Plattformen: Windows, Linux, macOS

CudaText

CudaText bringt leistungsstarke Funktionen für jedweden Software-Entwickler mit-
CudaText bringt leistungsstarke Funktionen für jedweden Software-Entwickler mit-
(Bild: UVviewsoft)

Der Editor CudaText ist nicht nur besonders flott, sondern auch sehr leistungsstark: Mit praktischen Funktionen wie einem Code-Tree, einem Binary/Hex-Viewer und einer Split-View-Funktion richtet er sich nicht nur an Webentwickler, sondern allgemein an Software-Entwickler. Obwohl in einer GUI-Fassung vorliegend, erinnert er in der Bedienung eher an Kommandozeilen-Editoren, zumal sich Hotkeys für zahlreiche Funktionen frei definieren lassen.

Plattformen: Windows, Linux (ältere Version für macOS verfügbar)

Geany

Geany ist besonders schlank und erlaubt so den Blick aufs Wesentliche.
Geany ist besonders schlank und erlaubt so den Blick aufs Wesentliche.
(Bild: Geany)

Geany ist nicht nur ein HTML-Editor, sondern eine vollständige „fliegengewichtige IDE“. Der schlanke Editor unterstützt neben HTML und CSS insgesamt 50 Programmiersprachen, nimmt dabei aber nur wenig Ressourcen auf dem System in Anspruch.

Jetzt Newsletter abonnieren

Täglich die wichtigsten Infos zu Softwareentwicklung und DevOps

Mit Klick auf „Newsletter abonnieren“ erkläre ich mich mit der Verarbeitung und Nutzung meiner Daten gemäß Einwilligungserklärung (bitte aufklappen für Details) einverstanden und akzeptiere die Nutzungsbedingungen. Weitere Informationen finde ich in unserer Datenschutzerklärung.

Aufklappen für Details zu Ihrer Einwilligung

Trotz des schlanken Designs und der reduzierten Oberfläche bietet Geany jedoch alles, was das Programmiererherz begehrt, darunter automatische Tag-Vervollständigung, ein Build-System und eine einfache Projektmanagement-Funktion. Geany kann außerdem per Plug-in erweitert werden.

Plattformen: Windows, Linux, macOS

Koder

Für Apple-Mobilgeräte ist der Editor Koder eine interessante Alternative.
Für Apple-Mobilgeräte ist der Editor Koder eine interessante Alternative.
(Bild: Koder)

Apples iPad nähert sich immer weiter klassischen Computersystemen an. Genau deshalb greifen immer mehr Webentwickler zumindest für kleine Arbeiten zum Tablet-Rechner. Für die Webentwicklung gibt es unter iOS zwar eine Reihe von Apps, allerdings sind die wenigsten wirklich gut für die tägliche Arbeit geeignet.

Nicht so Koder: Die App kann direkt per FTP, SSH und WebDAV auf Projekte zugreifen. Syntax-Highlighting, Code-Autovervollständigung und eine schnelle Vorschau innerhalb der App helfen, Websites auch unterwegs zu bearbeiten. Praktischerweise läuft Koder auch auf dem iPhone.

Plattform: iOS, iPadOS

Notepad++

Über Umwege (Snap) auch für Linux erhältlich, ist das Notepad++ der Klassiker unter Windows.
Über Umwege (Snap) auch für Linux erhältlich, ist das Notepad++ der Klassiker unter Windows.
(Bild: NotePadPlusPlus)

Windows-Nutzer finden in Notepad++ den Klassiker unter den alternativen Editoren. Das Programm besitzt einen enormen Funktionsumfang, ist dadurch aber nicht immer übersichtlich. Dafür erhalten Entwickler alles, was in irgendeiner Form mit Text und Code zu tun hat, in einem einzelnen Programm.

Notepad++ ermöglicht neben der Code-Erstellung in zahlreichen Programmiersprachen und natürlich CSS und HTML inklusive automatischer Code-Vervollständigung. Auto-Speicherung, Makros und Line-Bookmarking sind Funktionen, die die Webentwicklung deutlich erleichtern.

Plattform: Windows

SubEthaEdit

Zwischenzeitlich ausschließlich kommerziell vertrieben, ist SubEthaEdit seit Version 5 wieder kostenlos erhältlich.
Zwischenzeitlich ausschließlich kommerziell vertrieben, ist SubEthaEdit seit Version 5 wieder kostenlos erhältlich.
(Bild: SubEthaEdit)

Der Editor SubEthaEdit für macOS hat eine interessante Karriere hinter sich. Zunächst kostenlos erhältlich, war er jahrelang nur kommerziell erhältlich. Seit 2018 und Version 5.0 ist er jedoch wieder freie Software.

Neben dem vor allem für Douglas-Adams-Fans schönen Namen und dem eleganten, nativen macOS-Interface sowie die Unterstützung für zahlreiche Sprachen legt SubEthaEdit den Schwerpunkt auf das kollaborative Bearbeiten von Textdateien. Per Bonjour-Protokoll können sich andere Nutzer im LAN schnell in die Bearbeitung einschalten. Das ist vor allem für Teams interessant, die gemeinsam Projekte entwickeln.

Plattform: macOS

CotEditor

Der CotEditor ist bewusst einfach gehalten, aber für macOS-Nutzer eine leichtgewichtige und gleichzeitig leistungsfähige Option.
Der CotEditor ist bewusst einfach gehalten, aber für macOS-Nutzer eine leichtgewichtige und gleichzeitig leistungsfähige Option.
(Bild: CotEditor)

Es soll allerdings auch Mac-Nutzer geben, die einfach nur einen simplen Editor brauchen. In diese Bresche schlägt CotEditor: Der Editor besitzt eine extrem reduzierte Oberfläche und leistet genau das, was ein HTML- und CSS-Editor leisten muss: Er öffnet Text-Dateien, färbt die Syntax ein und ermöglicht die Bearbeitung des Inhalts.

Der CotEditor sollte allerdigns nicht unterschätzt werden: Das Tool beherrscht die Syntax von mehr als 50 Programmiersprachen, erlaubt Split-Screen-Bearbeitung, besitzt eine automatische Backup-Funktion und ermöglicht den Einsatz von Skripten und Makros. Kurzum: CotEditor ist für Mac-Nutzer auf jeden Fall eine hervorragende Option.

Plattform: macOS

(ID:46637617)