Is there a shorthand version of HTML available?

Question

I remember reading an article about a shorthand version, or extension, of HTML a few months ago. Its purpose was to make HTML code significantly more concise, by removing end tags, and it may have allowed loops of some sort as well. I want to use it now, but I can't seem to remember what it was called.

Searching online, I found Haml, but Haml syntax doesn't look like the example that I remember from the article. The syntax from the article made use of right angle brackets, which were a sort of replacement for indentation.

What is this language?

Answer 1

Update

Zen Coding has been renamed to Emmet and has its codebase at GitHub.

---

I think you are looking for Zen Coding, which can be found at http://code.google.com/p/zen-coding/.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

Example

div#page>div.logo+ul#navigation>li*5>a

Expands into

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>

Answer 2

To answer the general question (from the title) yes there are quite a few.

These are a few that I have looked at for my own work:

• Jade
• Haml
• SHH
• Slim

If you add more in comments I can add them to the answer (and they will also exist in the comments).

Answer 3

http://docs.emmet.io/abbreviations/ is my favorite shorthand

QUOTE>>

Here’s an example: this abbreviation

#page>div.logo+ul#navigation>li*5>a{Item $}
...can be transformed into

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

...with just a single key stroke. In many editors (such as Eclipse, Sublime Text 2, Espresso etc.) plugins will also generate proper tabstop marks so you can quickly traverse between important places of generated code with the Tab key.