Zen Code (Emmet): Quick way to write HTML code

Overview

In day to day life of a html developer, the html tags “< />” works as companion. With these tags the developer creates some awesome layout for webview or other visual stuff, but for all these they have to do lots of line code.

“Zen Code” is the one of the best way to boost these coding practice. Nowadays ”Zen Code” is known as “Emmet” because it was developed by Emmet team.

If you can type one line of code and after that it will convert in your desired html code, doesn’t that sound wow? – Yes, you can do this through zen code. Only thing you require is “Zen Code Plugin or Zen Engine” for your particular text editor that’s it, the special thing about “Zen Code Plugin” is also available for “Notepad++”. Also, it is open source so it is free of cost and available for most of the editor in the market.

Code editor support:

  • Eclipse
  • Netbeans
  • Sublime Text
  • Dreamweaver
  • Editplus
  • EmEditor
  • Notepad++
  • Other famous in market.

Based on editor they provide some shortcut keys to execute zen-code to html format, which you can find from documentation of that plugin.

For Creating HTML 5 Doctype in blank document (file)

In Zen Code:

In HTML:

. For define an element class

In Zen Code:

In HTML:

# For define an element id

In Zen Code:

In HTML:

+ For define an element siblings

In Zen Code:

In HTML:

> For define an element child

In Zen Code:

In HTML:

* For define an element as multiplication

In Zen Code:

In HTML:

[ ] For define link for anchor text

In Zen Code:

In HTML:

$ For define an element numbering

In Zen Code:

In HTML:

{ } For define custom text

In Zen Code:

In HTML:

( ) For append two or more zen code

In Zen Code:

In HTML:

So, working smart is better than working like machine that ultimately saves time and efforts. Definitely zen code is one of the best tool in market for making smart HTML in less time and accurate DHTML structure.

mm

Parthiv Butani Web Designer

I am a web designer and a creative artist at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am willing to find an effective solution with a cup of coffee for difficult design problems which I faced.

Leave a Reply

Top