Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
If you’ve just started learning HTML, you’ve probably felt this pain 👇
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Typing this again and again feels slow, repetitive, and boring.
You might even think:
“Am I really going to type all of this every time?”
This is exactly where Emmet comes in.
What is Emmet? (In Very Simple Terms)
Emmet is a shortcut language for writing HTML faster.
Instead of typing full HTML tags manually, you write short abbreviations, press Tab, and Emmet instantly expands them into full HTML.
Think of Emmet like:
Autocomplete on steroids
Or shorthand notes that turn into full sentences
You write less, but you get more HTML.
How Emmet Works Inside Code Editors
Emmet is built into most modern code editors.
You don’t install it separately in:
VS Code
Sublime Text
Atom
WebStorm
How it works:
You type an Emmet abbreviation
You press Tab (or Enter in some editors)
The editor expands it into HTML
Emmet Is a Shortcut Language for HTML
Emmet doesn’t replace HTML.
It just helps you generate HTML faster.
You write this:
p
You get this:
<p></p>
Creating HTML Elements Using Emmet
Let’s start with the basics.
Example 1: Single element
Emmet
h1
Expanded HTML
<h1></h1>
Example 2: Multiple different elements
Emmet
header
HTML
<header></header>
Adding Classes, IDs, and Attributes
Adding a class
Emmet
div.container
HTML
<div class="container"></div>
Adding an ID
Emmet
section#hero
HTML
<section id="hero"></section>
Class + ID together
Emmet
div#card.box
HTML
<div id="card" class="box"></div>
Adding attributes
Emmet
img[src="logo.png" alt="logo"]
HTML
<img src="logo.png" alt="logo">
Creating Nested Elements (Parent → Child)
Nested HTML is very common, and Emmet makes it extremely easy.
Example: div → p
Emmet
div>p
HTML
<div>
<p></p>
</div>
Example: header with nav and links
Emmet
header>nav>a
HTML
<header>
<nav>
<a href=""></a>
</nav>
</header>
Repeating Elements Using Multiplication
Let’s say you want multiple list items.
Example: 5 list items
Emmet
li*5
HTML
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Nested + repeated elements
Emmet
ul>li*3
HTML
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Generating Full HTML Boilerplate with Emmet
This is one of Emmet’s most loved features.
Emmet
!
(or)
html:5
HTML Output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Instead of memorizing this, you generate it instantly.
