DEV Community

Cover image for Emmet for HTML - A Beginner’s Guide to Writing Faster Markup
Souvik Guha Roy
Souvik Guha Roy

Posted on

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

#webdev #beginners #programming #html

Have you ever felt tired just by opening and closing HTML tags again and again?

<div></div>
<section></section>
<ul></ul>
<li></li>
Enter fullscreen mode Exit fullscreen mode

Yeah… we’ve all been there 😅
As beginners, writing HTML can feel slow, repetitive, and honestly a little boring.

But here’s the good news 👇
There’s a tool that does all the boring work for you and helps you code faster, cleaner, and smarter.

That tool is Emmet 🚀

What You’ll Learn in This Blog

In this blog, we’ll cover:

  • What Emmet is (in very simple terms)
  • Why Emmet is useful for HTML beginners
  • How Emmet works inside code editors
  • Basic Emmet syntax and abbreviations
  • Creating HTML elements using Emmet
  • Adding classes, IDs, and attributes
  • Creating nested elements
  • Repeating elements using multiplication
  • Generating a full HTML boilerplate with Emmet

What Is Emmet?

Emmet is a developer tool (or plugin) that helps you write HTML and CSS much faster by using short abbreviations that expand into full code.

Instead of writing long HTML manually, you just type a shortcut, press Tab, and Emmet generates the complete code for you.

👉 Great news:
If you’re using VS Code, Emmet is already pre-installed 🎉
You don’t need to install anything extra.

Why Emmet Is Useful for HTML Beginners

Emmet is especially helpful when you’re just starting out.

It helps beginners to:

  • ✨ Write faster
  • ❌ Make fewer syntax errors
  • 🧠 Focus on structure instead of typing
  • 💪 Build confidence while coding
  • 😌 Avoid frustration and burnout

Instead of worrying about missing closing tags, you can focus on learning how HTML actually works.

How Emmet Works Inside Code Editors

Emmet works by watching what you type.

When you type an abbreviation and press Tab, Emmet instantly converts it into valid HTML code.

For example, instead of writing this manually:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

You can simply type:

ul>li*5
Enter fullscreen mode Exit fullscreen mode

Press Tab, and Emmet generates the full structure for you ✨

Basic Emmet Syntax and Abbreviations

Emmet uses a syntax that looks very similar to CSS selectors, which makes it easy to learn.

You can use Emmet to:

  • Create HTML elements
  • Nest elements inside each other
  • Add classes, IDs, and attributes
  • Repeat elements multiple times

Let’s break it down step by step.

1. Nesting Elements (>)

The > operator is used to create elements inside other elements.

Example 

div>ul>li
Enter fullscreen mode Exit fullscreen mode

Output 

<div>
  <ul>
    <li></li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

This is perfect when building layouts or lists quickly.

2. Repeating Elements (*)

The * operator is used to repeat an element multiple times.

Example 

ul>li*5
Enter fullscreen mode Exit fullscreen mode

Output 

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

No more copying and pasting <li> tags again and again 🙌

Adding Classes, IDs, and Attributes

Just like CSS, Emmet uses:

  • # for id
  • . for class

1. Adding an ID 

div#header
Enter fullscreen mode Exit fullscreen mode 
<div id="header"></div>
Enter fullscreen mode Exit fullscreen mode

2. Adding a Class 

div.page
Enter fullscreen mode Exit fullscreen mode 
<div class="page"></div>
Enter fullscreen mode Exit fullscreen mode

3. Adding Multiple Classes and IDs Together 

div#footer.class1.class2.class3
Enter fullscreen mode Exit fullscreen mode 
<div id="footer" class="class1 class2 class3"></div>
Enter fullscreen mode Exit fullscreen mode

You can also create multiple elements at once:

div#header + div.page + div#footer.class1.class2
Enter fullscreen mode Exit fullscreen mode 
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2"></div>
Enter fullscreen mode Exit fullscreen mode

Generating a Full HTML Boilerplate with Emmet

Now let’s talk about the most powerful and popular Emmet feature 🔥

Writing this manually:

<!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>
Enter fullscreen mode Exit fullscreen mode

Feels:

  • Time-consuming 😴
  • Repetitive
  • Error-prone (easy to miss something)

Emmet Solution 💡

Just type:

!
Enter fullscreen mode Exit fullscreen mode

or

html:5
Enter fullscreen mode Exit fullscreen mode

Press Tab, and Emmet instantly generates the full HTML boilerplate for you 🎉

This alone can save you hours over time.

Final Thoughts

Emmet is one of those tools that feels small at first, but once you start using it, you can’t imagine coding without it.

Don’t try to memorize every abbreviation—
👉 Just start using Emmet, and you’ll naturally learn more shortcuts over time.

The more you practice, the faster and more confident you’ll become 💪

Happy Coding 🚀💻

Top comments (0)