Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Stop typing angle brackets. Learn how to generate complex HTML structures using simple shorthand.
If you are new to web development, you probably spend a lot of time reaching for the < and > keys on your keyboard.
HTML is a structural language, which means it is inherently verbose. To put a single word on the screen, you have to wrap it in a container. You type an opening angle bracket, the tag name, a closing angle bracket, the text, another opening bracket, a forward slash, the tag name, and a final closing bracket.
<h1>Hello</h1>
That is 14 keystrokes for one word of content. As your pages grow into hundreds of lines, typing every tag manually stops feeling like programming and starts feeling like data entry.
You do not have to write HTML this way.
Modern code editors—most notably VS Code—come with a built-in translation engine called Emmet. Emmet allows you to type a tiny, CSS-like abbreviation, hit the Tab or Enter key, and instantly expand it into fully formatted HTML.
Emmet is entirely optional. You don't need it to build websites. But once you learn its core syntax, you will never write HTML the long way again.
Short hands: The HTML Boilerplate
Let’s start with the biggest timesaver. Every HTML document requires the same structural boilerplate: a doctype declaration, an <html> tag, a <head>, meta tags, and a <body>.
Without Emmet, you either copy-paste this from an old project or spend two minutes typing it out.
With Emmet, you open a blank HTML file, type an exclamation mark, and press Tab.
[ Your Keystrokes ]
! + Tab
<!-- [ The Expanded HTML ] -->
<!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>
In two keystrokes, your file is ready. But Emmet isn't just for boilerplate. It’s for everything.
The Basic Syntax: Borrowing from CSS
The genius of Emmet is that you don't have to learn a completely new language. If you know how to select an element in CSS, you already know how to write Emmet.
1. Elements
To create an HTML element, just type the name of the tag and hit Tab. You don't need the angle brackets.
Type:
h1Result:
<h1></h1>Type:
pResult:
<p></p>
2. Classes and IDs
In CSS, you target a class with a dot (.) and an ID with a hash (#). Emmet uses the exact same logic to apply them to your HTML.
Type:
div.containerResult:
<div class="container"></div>Type:
nav#main-menuResult:
<nav id="main-menu"></nav>
Shortcut: Because div is the most common HTML element, Emmet assumes you want a div if you don't specify a tag. Typing just .card and hitting Tab will automatically generate <div class="card"></div>.
3. Custom Attributes and Text
Sometimes you need to add attributes (like an image source or a link destination) or text inside the tag right away. You use square brackets [ ] for attributes, and curly braces { } for text.
Type:
a[href="https://hashnode.com"]{Click Here}Result:
<a href="https://hashnode.com">Click Here</a>
Composition: Building the DOM Tree
Writing single lines is great, but Emmet's real power is used when you use it to generate entire blocks of nested code at once. You do this using standard math symbols.
Nesting (>)
To put one element inside another, use the greater-than sign (>). Think of it as an arrow pointing down the DOM tree.
ul>li
<!-- [ The Expanded HTML ] -->
<ul>
<li></li>
</ul>
Siblings (+)
To put elements next to each other (at the same level), use the plus sign (+).
[ Your Keystrokes ]
h1+p
<!-- [ The Expanded HTML ] -->
<h1></h1>
<p></p>
Multiplication (*)
This is the feature you will use daily. If you need a list with five items, you don't type the li abbreviation five times. You just multiply it.
ul>li*3
<!-- [ The Expanded HTML ] -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Seeing It All Together
Let's look at a realistic scenario. You are building a navigation bar. It needs a <nav> container with a class of navbar, an unordered list, and four list items inside, each containing an anchor tag.
Doing this by hand takes dozens of keystrokes and careful formatting. With Emmet, you conceptualize the structure as a single string:
[ Emmet Workflow inside Code Editor ]
nav.navbar > ul > li*4 > a
| | | |
(1) (2) (3) (4)
1. Make a nav with the class 'navbar'
2. Inside that, put a ul
3. Inside that, put 4 li elements
4. Inside each li, put an a (link)
When you hit Tab, the editor instantly paints the structure for you:
<nav class="navbar">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
Conclusion
Emmet is not just a typing shortcut; it is a mental model.
When you write HTML by hand, you are thinking about syntax—remembering to close tags, match quotes, and indent properly. When you write HTML using Emmet, you are thinking about structure. You are translating the tree in your head directly onto the screen.
You do not need to memorize every complex Emmet abbreviation. Start with the boilerplate (!). Then start using . for classes. Once that feels natural, try chaining a few elements together with >.
Before long, typing <div class="wrapper"> by hand will feel as antiquated as writing code on a typewriter. Let the editor handle the syntax. You just focus on the structure.
