HTML Editor


Ein HTML Editor ist eine Software für die Bearbeitung und Erstellung von HTML-Code, der für Websites oder andere Web-Dokumente verwendet wird. Mit textbasierten HTML Editoren kann der Quellcode direkt bearbeitet werden. Sogenannte WYSIWYG-Editoren zeigen das zu bearbeitende Dokument schon so an, wie es später im Browser dargestellt wird. Üblicherweise sind HTML Editoren Teil einer integrierten Entwicklungsumgebung.

Funktionsweise

Ein HTML-Editor ist zunächst ein simples Computerprogramm, das textbasiert arbeitet. Ein erfahrener Programmierer kann auch einen einfachen Texteditor verwenden, um HTML-Code zu schreiben.

HTML Editoren unterscheiden sich von reinen Texteditoren jedoch dadurch, dass sie zum Beispiel in eine Entwicklungsumgebung integriert sind oder zahlreiche Zusatzfunktionen bieten:

  • automatische Erkennung von HTML Tags
  • Hinweise auf Syntaxfehler
  • Autovervollständigen-Funktion
  • Kurzbefehle für gängige Tags
  • erweiterte Verwendung für PHP
  • Bearbeitung von HTML-Code direkt im Layout des Webdokuments (WYSIWYG-Editoren)

Typen

Grundsätzlich lassen sich zwei verschiedene Typen unterscheiden: textbasierte HTML Editoren und WYSIWYG-Editoren.

Textbasierte HTML Editoren

Diese Form der HTML Editoren setzt voraus, dass der User sich in HTML auskennt und mit HTML Tags umzugehen weiß. Gute, textbasierte Editoren verfügen zusätzlich über eine Korrekturfunktion, die Syntaxfehler farblich hervorhebt. Manche Programme lassen sich auch mit einer Autovervollständigen-Funktion nutzen.

WYSIWYG-Editoren

Ein WYSIWYG-Editor ist auch für User ohne HTML-Vorkenntnisse geeignet. Das Akronym „WYSIWYG“ steht dabei für „what you see is what you get“ und drückt genau das aus, was ein solcher HTML-Editor tut. Mit ihm können User den HTML-Code im Layout der entsprechenden Webseite bearbeiten. Der Editor wandelt alle Eingaben direkt in HTML-Code oder CSS um. Die Funktionen sind dabei ähnlich wie bei gängigen Office-Programmen. Änderungen am Text oder an Bildern werden nach dem Bearbeiten direkt sichtbar. WYSIWYG-Editoren werden zum Beispiel von CMS- und Blogsystemen wie WordPress oder Joomla verwendet.

Kostenlose HTML-Editoren

Im Netz gibt es eine große Menge an HTML-Editoren, die zum Download zur Verfügung stehen. Kostenlose Programme stehen kostenpflichtigen Versionen bei den Basisfunktionen in nichts nach.

  • Netbeans: der kostenlose HTML-Editor Netbeans arbeitet innerhalb einer IDE (integrated development environment). Er ist für Windows, iOS und Linux verfügbar und unterstützt auch HTML5. Eine automatische Fehlerkorrektur hilft dabei, Bugs zu vermeiden.
  • Notepad++: Der schlanke und schlichte HTML-Editor verfügt über eine Syntaxmarkierung und eine Autocomplete-Funktion. Darüber hinaus können mehrere Dokumente in verschiedenen Tabs bearbeitet werden.
  • Phase 5: Der übersichtlich gestaltete HTML-Editor bietet zahlreiche Komfortfunktionen wie Syntaxhervorhebung und eine Korrekturhilfe. Darüber hinaus kann der Code auch in einer Browseransicht geladen werden. Für Privatanwender sowie Schulen und Vereine ist die Nutzung kostenlos. Der HTML-Editor ist nur für Windows-Anwender verfügbar.
  • NVU/KompoZer: Der NVU ist ein WYSIWYG-Editor, der sich auch für die Erstellung von Webseiten eignet. Ein integrierter FTP-Uploader ermöglicht es, die erstellte HTML-Seite direkt ins Internet hochzuladen. Ein direkter Nachfolger mit gleichen Funktionen ist der KompoZer. Beide Programme können mit Windows, Linux und iOS verwendet werden.
  • Google Web Designer: Die kostenlose Software des Google-Konzerns bietet umfangreiche Funktionen und ist auch für den Entwurf kompletter Webseiten geeignet. Das Programm lässt sich sowohl im WYSIWYG-Modus als auch in der Code-Ansicht für HTML, CSS, JavaScript oder XML verwenden. Darüber hinaus unterstütz der Google Web Designer auch das Einfügen von 3D-Objekten sowie HTML 5. Der Editor ist für Windows und iOS verfügbar.
  • Amaya: Der kostenlose HTML-Editor des W3C ist besonders deshalb erwähnenswert, weil er Standards beherrscht, die noch in der Entwicklung stehen. Aus diesem Grund eignet sich Amaya für Demonstrationen von neuer Software.
  • Hex Editor: Dieser HTML-Editor ist für Profis gedacht, die neben HTML-Code auch den Kontroll-Code im Hexadezimalsystem bearbeiten wollen.
  • Microsoft Expression Web: Die umfangreiche Software von Microsoft ermöglicht das Erstellen von kompletten Webseiten. User können neben einem WYSIWYG-Editor auch die Quellcode-Ansicht wählen. Eine intelligente Korrekturfunktion für HTML und PHP ist integriert.

Kostenpflichtige Anbieter

Kostenpflichtige HTML Editoren sind meist Bestandteil einer kompletten Entwicklungsumgebung für neue Websites und werden von professionellen Webdesignern genutzt.

  • Adobe Dreamweaver: Bei diesem Editor handelt es sich um eines der beliebtesten Programme für professionelle Anwender.
  • Corel Draw – Graphics Suite: Die Graphics Suite von Corel ist ähnlich wie Adobe Dreamweaver ein mächtiges Programm für Webdesigner und –Entwickler.
  • Rapid Weaver: Dieser Editor ist für iOs geeignet und auch für Hobby-Anwender sinnvoll.

Bedeutung für die Suchmaschinenoptimierung

HTML Editoren sind wichtige Instrumente für die OnPage Optimierung. Zum einen können damit Fehler im Quellcode entdeckt und behoben werden. Fehler bei der Programmierung können zur Abwertung einer Internetseite durch eine Suchmaschine führen.

Zum anderen helfen Editoren auch dabei, den Quellcode zu optimieren, damit die Ladezeit einer Webseite verringert werden kann. Denn je schlanker der Code gestaltet wird, desto besser können die Bots der Suchmaschinen Webseiten crawlen. Auf diese Weise erreichen die Crawler noch mehr Dokumente über die interne Verlinkung.

WYSIWYG-Editoren haben zusätzlich den Vorteil, dass der Bearbeiter direkt sehen kann, wie sich Veränderungen am Code auswirken. Auf diese Weise helfen HTML Editoren auch bei der Optimierung der Usability einer Seite, wenn zum Beispiel Bilder oder Buttons mit Call-to-Action-Elementen nach einer Webanalyse neu platziert werden sollen, um die CTR auf der Seite zu erhöhen.

Weblinks