Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Writing HTML tags, brackets and attributes, again and again feels boring and slow, you code like 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>
you have write boiler plate code again and again when you create new html file, it feel boring to write all this.
Imagine, if you get shortcut to write this code in just typing ! and press tab , it feels like a magic.
What is Emmit ?
It is a Shortcut language which helps us to write HTML code faster. It is pre-installed in most of modern code editor like VS code. It turns small abbrevation into magical HTML code.
Why Emmit is useful ?
write HTML faster
reduce typing error
build structure easily
focus on learning layout, not on typing
I have some where on internet : Emmit is autocomplete on steroids for HTML.
How Emmet works inside code editors
Emmit is pre-installed on most of the code editor like VS code, Sublime text, Atom, etc.
you open an HTML file.
Type an Emmet abbreviation.
Press the
tabkey.you will see that abbreviation turns into HTML code.
Example:
h1 ---> press tab ---> <h1>
Basic Emmet syntax and abbreviations
1. Creating HTML elements
Emmet:
h1
Output:
<h1></h1>
Emmet:
p
Output:
<p></p>
2. Creating elements with content
Emmet:
h1{Welocme to India}
Output:
<h1>Welocme to India</h1>
Adding classes, IDs, and attributes
3. Adding a class
Emmet:
div.card
Output:
<div class="card"></div>
4. Adding an ID
Emmet:
section#main
Output:
<section id="main"></section>
5. Adding attributes
Emmet:
img[src="logo.png" alt="My Logo"]
Output:
<img src="logo.png" alt="My Logo" />
Creating nested elements
This is where Emmet becomes powerful.
6. Nesting using >
Emmet:
div>p
Output:
<div>
<p></p>
</div>
Example: Card structure
Emmet:
div.card>h2{Title}+p{Description}
Output:
<div class="card">
<h2>Title</h2>
<p>Description</p>
</div>
Creating sibling elements
Use + for same-level elements.
Emmet:
h1+p+button
Output:
<h1></h1>
<p></p>
<button></button>
Repeating elements using multiplication
This is one of the most useful features.
7. Repeat using *
Emmet:
li*3
Output:
<li></li>
<li></li>
<li></li>
Example: List of items
Emmet:
ul>li*5
Output:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
8. Adding numbering automatically
Emmet:
li.item$*3
Output:
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
9. Adding numbering automatically with text
Emmet:
li{Item $}*3
Output:
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
Generating full HTML boilerplate code
This is the most famous Emmet shortcut.
Emmet:
!
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>
Final Thoughts :
With little practice, Emmet is not just make you faster, it help you write better code and minor error.
Just remember some of the most uses Emmits like div with class, div with id, List inside UL and etc.