Schneller HTML schreiben mit Zen Coding

Man lockt zwar niemanden mehr hinter dem Ofen damit hervor, aber manch ein Web-Entwickler kennt Zen Coding immer noch nicht. Es ist eine kleine Erweiterung, die es für diverse Editoren gibt und die Erstellung von HTML stark vereinfacht und beschleunigt.
Zen Coding bedient sich dabei stark der aus CSS bekannten Syntax und bohrt diese noch etwas auf. In einem leeren Dokument schreibe ich beispielsweise

html:5

Danach drückt man eine bestimmte Tastenkombination um Zen Coding auszuführen (bei TextMate ist es z.B. Cmd+E) und es wird der Standard-Quelltext eines HTML5-Dokuments generiert. Der Cursor landet dann sofort im body-Tag und man kann direkt weiter tippen, z.B.

header+section#content>h1+p.anriss+ul>li*5>a

Daraus wird automatisch

generiert. Man kann Kindelemente mittels > definieren und Elemente auf der selben Ebenen mittels +. Außerdem ist es möglich direkt Attribute, Klassen und IDs genauso wie man es von CSS kennt, mit anzugeben.

p.anriss

section#content
a[title="externer Link"]

Die Editor-Erweiterung beschleunigt gerade beim Neuaufbau einer Website deutlich, beim späteren Editieren ist sie dann aber immernoch eine gute Hilfe, die Tipp-Arbeit erspart.

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.