Writing HTML codes is very boring and tedious as it has many tags and it's static. One solution is to use template, filling content based on other's skeleton. One another solution is high speed writing. We can write HTML codes with Emmet and Haml.
These two ways have similar functions but with different characteristics. Haml is based on Ruby, so when working on Ruby/Rails projects, we recommend to use Haml, otherwise we recommend to use Emmet.
1. Emmet
Emmet is a editor plugin, the official website provides multiple editor support. We can use it as vim plugin. First we can follow the vim plugin manual. Then creating a file and type:
html:5
Press <Ctrl+y> and then press ',' key(Different editors have different shortcut key), the above line will become:
<!DOCTYPE html> <html lang="en"> <head> 　　<meta charset="UTF-8"> 　　<title></title> </head> <body> </body> </html>
This is basic use of Emmet, first write the simple code and then use "<Ctrl+y>," to convert them into HTML codes.
The rules supported by Emmet are similar to those of CSS selectors:
1. E represents HTML tag
2. E#id represents id attribute
3. E.class represents class attribute
4. E[attr=foo] represents one specified attribute
5. E{foo} represents tag contains content foo
6. E>N represents N is sub element of E
7. E+N represents N is sibling of E
8. E^N represents N is parent of E
Look at below example:
p
p#main.item
a[href=http://wikipedia.org]{Wikipedia}
div>p
div+p
p>span^div
The returned HTML codes are:
<p></p> <p id="main" class="item"></p> <a href="http://wikipedia.org">Wikipedia</a> <div> 　　<p></p> </div> <div></div> <p></p> <p><span></span></p> <div></div>
Also we can use E*N and E$*N:
li*3>a div#item$.class$$*3
The returned HTML codes are:
<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <div id="item1" class="class01"></div> <div id="item2" class="class02"></div> <div id="item3" class="class03"></div>
For more details about Emmet. Please check below:
- Zeno Rocha, Goodbye, Zen Coding. Hello, Emmet!
- Sergey Chikuyonok, Zen Coding: A Speedy Way To Write HTML/CSS Code
- Joshua Johnson, 7 Awesome Emmet HTML Time-Saving Tips
- Zen-coding vim tutorial
2. Haml
Different from Emmet, Haml is a command line tool, we need to first install Ruby and then Haml.
gem install haml
When using it, use command to convert haml file to HTML file directly.
haml input.haml output.html
Rules of Haml:
1. !!! 5 :
2. %E : HTML tag
3. %E#id : id attribute
4. %E.class : class attribute
5. %E(attr="xxx") : One specified attribute
6. %E XXX : the content of tag
7. %E %N : N is sub element of E
Below is Haml code demo:
!!! 5
　　%html{lang: 'en'}
　　　　%head
　　　　　　%title Haml Demo
　　　　%body
　　　　　　%h1 Hello World
　　　　　　%a(href="http://wikipedia.org" title="Wikipedia") Wikipedia
Below is the returned HTML codes:
<!DOCTYPE html> <html lang='en'> 　　<head> 　　　 <title>Haml Demo</title> 　　</head> 　　<body> 　　　 <h1>Hello World</h1> 　　　　<a href='http://wikipedia.org' title='Wikipedia'>Wikipedia</a> 　　</body> </html>
In Haml, line starting with '/' represents HTML comment, line starting with "-#" represents Haml comment.
For more details, please check:
- Nick Walsh, Craft cleaner, more concise HTML with Haml
- Ian Oxley, An Introduction to Haml
- Haml Reference
Author : 阮一峰 Source :http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
cinta itu sangat indah