Scott Smith

Blog Tutorials Projects Speaking RSS

Zen Coding

Never write HTML again!

Ok, so you might still need to write HTML, but Zen Coding provides an amazingly simplistic syntax for generating HTML. Take the following HTML for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="container">
    <div id="nav">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>
</html>

It is simple and straightforward but why type it out by hand if you don’t have to. With Zen Coding you don’t! The followng will generate the HTML shown above:

1

html:5>div#container>div#nav>ul>li*5

The Zen Coding concept is beautifully simple: You declare a series of nested HTML or XML elements using an intuitive and expressive inline syntax, and the plugin generates the markup for you.

There are addons to many IDEs, tools, and editors for Zen Coding including Visual Studio, Sublime Text 2, Coda, …

Learn more here: https://github.com/sergeche/zen-coding