[HTML] Emmet

Emmet is a web-developer's toolkit that can greatly improve HTML and CSS workflow.

 

Most of the editors already have the Emmet plug-in.

I'm using the VSCode, and it has this feature. So, we don't need anything. Just enjoy it!

Note

Before explaining emmet syntax, let me explain a few things first.

If you input the Emmet syntax, the VSCode will notice it to you.

You have to press <TAB> or <ENTER> key at this time.

 

Emmet syntax doesn't allow to use a space.

 

You can skip tag names and Emmet will substitute it for you.

Here are some examples.

.wrap>.content  =>  div.wrap>div.content
em>.info  =>  em>span.info
ul>.item*3  =>  ul>li.item*3
table>#row$*4>[solspan=2]  =>  table>tr#row$*4>td[colspan=2]

 

Don't forget these things.

Now, let's learn the Emmet with examples.

Elements

Type a tag name of HTML and press <TAB>, so it is transformed to tag!!

Input
div

Output
<div></div>

Nesting Operators

Child: >

Input
ul>li

Output
<ul>
  <li></li>
</ul>

Sibling: +

Input
h1+span

Output
<h1></h1>
<span></span>

Climb-Up: ^

Input
h1>h2^span

Output
<h1>
  <h2></h2>
</h1>
<span></span>

You can use ^ symbol multiple times.

Input
h1>h2>h3^^span

Output
<h1>
  <h2>
    <h3></h3>
  </h2>
</h1>
<span></span>

Multiplication: *

Input
ul>li*3

Output
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Grouping: ( )

Input
div>(ul>li*3)+span

Output
<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <span></span>
</div>

Attribute Operators

ID: #

Input
header#title+#contents

Output
<header id="title"></header>
<div id="contents"></div>

Class: .

Input
.container>.box*3

Output
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Custom Attributes: [ ]

Input
a[href="#"]

Output
<a href="#"></a>

Item Numbering: $

The $ symbol will be automatically changed to the number.

Input
ul>li.item$*3

Output
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

And, it can be used multiple times.

Input
ul>li.item$$$*3

Output
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
</ul>

You can set the start number with @.

Input
ul>li.item$@3*4

Output
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
</ul>

You can reverse the number with @-, but it is not work in the VSCode.

Input
ul>li.item$@-*3

Output
<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

Text Operator

Text: { }

Input
h1{Title}

Output
<h1>Title</h1>

Dummy Text Generator

When you develop a web page, you sometimes want to fill dummy text temporarily until created the contents.

The keyword lorem will do it!!

Input
div>lorem

Output
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur qui labore, totam aliquam harum blanditiis dolor doloribus velit minus optio laborum sapiente dolorum doloremque illum? Autem, voluptatibus iste? Quae, maxime?</div>

You can specify the number of words.

Input
lorem5.text

Output
<div class="text">Lorem ipsum dolor sit amet.</div>

CheatSheet

https://docs.emmet.io/cheat-sheet/