Emmet for HTML

Introduction
Let’s be honest. Typing HTML is slow. You type < then div then > then class then = then "... it’s exhausting. If you are writing every single bracket manually, you are doing it the "hard way."

What if I told you there is a way to type div.container and have the code write itself? Welcome to Emmet.

1. What is Emmet?

Emmet is a plugin (built into VS Code) that acts like a Translator. You speak in "Shorthand," and Emmet translates it into full "HTML."

• You type: h1 + Tab

• Emmet writes: <h1></h1>

It’s not a new language. It’s just a faster way to write the HTML you already know.

2. How to use it?

If you use VS Code, good news: You already have it! It comes pre-installed. Just open an HTML file, type a shortcut, and hit TAB (or Enter).

• Note: If it doesn't work, make sure your file is saved as .html.

3. Tags, Classes, and IDs

The Simple Tag Stop typing brackets. Just type the name.

• Input: button

• Output: <button></button>

The Class (.) Use a dot, just like in CSS.

• Input: .box (Defaults to div)

• Output: <div class="box"></div>

• Input: p.text

• Output: <p class="text"></p>

The ID (#) Use a hash/pound sign.

• Input: #header

• Output: <div id="header"></div>

• Input: nav#main-nav

• Output: <nav id="main-nav"></nav>

4. The Power Moves: Nesting & Multiplication

Nesting (>) This is where Emmet shines. You can create a parent and a child at the same time using the "Greater Than" symbol.

• Input: div>ul>li

• Output:

<div>
    <ul>
        <li></li>
    </ul>
</div>

Multiplication (*) Need a list with 5 items? Don't copy-paste. Multiply it.

• Input: li*5

• Output:

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

The Combo (Nesting + Multiplication) Let's go crazy. A list with 3 items inside a nav.

• Input: nav>ul>li*3

5. Adding Content & Attributes

Content ({}) You can even add text inside the tag using curly braces.

• Input: h1{Hello World}

• Output: <h1>Hello World</h1>

Attributes ([]) Need a specific link or type? Use square brackets.

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

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

• Input: input[type="password"]

• Output: <input type="password" name="" id="">

6. Boilerplate (!)

This is the first thing every developer does when starting a project. Instead of typing <html>, <head>, <body> manually... Just type:

• Input: !

• Action: Hit Tab.

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>

Boom. Your entire project structure is ready in 1 second.

Conclusion Emmet is optional, but so is running, you could just walk everywhere, but it would take forever. Start using these shortcuts today:

1. ! for setup.

2. . for classes.

3. * for lists.

Your fingers will thank you

Now you can generate thousands of lines of HTML in seconds. That’s great. But your website still looks like a Word document from 1995. Black text, white background. Boring.

We need to add CSS to make it beautiful. But here is the problem: How do you tell the browser to style only the button and not the heading?

In the next blog, we will learn about CSS Selectors