Stop Typing < and >: Ease out Your HTML with Emmet
I still remember the first time I wrote HTML, I was in grade 6, and I’d be lying if I said I wasn’t amazed by it. Then in not more than half an hour, I got irritated with all those < , > and the back slashes in the closing tags. Getting those annoying tags right on the first time, is nothing more than a fiasco.
If you keep typing raw HTML by hand, you will eventually get repetitive strain injury or, at the very least, get very bored.
Fortunately, there is a better way. It’s called Emmet, and it’s going to change how you write code forever.
What is Emmet? ( In lay man terms)
Imagine if your phone's autocorrect was actually smart and only did exactly what you told it to do.
Emmet is a plugin for your code editor that acts like shorthand. It lets you type a short, simple abbreviation, hit a "trigger key" (usually the Tab key), and watch it instantly expand into full, perfect HTML code.
Why is this great for beginners?
Speed: You type significantly fewer characters.
Accuracy: Emmet doesn't make typos. You’ll never forget a closing
</div>tag again.Focus: Instead of worrying about typing brackets correctly, you can focus on the structure of your webpage.
How Do I Get It?
Good news: If you are using a modern code editor like Visual Studio Code (VS Code), Emmet is already built-in. You don't need to install anything.
If you are using a different editor like Sublime Text or Atom, you might need to install the Emmet plugin from their package manager.
To follow along with this guide, open a blank HTML file in your editor.
1. The Basics: Creating Elements
The simplest thing Emmet does is create tags. You don't need the brackets. Just type the name of the tag and press Tab.
| You Type + Tab | Emmet Expands To |
p | <p></p> |
h1 | <h1></h1> |
button | <button></button> |
It even knows which tags are self-closing:
| You Type + Tab | Emmet Expands To |
img | <img src="" alt=""> |
br | <br> |
2. Adding "Makeup": Classes and IDs
In HTML, we use classes and IDs to identify elements, usually for styling with CSS. Typing class="" over and over is painful.
Emmet uses the same syntax as CSS to add these quickly:
Use a dot
.to add a class.Use a hash
#to add an ID.
Adding a Class
| You Type + Tab | Emmet Expands To |
p.main-text | <p class="main-text"></p> |
div.container | <div class="container"></div> |
Adding an ID
| You Type + Tab | Emmet Expands To |
h1#title | <h1 id="title"></h1> |
div#header | <div id="header"></div> |
Combining Them
You can even combine them or add multiple classes at once!
| You Type + Tab | Emmet Expands To |
p.large.blue | <p class="large blue"></p> |
div#box.dark | <div id="box" class="dark"></div> |
3. Custom Attributes
Sometimes you need attributes other than class or ID, like the type attribute for an input field or a link for an a tag. You can use square brackets [] for these.
| You Type + Tab | Emmet Expands To |
input[type=text] | <input type="text"> |
a[href=about.html] | <a href="about.html"></a> |
4. Building Structure: Nesting and Siblings
HTML is all about boxes inside of boxes. Emmet makes creating this structure incredibly fast.
Nesting (Children)
Use the greater-than sign > to put one element inside another. Think of it as an arrow pointing to the child.
| You Type + Tab | Emmet Expands To |
div>p | <div><p></p></div> |
ul>li | <ul><li></li></ul> |
nav>ul>li | <nav><ul><li></li></ul></nav> |
Siblings (Neighbors)
Use the plus sign + to place elements next to each other on the same level.
| You Type + Tab | Emmet Expands To |
h1+p | <h1></h1> |
div+div | <div></div> |
5. The Power Move: Multiplication
This is where Emmet truly shines. If you need to create a list of five items, you don't need to type the li tag five times.
Use the asterisk * followed by a number to multiply an element.
| You Type + Tab | Emmet Expands To |
li*3 | <li></li> |
Let's combine nesting and multiplication for a real-world example:
| You Type + Tab | Emmet Expands To |
ul>li*4 | <ul> |
The Ultimate Shortcut: The HTML Skeleton
Remember how tedious it is to set up the initial <html>, <head>, and <body> structure every time you start a new file?
Emmet has a one-character shortcut for the whole thing.
In a blank HTML file, type an exclamation mark ! and press Tab.
HTML
!
Expands to:
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>
It generates the entire standard boilerplate for a modern website instantly.
Conclusion
Emmet isn't strictly necessary; you can write HTML without it. But once you try it, you'll never want to go back. It turns the chore of typing syntax into a fast, fluid process of building structure.
Start small. Next time you need a paragraph with a class, try p.myclass instead of typing it out. Soon enough, you'll be writing complex HTML structures in seconds.
