Emmet

HTML + CSS short code library

What is Emmet?

Emmet is a set of plugins to enable the use of short code to quickly write HTML and CSS.

Background

  • Created in 2008
  • Originally called "Zen Coding"
  • Maintained by Sergey Chikuyonok
  • Renamed to "Emmet" in January 2013

How does it work?

Use Emmet syntax to create complex code structures with only having to type one line of code.

HTML

Nesting


ul>li>a
						


    
  
    • 


						

h2+p+small
						






						

h2>a^p>strong^small

MATH!


ul>li*5
						


    
  
  • 
  
  • 
  
  • 
  
  • 
  
  • 


						

(dl>(dt+dd)*3)

HTML

Attributes


div.container
						



						

div#content
						



						

nav#nav-main>ul>li*5>a.link

CSS


m10
						

margin: 10px;
						

mt40
						

margin-top: 40px;

Customization

Set of customizable JSON files that come with plugin:

  • snippets.json: Add your own or update existing snippets
  • preferences.json: Change behavior of some Emmet filters and actions
  • syntaxProfiles.json: Define how generated HTML/XML should look

Text editors

Sublime Text 2
Notepad++

THERE WILL BE VIM!

Emmet

emmet.io