Geek Answers Handbook

Is there a shortened version of HTML?

I remember reading an article about a shortened version or extension of HTML a few months ago. His goal was to make the HTML code much shorter by removing the end tags, and he may also have loops. I want to use it now, but I can’t remember what it was called.

I found Haml on the Internet, but the Haml syntax is not like the example I remember from the article. In the syntax from the article, rectangular brackets were used, which were a kind of indentation replacement.

What language is this?

+7
html emmet
source share
3 answers

Update

Zen Coding has been renamed Emmet and has a codebase on GitHub .

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

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

Example

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

Deploys to

 <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>
+14
source share

To answer a general question (from the name), yes, there are quite a lot of them.

Here are some of them that I looked for for my work:

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

+1
source share

http://docs.emmet.io/abbreviations/ - 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.
0
source share

More articles:


All Articles