Die 10 besten HTML-Editoren für Webdesigner

Wenn du Webentwickler bist oder es werden möchtest, dann brauchst du einen leistungsfähigen HTML-Editor. Besonders wichtig bei einem HTML-Editor sind z.B. eine gute Einfärbung der Syntax – das Syntax-Highlighting – und eine brauchbare Code-Vervollständigung. Wir stellen dir 10 HTML-Editoren vor (die in der Regel auch gut geeignet sind für das Schreiben von CSS und JavaScript.

Dein Kunde hat nicht genug Budget? Dann schau dir Templatemonster an

Was tun wenn du noch unerfahren bist bei der Erstellung von Websites oder wenn dein Kunde kein ordentliches Budget bereitstellt? In solchen Fällen lohnt es sich, mit vorgefertigte Layouts zu arbeiten, die bereits als fertige HTML5-Templates vorliegen. Diese sind also unabhängig sind von einem CMS wie z.B. WordPress oder Typo3.

Die Templates sind für bestimmte Use-Cases konzipiert und eignen sich für eine Vielzahl von Nischen, darunter Mode, Fotografie, Hotels, Steuerberater, Restaurants usw. Sie kommen mit einem ansprechendem Design und verschiedenen Add-Ons daher, wie zum Beispiel Kontaktformularen zur Leadgenerierung.

Für den Designprozess sind sie auch genial: Hast du ein passendes Template gefunden, brauchst du nur noch die Inhalte und Bilder hinzuzufügen, ohne dass du erst eine ganze Seite von Grund auf konzipieren und gestalten musst.

Und nun zurück zum Thema: Hier die Auflistung der besten HTML-Editoren:

1. Visual Studio Code

Visual Studio Code ist ein kostenloser HTML-Editor aus dem Hause Microsoft. Mit Visual Studio Code haben die Redmonder ein ernstzunehmendes Produkt, das sich innerhalb kürzester Zeit eine Fangemeinde erarbeiten konnte, die den bisherigen Liebling Sublime Text fast schon vergessen lässt.

Visual Studio Code gibt es nicht nur für Windows, sondern auch für macOS und sogar für Linux. Damit können Sie plattformübergreifend mit dem gleichen Komfort und Funktionsumfang arbeiten.

VS Code kann mit Extensions bequem funktional erweitert werden. Optische Veränderungen führen Sie über Themes herbei, von denen es ebenfalls eine breite Vielfalt gibt. VS Code arbeitet direkt mit Github zusammen und bietet nicht nur ein außerordentlich gutes Syntax-Highlighting für diverse Sprachen, sondern auch eine fortgeschrittene Variante der Code-Vervollständigung.

VS Code unterliegt einem vierwöchigen Update-Turnus. Die Changelogs sind Monat für Monat umfangreich. Das Produkt wird massiv fortentwickelt, wobei Wünsche der Nutzergemeinde ernsthaft einbezogen werden. Neben den optischen und funktionellen Erweiterungsmöglichkeiten wird bei VS Code auch die Unterstützung der Anwender nicht vernachlässigt. So steht ihnen eine umfassende Dokumentation zur Verfügung und auch die beliebten Tutorial-Videos haben die Redmonder am Start.

Link zur Website mit Download (für Windows, Mac OSX und Linux)

2. Atom

Beim kostenlosen HTML-Editor Atom aus dem Hause Github (das mittlerweile auch zu Microsoft gehört) ist der Name Programm. Denn Atom ist vollständig modular aufgebaut. Um einen minimal großen Programmkern gruppieren sich Open-Source-Kontributionen in rauen Mengen. Sogenannte Packages sind das, die den Funktionsumfang des Tools aus dem Hause Github fast beliebig erweitern können.

Atom arbeitet direkt mit Github zusammen, so dass die Arbeit mit Versionskontrolle nahtlos möglich ist. Weitere Features rüsten Sie über die bereits erwähnten Packages nach, die Sie im Übrigen auch selbst erstellen und der Communitly zur Verfügung stellen können.

Des weiteren stehen für Atom zwei bahnbrechende Packages bereit, die besonders für Entwickler sehr interessant sind. Atom kann nämlich neuerdings fast zu einer echten IDE ausgebaut werden. Damit sind Sie dann in der Lage, komplette Projekte zu verwalten, um etwa festzustellen, welche Variable wo im Projekt noch vorhanden ist etc. Zusätzlich lässt sich die IDE mit Sprach-Packages zu jeder beliebigen Programmiersprache befähigen.

Atom steht für Windows, macOS und Linux zur Verfügung und erfreut sich ebenfalls einer sehr regen Fortentwicklung.

Link zur Website mit Download

3. Sublime Text 3 — Das Schweizer Taschenmesser

Sublime Text 3

Kein anderer HTML-Editor hat jemals einen solchen Siegeszug erlebt wie Sublime Text. Innerhalb kürzester Zeit nach Release eroberte er die Sympathien der professionellen Webentwickler. Das liegt nicht zuletzt an der Tatsache, dass er für Windows, macOS und Linux gleichermaßen verfügbar ist.

In den letzten Jahren konnte sich der kommerzielle Editor Sublime Text 3 einer immer größer werdenden Nutzergemeinschaft erfreuen. Und das durchaus zu Recht. Denn gerade für den Freelancer, der oft alleine arbeiten muss, ist der Editor sehr nützlich und bietet einige komfortable Vorteile. Für weniger entscheidungsfreudige Zeitgenossen könnte besonders interessant sein, dass sich Sublime Text 3, obwohl grundsätzlich kostenpflichtig, extrem lange kostenlos testen lässt.

Sublime Text 3 lässt sich generell in jede Entwicklungsumgebung integrieren und für die populärsten Programmier-, Skript- und Auszeichungssprachen verwenden. Dass kommt unter anderem daher, dass Bundles aus TextMate 2 eingebunden werden können. Darüber hinaus hat Sublime Text 3 eine Menge eigene Extensions zu bieten, die das Resultat der Arbeit einer großen Entwickler-Community sind. Der Grund hierfür könnte neben der steigenden Popularität auch die einfache Beschreibungssprache für Erweiterungen sein.

Ein Editor mit ungewohnten Features

Ein weiteres, sinnvolles Feature sind „Split Windows“. Damit ist es möglich, 4 Dateien in einem Editor zu öffnen, ohne dabei die Übersicht zu verlieren. Über "View -> Layout" kann ausgewählt werden, welche Anzeige man bevorzugt. Mittels "control + Nummer des Fensters" (also 1, 2, 3 oder 4 bei 4 Fenstern) kann man ohne Maus zwischen den Fenstern wechseln.

Es gibt allerdings auch Befehle, die für regelrechte „AHA-Effekte“ sorgen. Ein Beispiel: Befindet sich der Cursor in einem Wort und man drückt den Befehl "cmd + d" (auf Plattformen ohne Apfel ist es "control + d") werden nicht nur das Wort, sondern auch alle Stellen mit dem selben Wort im Dokument markiert. Das ist etwa dann großartig, wenn man die Bezeichnung einer Variablen ändern möchte. Mit dem Befehl "ctrl+shift+(up oder down)" wählt man mehrere Zeilen zum Markieren aus. Zeilen zu bewegen, kann schon manchmal ganz schön nervig sein. Sublime Text 3 hat hierfür eine Lösung. Mittels "ctrl+cmd+(up oder down)" kann eine markierte Zeile nach unten oder oben verschoben werden.

Erweiterungen in hoher Quantität und Qualität

Wie versprochen, will ich noch ein paar nützliche Erweiterungen für Sublime Text 3 nennen. Standard in vielen Editoren ist mittlerweile ZenCoding. Verkürzt gesagt geht es hierbei darum, für kompliziertes HTML-Markup nur noch eine Zeile zu schreiben, um die Syntax kümmert sich der Editor dann selbst. Die Erweiterung Tag bietet ebenfalls einige Erleichterungen in Bezug auf die Entwicklung von HTML-Code. Bei Tag geht es, wie der Name bereits verrät, vor allem um HTML-Tags und das vereinfachte Bearbeiten von Inhalten in diesen oder auch das automatische Schließen geöffneter Tags. Das kann sehr hilfreich sein, da Sublime Text 3 hier von Haus aus kaum Unterstützung bietet.

Abschließend seien hier noch die Erweiterungen SublimeCodeIntel, welches für die nötige Intelligenz zum Autocomplete bei der Code-Eingabe sorgt und SublimeHttpRequester, das den Nutzer aus Sublime Text 3 heraus GET- und Post-Requests senden lässt.

Ein abschließendes Fazit zu Sublime Text 3

Seine Stärke ist die Anpassbarkeit durch Erweiterungen und per JSON-Datei vorzunehmende Benutzereinstellungen. Grundsätzlich gibt es kaum eine denkbare Anforderung, die man nicht durch Einstellen oder Erweitern hinzufügen könnte.

Mit Hilfe des Packet Managers – der installiert werden muss – können im Anschluss sehr komfortabel Erweiterungen heruntergeladen und installiert werden.

Bedingt durch die hohe Verbreitung des Editors gibt es mittlerweile eine umfassende Plugin-Bibliothek; dazu etliche Plugins, die auf den Websites der Entwickler angeboten werden.

Übrigens hat kaum ein anderer HTML-Editor eine so gute und umfassende (inoffizielle) Dokumentation. Auch Tutorials für Sublime Text 3 werden im Internet zuhauf angeboten, was die erforderliche Einarbeitungszeit deutlich verkürzt.

Sublime Text 3 ist nicht kostenfrei, kann allerdings unbegrenzt evaluiert (getestet) werden. Bei Gefallen sollten Sie der Fairness halber eine Lizenz für 80.- USD erwerben.

Link zur Website mit Download

4. WebStorm

WebStorm ist mehr also „nur“ ein HTML-Editor: Es ist eine integrierte Entwicklungsumgebung spezialisiert auf das Schreiben von JavaScript. WebStorm versteht die Struktur deines Projekts und kann dich bei jedem Aspekt von JavaScript unterstützen. Er vervollständigt deinen Code automatisch, erkennt und behebt Fehler und Redundanzen und hilft dir, deinen Code sicher zu refaktorisieren.

Link zur Website mit Download

5. Pinegrow

Pinegrow ist ein HTML-Editor für Mac-, Windows- und Linux, mit dem du moderne WordPress Websites erstellen kannst. Er bietet Live-Multi-Page-Editing, CSS- und SASS-Styling, einen CSS-Grid-Editor und unterstützt Bootstrap, Tailwind CSS und WordPress.

Link zur Website mit Download

6. Android Studio

Besonders für die Entwicklung mobiler Apps ist Android Studio eine interessante, kostenlose Alternative, bereitgestellt und stetig weiterentwickelt von Google.

Die Entwicklung der App kann man direkt in verschiedenen Android- und iOS-Geräten emulieren lassen, sodass man jede Änderung in der Webseite oder App sofort testen kann.

Frameworks wie z.B. Flutter lassen sich nahtlos per Plugin in die Entwicklungsumgebung integrieren. So macht Entwicklung Spaß!

Link zur Website mit Download

7. Brackets

Brackets ist ein moderner, quelloffener HTML-Editor mit einigen interessanten Funktionen. Zum Beispiel kann er in Zusammenarbeit mit der Adobe Creative Cloud Extract (= Vorschau) Designdaten wie Farbe, Schriftarten und Verläufe direkt aus einer PSD-Datei lesen und in korrekten CSS-Code umsetzen. Ebenso lassen sich Ebenen als Bild extrahieren, Informationen aus der PSD als Variable in einem Präprozessor nutzen und bequem Abstände und Proportionen von Elementen ermitteln. Das alles ist möglich, ohne den Editor verlassen zu müssen.

Bitte beachten: Die Nutzung der Adobe Creative Cloud ist kostenpflichtig. Die Extract-Version kann direkt gemeinsam mit Brackets installiert werden. Da Brackets Teil der Creative Cloud ist, steht er für Windows und macOS gleichermaßen zur Verfügung.

Ein weiterer großer Pluspunkt an Brackets sind die Erweiterungen, mit denen der HTML-Editor auf die eigenen Bedürfnisse angepasst werden kann. Alle drei bis vier Wochen sollen neue Erweiterungen dazukommen. Erwähnt werden will auch die vollständige Unterstützung von Präprozessoren.

In Brackets können Sie „Schnelles Bearbeiten“ sowie „Live-Vorschau“ sogar zusammen mit LESS- und SCSS-Dateien verwenden, was das Arbeiten damit wesentlich vereinfacht. Zusammen mit den richtigen Erweiterungen und der Adobe Creative Cloud Extract kann dieser Editor damit die Bedürfnisse von Profis abdecken.

Link zur Website mit Download

8. CotEditor

Der CotEditor ist eine ressourcenschonende Open-Source Coding-Alternative für den Mac. Er eignet sich für Menschen, die ihren Editor nicht täglich benötigen und einfach nur einen guten Editor mit Syntax-Highlighting brauchen. Der CotEditor darf praktisch als Notepad++ für OS X verstanden werden.

Er bietet neben einer brauchbaren Code-Vervollständigung auch eine wirklich gute „Suchen-und-Ersetzen“-Funktionalität an, Splitview zum Unterteilen des Editorfensters in mehrere Bereiche, gutes Syntax-Highlighting für 40 Programmiersprachen und kommt mit 8 Themes daher. Für einen einfachen Editor kann sehr viel angepasst werden, der Editor ist auf jeden Fall einen näheren Blick wert.

Link zur Webseite mit Download

9. Google Web Designer

Ja, Google macht auch Tools für Webdesigner. Der Google Web Designer geht dabei eher in Richtung Adobe Dreamweaver. Er ist kein reiner HTML-Editor, sondern ein kombinierter WYSIWYG- (What you see is what you get) und Text-Editor.

Arbeiten sind unter beiden Oberflächen möglich, einmal in der grafischen Oberfläche und dann auch in der Code-Ansicht. Der Google Web Designer soll aus der grafischen Oberfläche heraus gültigen HTML5- und CSS3-Code generieren und steht für macOS, Windows und Linux kostenfrei zur Verfügung.

Link zur Webseite mit Download

10. Komodo Edit

Aus dem Hause ActiveState stammt der freie Quelltext-Editor Komodo Edit, eine abgespeckte Variante der kostenpflichtigen Entwicklungsumgebung Komodo IDE. Komodo IDE ist eine der leistungsfähigeren Entwicklungsumgebungen für Programmierer. Die hat ihre Stärken besonders im Bereich der Entwicklung nativer Apps durch die Integration mit Cordova und PhoneGap, aber auch Webentwickler werden durch die Integration mit Gulp, Grunt, Yarn oder npm optimal unterstützt.

All das bietet Komodo Edit nicht. Das Tool ist tatsächlich ein reiner HTML-Editor, der sich in verschiedenen Sprachen bedienen lässt und nur die wichtigsten Features, etwa Syntaxhighlighting und Autovervollständigung an Bord hat. Auch in der freien Version bietet Komodo bereits die Projektverwaltung, so dass die Arbeit an ihrer Website nicht allzu mühselig wird.

Komodo Edit liegt aktuell in der Version 12.0 vor und steht für Windows, macOS und LInux gleichermaßen zum kostenlosen Download bereit.

Link zur Website mit Download (Windows, Mac OSX, Linux)

Die Website auf verschiedenen Geräten testen mit dem LambdaTest LT Browser — so geht’s

Hat man einmal die Basis für die Webseite erstellt, muss diese noch getestet werden. Denn was auf dem 27″ iMac toll aussieht, kann auf dem Laptop, dem iPad oder dem Handy total zerschossen aussehen.

LambdaTest LT Browser ist ein Entwickler-orientierter Browser, der Benutzern einen Entwicklungsarbeitsbereich bietet, in dem sie das Verhalten ihrer Website auf einer Vielzahl von Geräten und Ansichtsfenstern testen können.

Der Browser emuliert mehr als 25 verschiedene Standard-Größen und – Geräte (plus benutzerdefinierte Ansichtsfenster), Debugging Seit-an-Seit, lokales Testing, Fehlerverfolgung und vieles mehr.

Mit LambdaTest LT Browser können Webentwickler auf schnellste Weise reaktionsschnelle und leistungsstarke Webanwendungen entwerfen und entwickeln.

Fazit

Es gibt eine Menge HTML-Editoren für Windows, Mac OSX und Linus, doch die guten sind rarer gesät. Für den nicht-täglichen Gebrauch bietet sich Notepad++ an, für den täglichen Gebrauch eines professionellen Webentwicklers wird dieser nicht reichen. Da gibt es professionellere Lösungen, wie zum Beispiel Visual Studio Code und Sublime Text 3, welche beide umfassend an persönliche Bedürfnisse angepasst werden können.

P.S. Brauchst Du noch kostenlose Bilder und Illustrationen für deine Website?