Speed Coding: A Beginner’s Guide to Emmet

The Problem: HTML is Exhausting

If you have started typing out HTML manually, you have probably realized one thing: typing angle brackets < and > over and over again is tedious. It feels slow. You spend more time worrying about closing your tags than you do thinking about the structure of your page.

Emmet is the solution to that pain.

What is Emmet?

Think of Emmet as "text expansion" for code. It’s a plugin (built right into VS Code) that lets you type a short abbreviation and hit Tab to expand it into full HTML code.

It turns web development from a typing exercise into a magic trick.

How to Use It

The workflow is simple:

1. Open your code editor (like VS Code).

2. Type the shortcut.

3. Press Tab (or Enter).

Let's look at the patterns you will use every single day.

Basic Elements

You don't need to type the brackets. Just type the tag name.

• You type: h1

• You get: <h1></h1>

• You type: button

• You get: <button></button>

Classes and IDs

Emmet borrows syntax from CSS. If you want a class, use a dot .. If you want an ID, use a hash #.

• The Class Shortcut:

  • Type: .container

  • Get: <div class="container"></div>

  • (Note: If you don't specify a tag, Emmet assumes you mean a div)

• The ID Shortcut:

  • Type: p#intro

  • Get: <p id="intro"></p>

Adding Attributes

Sometimes you need to add links or image sources immediately. Use square brackets [].

• Type: a[href="google.com"]

• Get: <a href="google.com"></a>

Nesting (Putting things inside things)

This is where Emmet shines. Instead of opening a tag, typing inside, and closing it, use the > symbol (child combinator) to define the hierarchy in one go.

• Type: nav>ul>li

• Get:

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

Multiplication (Repeated Elements)

Writing lists is the most boring part of HTML. Instead of copy-pasting lines, just use the * symbol to multiply.

• Type: ul>li*5

• Get: A generic list with 5 list items inside it instantly.

The "Boilerplate" Lifesaver

When you start a new HTML file, you need the standard skeleton (the html, head, body, and meta tags). Do not memorize this.

• Type: !

• Get:

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

Summary

Emmet is entirely optional. You can type everything out by hand if you really want to. But using Emmet allows you to focus on what you are building rather than how to type it. It removes the friction between your brain and the screen.

Try it right now: Open VS Code, create a file called index.html, type ! and hit Tab. Welcome to the fast lane!