Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
When we’re new to HTML, a lot of time goes into typing boilerplate:
<div class="container">
<p>Hello</p>
</div>
we type angle brackets, closing tags, indentation again and again.
This is normal, but also unnecessary.
This is where Emmet saves a lot of time.
What Emmet is
Emmet is a shortcut language for writing HTML faster.
we have to type a short abbreviation(Some starting words etc.), press Tab, and the editor expands it into full HTML.
“Shorthand → Full HTML”
we don’t replace HTML.
we just generate it faster.
Why Emmet is useful for HTML beginners
For beginners, Emmet helps in two big ways:
-Less typing, less frustration
-Better understanding of HTML structure
Because Emmet forces you to think in structure, not syntax.
It helps us focus on:
parent vs child
nesting
repetition
How Emmet works inside code editors
Emmet is built into most modern editors, especially VS Code.
The flow is simple:
Type an Emmet abbreviation
Press
Tab(or Enter)HTML appears instantly
We don’t install anything extra in most cases.
Basic Emmet syntax and abbreviations
Emmet uses symbols we already understand:
div → element
\> → child
+ → sibling
. → class
# → id
* → repeat
Creating HTML elements using Emmet
I’ve used EMMET, and it’s awesome you can also try it:
Instead of writing:
<p></p>
You can type:
p
and press Tab
Result:
<p></p>
Simple, but powerful when repeated hundreds of times.
Adding classes, IDs, and attributes
Class
div.container
expands to:
<div class="container"></div>
ID
section#hero
expands to:
<section id="hero"></section>
Attributes
img[src="image.png" alt="photo"]
expands to:
<img src="image.png" alt="photo">
You’re describing what you want, not typing everything.
Creating nested elements
Nesting is where Emmet really shines.
div>p
expands to:
<div>
<p></p>
</div>
One More example:
ul>li
expands to:
<ul>
<li></li>
</ul>
Repeating elements using multiplication
Need multiple elements? Use below syntax, to do this name the element, then ‘*’ and then number of times you want to repeat.
ul>li*3
This Means create a parent <ul> and an <li> inside ul three times.
expands to:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
This is very usefull in projects.Imagine how much time it will save for us!
Generating full HTML boilerplate with Emmet
For genrating boiler plate type ! and then press tab.
Type:
!
and press Tab
expands to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Thank you! for read you can watch this tutorial for more understanding👇.
