Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

Introduction to Emmet

What is Emmet?

Emmet is a powerful tool built for developers to write faster HTML with the help of tricks and abbreviations

How is Emmet useful of Beginners?

Emmet is useful especially for HTML beginners as they can focus on writing semantic HTML without having to memorize boilerplate code.

How it works in code editors?

Emmet can be used by writing abbreviations inside code editors. This avoids the hassle of writing boilerplate HTML code.

Emmet is like a “shortcut” language for HTML

Basic Emmet syntax and abbreviations

HTML Element Abbreviation

Any HTML tag can be entered for fast scaffolding:

p     → <p></p>
div   → <div></div> 
table → <table></table>

Emmet expands them into complete elements.

Child > and Sibling + Combinators

Combine tags with > and + to make complex markup:

nav>ul>li    → <nav><ul><li></li></ul></nav>
div+p+span →  
  <div></div>
  <p></p>
  <span></span>

These builds nested and sibling structures rapidly.

Multiplication * Operator

Repeat elements by appending *n to multiply:

ul>li*5 →
  <ul>
    <li></li>
    <li></li> 
    <li></li>
    <li></li>
    <li></li>
  </ul>

No need to copy-paste!

Content Insertion {}

Insert text content with curly braces:

p{Hello world} → <p>Hello world</p>

Numbering $

Sequentially number items using $:

ul>li.item$*5 →
  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li> 
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

There are many more Core Emmet Features to speed up writing markup.

Handy HTML Abbreviations

Here is a handy reference table of some common Emmet HTML shortcuts:

See the full HTML cheat sheet here.

Let‘s go over some CSS helper abbreviations too!

Handy CSS Abbreviations

Emmet comes packed with tons of CSS abbreviations out of the box:

You can instantly type these shortcuts instead of declaring the full CSS each time!

Other Resources:

• How to Write Faster HTML and CSS Code Using Emmet – TheLinuxCode

• Emmet Cheat Sheet

• Emmet for HTML: A Beginner’s Guide to Writing Faster Markup - DEV Community