How I Stopped Wasting Time Typing HTML Tags
Introduction
I spent three years of college typing <div class="container"></div> by hand like an idiot. My professor mentioned "Emmet" once in passing, I nodded like I knew what he meant, and then forgot about it.
Then one day I watched a classmate build an entire navigation bar in about 10 seconds. No copy-pasting. No template. Just... typing weird abbreviations and hitting Tab.
I asked him what kind of black magic that was. He looked at me like I was insane. "Dude, that's just Emmet. It's built into VS Code."
That was my "oh no" moment. Turns out I'd been wasting hours every week doing something a single keystroke could handle.
What is Emmet?
Emmet is basically a cheat code for writing HTML. Instead of typing <div></div> like a caveman, you just type div and hit tab. Boom, done.
It's already inside VS Code (and most other code editors), so you don't need to install anything. Just open a new file and it works.
The “Aha” Moment
Try this right now. Open VS Code, type an exclamation mark: !
Now Press Tab.
One character just gave you this:
<!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>
That's it. No more googling "html boilerplate" or copy-pasting from old projects.
Building Stuff Step by Step
Type any HTML word without the brackets:
h1
Tab = <h1></h1>
button
Tab = <button></button>
2. Nesting (Putting Stuff Inside Stuff)
Use > to show "inside of": div>ul>li
Becomes:
<div>
<ul>
<li></li>
</ul>
</div>
Think of > as an arrow pointing inside.
3. Making Multiple Things
Use * when you need more than one:
ul>li*3
Press Tab
<ul>
<li></li>
<li></li>
<li></li>
</ul>
4. Siblings (Things Next to Each Other)
Use + for "and then this": h1+h2+p It becomes:
<h1></h1>
<h2></h2>
<p></p>
5. Classes and IDs
You already know CSS selectors? You already know Emmet:
div.container
Tab
`<div class="container"></div>`
#header
<div id="header"></div>
Emmet guesses you want a div if you don't say otherwise
Multiple classes: button.btn.btn-primary.large
Becomes:
<button class="btn btn-primary large"></button>
6. Adding Text
Use curly braces {} for content:
p{Hello world}
Tab
<p>Hello World</p>
7. Climbing Back Up
Sometimes you nest too deep. Use ^ to go back up a level:
div>p>strong{Important}^p{Not in the strong tag}
Becomes:
<div>
<p><strong>Important</strong></p>
<p>Not in the strong tag</p>
</div>
Without the ^, that second p would be stuck inside the strong tag.
8. Grouping
Use () to group stuff together:
(table>tr>td)+ul>li*2
<table>
<tr>
<td></td>
</tr>
</table>
<ui>
<li></li>
<li></li>
</ui>
This makes a table, then completely separately makes a list.
Some Useful Tricks
Fake Text (Lorem Ipsum)
Don't go to a website to copy fake text. Just type:
lorem10
Replace 10 with however many words you want.
p*3>lorem5
Makes 3 paragraphs with 5 words each.
Wrapping Existing Code
This is the one I use daily.
You know when you write a bunch of HTML and realize it all needs to be wrapped in a container div?
Instead of manually typing the opening tag at the top and hunting for where to put the closing tag...
Highlight the code
Open Command Palette (
Ctrl+Shift+PorCmd+Shift+P)Type: "Wrap with Abbreviation"
Type what you want (like
div.container)Hit enter Your code is now wrapped. No screwing up the closing tag placement.
Fixing Lists from Hell
Ever copy a list from a Word doc or PDF and get this mess?
* item one
* item two
- item three
Select all that garbage, use "Wrap with Abbreviation," and type: ul>li*|t
The |t removes the bullet points (*, -, 1.) automatically.
You get clean <li> tags with just the text.
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
</ul>
The Magic Trick
This one's advanced but worth it. Say you have:
About
Blog
Contact
Select those three lines, wrap with abbreviation, type: ul>li[id=$#]>a[href=/$#]{$#}
You just made:
<ul>
<li id="About"><a href="/About">About</a></li>
<li id="Blog"><a href="/Blog">Blog</a></li>
<li id="Contact"><a href="/Contact">Contact</a></li>
</ul>
The $# grabs whatever text is on that line and puts it everywhere you need it. IDs, links, and display text all at once.
That's It
Start every project with !. Stop typing closing tags. Use "Wrap with Abbreviation" when you're lazy.
My professor was right. This stuff is magic.
Cheat sheet when you forget:
>= inside/child+= next to/sibling*= make X copies^= climb back up#= id.= class{}= text content[]= attributes!= full HTML pagelorem= fake text
