Emmet

  • Emmet is a HTML/CSS snippet tool.
  • Emmet plugin is available for most editors.
  • Emmet follows CSS syntax
  • Emmet is Open Source
  • Similar tools: Jade, Haml
  • Homepage: http://emmet.io/download

Installation

Emmet Commands:

  • Type Emmet command, followed by Tab to expand to proper HTML/CSS.
  • Use Tab to jump to various tab location in expanded HTML/CSS.
  • Use Ctrl+Z to undo Emmet command expansion.
  • All default Emmet commands are present inside snippet.json at “C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\emmet\snippets.json”

HTML page template command:

  • HTML:5
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>

ID command:”#”

  • h1#myId
    1
    <h1 id="myId"></h1>

Class command:”.”

  • h1.myClass
    1
    <h1 class="myClass"></h1>

Multiple Class command:”.” chaining

  • h1.myclass1.myclass2
    1
    - <h1 class="myclass1 myclass2"></h1>

Parent/Child command:”>”

  • ul>li
    1
    2
    3
    <ul>
    	<li></li>
    </ul>

Sibling command:”+”

  • li+li
    1
    2
    <li></li>
    <li></li>

Parent/Child and Sibling combo command:

  • ul>li+li
    1
    2
    3
    4
    <ul>
    	<li></li>
    	<li></li>
    </ul>

DIV is default element: In below command only class name is mentioned, so DIV tag is used as default

  • .header+.main+.footer
    1
    2
    3
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>

Grouping command:”()”

  • (div.foo+div.bar)
    1
    2
    <div class="foo"></div>
    <div class="bar"></div>

Multiplication command:”*”

  • (div.foo+div.bar)*2
    1
    2
    3
    4
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>

Level-up/Climb-up command:”^”

  • ul>li^div.foo
    1
    2
    3
    4
    <ul>
    	<li></li>
    </ul>
    <div class="foo"></div>

Text command:”{}”

  • h1{hello}
    1
    <h1>hello</h1>

Image command:

Lorem Ipsum command:

  • p>Lorem
    1
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, tenetur, vel fuga accusamus velit consectetur quibusdam eligendi maxime unde in expedita et quidem laborum at ex laboriosam minima necessitatibus dicta.</p>

Number placholder commands:

  • Number element with $

  • ul>li*3>{list item $}

    1
    2
    3
    4
    5
    <ul>
    	<li>list item 1</li>
    	<li>list item 2</li>
    	<li>list item 3</li>
    </ul>

  • Use additional $$$ to pad

  • ul>li*3>{list item $$$}

    1
    2
    3
    4
    5
    <ul>
    	<li>list item 001</li>
    	<li>list item 002</li>
    	<li>list item 003</li>
    </ul>

  • Start at a different position with @

  • ul>li*3>{list item $@3}

    1
    2
    3
    4
    5
    <ul>
    	<li>list item 3</li>
    	<li>list item 4</li>
    	<li>list item 5</li>
    </ul>

  • Reverse the order with @-

  • ul>li*3>{list item $@-}
    1
    2
    3
    4
    5
    <ul>
    	<li>list item 3</li>
    	<li>list item 2</li>
    	<li>list item 1</li>
    </ul>

Sample examples

  • .header>h1#title

    1
    2
    3
    <div class="header">
    <h1 id="title"></h1>
    </div>

  • .header>h1#title{Hi there}

    1
    2
    3
    <div class="header">
    <h1 id="title">Hi there</h1>
    </div>

  • #app>.container>h1.title#welcome

    1
    2
    3
    4
    5
    <div id="app">
    	<div class="container">
    		<h1 class="title" id="welcome"></h1>
    	</div>
    </div>