Emmet for HTML
If you are writing every single bracket manually, you are doing it the "hard way."
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+TabEmmet 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:
buttonOutput:
<button></button>
The Class (.) Use a dot, just like in CSS.
Input:
.box(Defaults to div)Output:
<div class="box"></div>Input:
p.textOutput:
<p class="text"></p>
The ID (#) Use a hash/pound sign.
Input:
#headerOutput:
<div id="header"></div>Input:
nav#main-navOutput:
<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>liOutput:
<div>
<ul>
<li></li>
</ul>
</div>
Multiplication (*) Need a list with 5 items? Don't copy-paste. Multiply it.
Input:
li*5Output:
<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:
!for setup..for classes.*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
