Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
Discover Emmet: Enhancing Your HTML Coding Speed
Hi, I’m Abdul Samad. A web development learner and tech enthusiast. I write about what I learn, share practical coding tips, and publish in-depth blogs on programming and modern web development.
Check out my full collection of blogs on Hashnode: https://abdulsamad30.hashnode.dev/
Connect with me on X for quick updates and insights: @abdul_sama60108
1. Writing HTML Without Emmet
See how slow and tedious it feels to write HTML manually without Emmet.
Especially when creating multiple elements or nested structures :
2. What Emmet Is (Simple Explanation)
Emmet is like a shortcut language for HTML and CSS.
It lets you type short abbreviations that expand into full code snippets.
Example:
div.container>h1+pexpands into the full HTML structure above.
Output of Emmet
<div class="container">
<h1></h1>
<p></p>
</div>
abbreviation → expanded HTML
3. Why Emmet is Useful for Beginners
Speeds up writing repetitive HTML.
Reduces typos.
Helps you focus on structure rather than typing every tag.
4. How Emmet Works Inside Code Editors
Works in editors like VS Code, Sublime Text, Atom.
You type an abbreviation and press Tab (or other shortcut) to expand it.
It’s editor-agnostic, so the principle is the same everywhere.
Diagram Idea:
- Editor interface with
div.container>h1+ptyped → Tab → expanded HTML visible.
5. Basic Emmet Syntax and Abbreviations
| Symbol | Meaning | Example | Output |
> | Child | ul>li | <ul><li></li></ul> |
+ | Sibling | h1+p | <h1></h1><p></p> |
. | Class | div.box | <div class="box"></div> |
# | ID | div#main | <div id="main"></div> |
* | Repeat | li*3 | <li></li><li></li><li></li> |
[] | Attributes | a[href="#"] | <a href="#"></a> |
6. Some Useful Emmets
6.1 Creating HTML Elements
Example:
p→<p></p>Add class:
p.text→<p class="text"></p>Add ID:
p#intro→<p id="intro"></p>
6.2 Nested Elements
div>h1+p→ expands to:
<div>
<h1></h1>
<p></p>
</div>
- You can combine:
section>div.container>h1+p→ creates a more complex structure in one line.
6.3 Repeating Elements
li.item*4→ expands to:
<liclass="item"></li>
<liclass="item"></li>
<liclass="item"></li>
<liclass="item"></li>
- Useful for lists, grids, or repeated patterns.
6.4. Adding Attributes
a[href="<https://example.com>"]
<a href="<https://example.com>"></a>
Combine with classes : a.button[href="#"]
<a href="#" class="button"></a>
6.5 Generating Full HTML Boilerplate
- Shortcut:
!→ expands to:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Saves time creating a full page setup.
