Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Topics to cover in this blog.
What Emmet is (in very simple terms)?
Why Emmet is useful for HTML beginners?
How Emmet works inside code editors?
Basic Emmet syntax and abbreviations
Creating HTML elements using Emmet
Adding classes, IDs, and attributes
Creating nested elements
Repeating elements using multiplication
Generating full HTML boilerplate with Emmet
What Emmet is?
Emmet is a shortcut language for HTML. Instead of writing full HTML code, you write a short abbreviation, press Tab, and your editor expands it into proper HTML.
Where can you use Emmet and how emment works inside code editors?
Emmet works inside most modern code editors:
VS Code
Sublime Text
Atom
You don’t need a specific editor to learn Emmet. The concepts stay the same everywhere.How it works:
You type an Emmet abbreviation
Press Tab
The editor converts it into proper HTML code
That’s it. No magic setup needed.
Basic Emmet syntax and abbreviations
Emmet uses symbols that represent HTML structure
Symbol Meaning
`>` Child element
`+` Sibling element
`*` Repeat element
`.` Class
`#` ID
`[]` Attributes
Creating HTML elements using Emmet
To create an HTML element, just type the tag name.
p
Enter Tab, if become
<p> </p>
Adding classes, IDs, and attributes
Adding a class
div.container
Output:
<div class="container"></div>
Adding an ID
section#about
Output:
<section id="about"></section>
Creating nested elements
To create elements inside another element, use >
div>p
Output:
<div>
<p></p>
</div>
Repeating elements using multiplication
If you want multiple same elements, use *
li*3
Output:
<li></li>
<li></li>
<li></li>
With nesting:
ul>li*3
Output:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Generating full HTML boilerplate with Emmet
Just type:
!
Press Tab
<!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>
Conclusion
If you are learning HTML, Emmet is not optional it’s a superpower. Start small, practice basic abbreviations, and slowly you’ll write HTML faster than you ever imagined.
