DEV Community

Anoop Rajoriya
Anoop Rajoriya

Posted on

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

#emmet #beginners #chaicode2026 #webdev

Ever you figure out yourself writing <div> and </div> or <ul> than <li> and so on. This slow down you for just writing repetitive code in the modern world you need to be a faster.

Building house by preparing each brick from scratch like molding it, baking it this way take years for just building a wall. Instead of that think having a machine which prepare a wall just by taking few commands. This is the what like Emmet do things.

What is Emmet

In very simple term, Emmet is a free, open source plugin for code editors which help you to write HTML, CSS code much, much faster. Thinks its like a faster shorthand language for web development in that you just need to write a short abbreviation and when press enter or tab it generated into full structured code block.

Why it useful for HTML beginners

Emmet is useful for beginners coder for several reasons:

  • Save Time & Reduce Typos : lesser you typed faster you code, Emmet handle closing tags and proper nesting.
  • Focus on structure not syntax : instead bogged into the every tag syntax focusing on what you build and let Emmet to complete repetitive work.
  • Building Good habits : it encourage to think about the logical structure of page which is crucial.
  • Boost confidence : see code generated by just short abbreviation empowering confidence and make coding feel fun.

How Emmet works inside code editors

Emmet is usually built in most popular code editors like vs-code or available as a simple extension can plugged in just one click.

Let's see the workflow Emmet:

  1. Typing Abbreviation : you typing short string of abbreviations like div in HTML or df in CSS.
  2. Trigger to Expend : in most editors it's tab key, Ctr+E, and Cmd+E commands in some setup which trigger the abbreviation expending.
  3. Expend to Code : When expending key pressed the abbreviation is converted into the calculated code structure by its engine.

Basic Emmet syntax and abbreviations

Emmet is use CSS selectors like syntax to predict what you want to create. lets dive into some fundamental abbreviations patterns to understand it batter:

Creating some elements by typing some basics abbreviation patterns

For creating elements we only need to use their names. Emmet doesn't has predefined tags so we can type any tag name which converted into HTML tag.

Example: creating div element
Type: div and
Press tab key
Expended to:

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

Example: creating h1 element
Type: h1
Press tab key
Expended to:

<h1></h1>
Enter fullscreen mode Exit fullscreen mode

Try It Your Self: Open you code editor and just typing some common elements like ul, img, input, span, and section and press tab key.

Adding classes, IDs, and attributes

Here are the real use case of Emmet. You can combine these attributes with the any element abbreviation pattern. Without any element the abbreviation pick the div element by default.

  • Class Attribute: for class abbreviation pattern using . CSS selector with following class name.
  • ID Attribute: for id abbreviation pattern using # CSS selector with following id name.
  • Other Attribute: for any other attribute abbreviation pattern using [attribute="value"] CSS selector for creating element with any attribute.

Example: Element With Class
Type: div.container
Press tab key
Expended To:

<div class="container"></div>
Enter fullscreen mode Exit fullscreen mode

Example: Element With Id
Type: header#main-header
Press tab key
Expended To:

<header id="main-header"></header>
Enter fullscreen mode Exit fullscreen mode

Example: Element With Class and ID
Type: p.lead#intro-text
Press tab key
Expended To:

<p class="lead" id="intro-text"></p>
Enter fullscreen mode Exit fullscreen mode

Example: Element With Custom attribute
Type: a[href="#contact" title="Contact Us"]
Press tab key
Expended To:

<a href="#contact" title="Contact Us"></a>
Enter fullscreen mode Exit fullscreen mode

Try It Your Self: create an button with class name btn and id name submit-btn. Then create an img element with src="Image.jpg" and alt="My Image"

Creating nested elements

The > (child) operator it allow you to nest element each other. It is useful for creating little bit complex layouts with ease. lets see some examples:

Example: li inside ul
Type: ul>li
Press tab key
Expended To:

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

You cannot nesting text by use > (child) operator alone you need something else. nesting text you need to use {} brackets to wrap the text:

Example: Text inside H1
Type: h1>{Title}
Press tab key
Expended To:

<h1>Title</h1>
Enter fullscreen mode Exit fullscreen mode

There are one more operator are used called "+" (sibling) operator which is not used for nesting, it used for create multiple elements in same level. Like two element site side by side. Lets see example:

Example: span with logo id, button with Signup text inside header
Type: header>span#logo+button>{Signup}
Press tab key
Expended To:

<header>
  <span id="logo"></span>
  <button>Signup</button>
</header>
Enter fullscreen mode Exit fullscreen mode

Try It Your Self: create a div element has a class card with h1 and p elements both have some title and description text inside them.

Repeating elements using multiplication

Some times you need to create multiple elements like list items in unorder list or multiple card components in grid component. Than here you can use * with number N represent how many items you want. lets see examples:

Example: 5 li inside ul
Type: ul>li*5
Press tab key
Expended To:

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

Example: 3 a inside nav
Type: nav>a*3>{links}
Press tab key
Expended To:

<nav>
  <a href="">links</a>
  <a href="">links</a>
  <a href="">links</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

There are one more thins you often see many coder do. when they create multiple item they use $ symbols in Ids, Class or inside other attributes and some times inside elements as a part of text. Purpose of using it is to create indexes in sequences. or some times it used with @- to reverse the order. Lets see examples:

Example: 3 a with link counts inside nav
Type: nav>a*3>{links$}
Press tab key
Expended To:

<nav>
  <a href="">links1</a>
  <a href="">links2</a>
  <a href="">links3</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

Example: 4 li with class items and text index with reverse order inside ul
Type: ul>li.items*4>{list$@-}
Press tab key
Expended To:

<ul>
  <li class="items">list4</li>
  <li class="items">list3</li>
  <li class="items">list2</li>
  <li class="items">list1</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Try It Your Self: create a nav with ul containing 4 list items li has class item each item has its own a element with text link-index.

Generating full HTML boilerplate with Emmet

One of the most usable thing is to create a full HTML boiler plate code. That is the starting code every page needed. You need to use ! symbol or sometimes html:5 for older version editors. Lets see final example:

Example: HTML boiler plate code
Type: ! or html:5
Press tab key
Expended To:

<!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

Emmet is optional tool to learn but if you learned it it change the whole level of speed and understanding of writing HTML and CSS code. It might takes practice to write abbreviation but once you do it you'll wonder how ever you coded without it. Once you get comfortable you naturally discover more advanced Emmets.

I use Emmet official documentation or cheat sheet for learning it you can also read it if want to know more about Emmet concepts.

Top comments (0)