Emmet for HTML: A Guide to Writing Faster Markup

What is Emmet?
Answer: Emmet is a powerful toolkit for web developers that speeds up HTML and CSS coding through abbreviation expansion.
Instead of typing complete HTML tags and CSS properties, we can write short abbreviations that instantly expand into full code structure.

Example, typing div.container>ul>li*3 and pressing Tab expands to:

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Basic Emmet Cheatsheet:

HTML Elements

• div → <div></div>

• p → <p></p>

• section → <section></section>

Classes and IDs

• div.container → <div class="container"></div>

• div#header → <div id="header"></div>

• div.class1.class2 → <div class="class1 class2"></div>

Child and Sibling

• div>p → Nested child element

• div+p → Sibling elements at same level

• div>ul>li → Multiple levels of nesting

Multiplication

• li*5 → Creates 5 list items

• div.item*3 → Creates 3 divs with class "item"

Numbering

• li.item$*3 → Creates item1, item2, item3

• li.item$$$*3 → Creates item001, item002, item003

Text Content

• p{Hello World} → <p>Hello World</p>

• a{Click here} → <a href="">Click here</a>

Attributes

• a[href="#"] → <a href="#"></a>

• img[src="photo.jpg" alt="Photo"] → Full img tag with attributes

• input[type="text" placeholder="Name"] → Input with attributes

Grouping

• (header>nav)+main+footer → Groups elements together

Common Snippets

• ! → Complete HTML5 boilerplate

• link:css → <link rel="stylesheet" href="style.css">

• script:src → <script src=""></script>

• img → <img src="" alt="">

• input:text → <input type="text">

CSS Abbreviations

• m10 → margin: 10px;

• p20 → padding: 20px;

• w100p → width: 100%;

• fz16 → font-size: 16px;

• df → display: flex;

• tac → text-align: center;

Questions

1. Writing HTML and CSS without Emmet?

Answer: As we’ve seen above writing with emmet speeds up the process of writing HTML and CSS significantly, if you write without Emmet the more HTML and CSS code you write the more tedious it and time-consuming it becomes.

2. Who developed Emmet?

Answer: Emmet was developed by Sergey Chikyuyonok, a Russion web developer. It’s original name was Zen Coding(achieving more with less code) which later on in 2012 became Emmet (small but productive).

3. How to get started with Emmet and HTML?

Answer: Emmet is already built-in to most of the modern code editors, you can directly spin-up your code editor and start writing your HTML, and Don’t forget to tryout examples from the above cheat-sheet.

References

1. Official Emmet Documentation

2. Emmet Credits