Introduction
Emmet is a great plugin for accelerated code writing that can be added to many well-known text editors and IDEs. It has certain abbreviations that, when combined, give a finished code that is much longer and more complex. It is installed as a plugin, and the installation depends on the IDE application in which it is implemented. I described how the Emmet plugin is installed as part of PHP Storm on the page “Installation of tools for web development”. It is used by typing the abbreviation in the editor and then pressing the “trigger button”, the default button is TAB.
Emmet syntax
> (level down)
nav>ul>li*3
|
1 2 3 4 5 6 7 |
<nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> |
+ (same level)
div+p+bq
|
1 2 3 |
<div></div> <p></p> <blockquote></blockquote> |
^ (level up)
div>p>span+em^bq
|
1 2 3 4 |
<div> <p><span></span><em></em></p> <blockquote></blockquote> </div> |
( ) grouping
div>(header>ul>li*2>a)+footer>p
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> |
. (classes)
p.class1.class2.class3
|
1 |
<p class="class1 class2 class3"></p> |
# (ID)
form#search
|
1 |
<form id="search"></form> |
$ (dynamic number)
Example No. 1
ul>li.item$*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> |
Example No. 2
ul>li.item$$$*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> |
Example No. 3
ul>li.item$@3*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> |
Example No. 4
ul>li.item$@-*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> |
{ } (text)
a{Click me}
|
1 |
<a href="">Click me</a> |
[ ] (attributes)
p[title=”Hello world”]
|
1 |
<p title="Hello world"></p> |
Emmet HTML abbreviations
The following examples show frequently used abbreviations:
!!!
|
1 |
<!DOCTYPE html> |
!
|
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> |
lorem
Generates different sentences of 30 words.
|
1 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa in natus sapiente? Aspernatur assumenda in incidunt magni necessitatibus optio. Deleniti expedita fugit ipsam, laboriosam quis repellendus tenetur totam voluptas voluptatem. |
lorem5
Generates different sentences of 5 words.
|
1 |
Lorem ipsum dolor sit amet. |
a
|
1 |
<a href=""></a> |
br
|
1 |
<br /> |
link
|
1 |
<link rel="stylesheet" href="" /> |
img
|
1 |
<img src="" alt="" /> |
iframe
|
1 |
<iframe src="" frameborder="0"></iframe> |
form
|
1 |
<form action=""></form> |
input
|
1 |
<input type="text" /> |
label
|
1 |
<label for=""></label> |
video
|
1 |
<video src=""></video> |
bq
|
1 |
<blockquote></blockquote> |
btn
|
1 |
<button></button> |