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.
Topics
- For Creating HTML 5 Doctype in blank document (file)
- . For define an element class
- # For define an element id
- + For define an element siblings
- > For define an element child
- * For define an element as multiplication
- [ ] For define link for anchor text
- $ For define an element numbering
- { } For define custom text
- ( ) For append two or more zen code
For Creating HTML 5 Doctype in blank document (file)
In Zen Code:
! or html:5
In HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset=”UTF-8”>
<title></title>
</head>
<body>
</body>
</html>
. For define an element class
In Zen Code:
div.header
In HTML:
<div class=”header”></div>
# For define an element id
In Zen Code:
div#logo
In HTML:
<div id=”logo”></div>
+ For define an element siblings
In Zen Code:
div#logo+ul#header-navigation
In HTML:
<div id=”logo”></div> <ul id=”header-navigation”></ul>
> For define an element child
In Zen Code:
div.header>div#logo+ul#header-navigation
In HTML:
<div class=”header”> <div id=”logo”></div> <ul id=”header-navigation”></ul> </div>
* For define an element as multiplication
In Zen Code:
div.header>div#logo+ul#header-navigation>li*4
In HTML:
<div class=”header”>
<div id=”logo”></div>
<ul id=”header-navigation”>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
[ ] For define link for anchor text
In Zen Code:
div.header>div#logo+ul#header-navigation>li*4>a[href=#]
In HTML:
<div class=”header”>
<div id=”logo”></div>
<ul id=”header-navigation”>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
<li><a href=”#”></a></li>
</ul>
</div>
$ For define an element numbering
In Zen Code:
div.header>div#logo+ul#header-navigation>li*4>a[href=#].link$
In HTML:
<div class=”header”>
<div id=”logo”></div>
<ul id=”header-navigation”>
<li><a href=”#” class=”link1”></a></li>
<li><a href=”#” class=”link2”></a></li>
<li><a href=”#” class=”link3”></a></li>
<li><a href=”#” class=”link4”></a></li>
</ul>
</div>
{ } For define custom text
In Zen Code:
div.header>div#logo+ul#header-navigation>li*4>a[href=#].link${nav item}
In HTML:
<div class=”header”>
<div id=”logo”></div>
<ul id=”header-navigation”>
<li><a href=”#” class=”link1”>nav item</a></li>
<li><a href=”#” class=”link2”>nav item</a></li>
<li><a href=”#” class=”link3”>nav item</a></li>
<li><a href=”#” class=”link4”>nav item</a></li>
</ul>
</div>
( ) For append two or more zen code
In Zen Code:
(div.header>div#logo)+(div>h1{hi this is heading})
In HTML:
<div class=”header”>
<div id=”logo”></div>
</div>
<div>
<h1>hi this is heading </h1>
</div>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.