Today's Question:  What does your personal desk look like?        GIVE A SHOUT

Write HTML easily with Emmet and Haml

  sonic0002        2013-06-11 19:46:02       9,811        1    

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:

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:

Author : 阮一峰  Source :http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

HTML  EMMET  HAML 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  1 COMMENT


cinta [Reply]@ 2015-01-04 10:47:50

cinta itu sangat indah