Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
1. What Emmet is (very simple terms)
Emmet is a shortcut tool that helps you write HTML faster.
Instead of typing full HTML tags again and again, you type short codes, press Tab, and Emmet expands them into full HTML.
2. Why Emmet is useful for HTML beginners
For beginners, Emmet is useful because:
You type less
You make fewer mistakes
You learn HTML structure naturally
It saves time and effort
3. How Emmet works inside code editors
Emmet is built into most modern editors like:
VS Code
Sublime Text
Atom
How it works:
You type an Emmet abbreviation
You press Tab (or Enter)
Editor converts it into proper HTML
4. Basic Emmet syntax and abbreviations
Some very basic ones:
p→ paragraphh1→ headingdiv→ division
Example:
p
Press Tab →
<p></p>
5. Creating HTML elements using Emmet
You can create elements instantly.
Example:
h1
Press Tab →
<h1></h1>
Example:
div
Press Tab →
<div></div>
6. Adding classes, IDs, and attributes
Class:
p.text
⬇️
<p class="text"></p>
ID:
div#box
⬇️
<div id="box"></div>
Attributes:
img[src="image.jpg"]
⬇️
<img src="image.jpg" />
7. Creating nested elements
You can create elements inside other elements using >.
Example:
div>p
⬇️
<div>
<p></p>
</div>
This helps you build structure very quickly.
8. Repeating elements using multiplication
You can repeat elements using *.
Example:
li*3
⬇️
<li></li>
<li></li>
<li></li>
Very useful for lists.
Combined example:
ul>li*3
⬇️
<ul>
<li></li>
<li></li>
<li></li>
</ul>
9. Generating full HTML boilerplate with Emmet
This is the favorite one for everyone 😄
Type:
!
Press Tab
Boom 💥 — full HTML structure appears:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>