Turning Learners into Developers
What is Emmet in VS Code?
Emmet is a built-in toolkit in VS Code that lets you write short abbreviations and instantly expand them into full HTML code. Instead of typing long tags repeatedly, Emmet helps you generate clean markup in seconds.
- Basic HTML Structure
|
Emmet Code |
Output Example |
|---|---|
|
! |
Generates full HTML boilerplate |
|
html:5 |
HTML5 basic structure |
|
head>title |
<head><title></title></head> |
- Div, Class & ID Shortcuts
|
Emmet Code |
Output Example |
|---|---|
|
div |
<div></div> |
|
div.container |
<div class="container"></div> |
|
div#box |
<div id="box"></div> |
|
section.hero |
<section class="hero"></section> |
- Text & Headings
|
Emmet Code |
Output Example |
|---|---|
|
p |
<p></p> |
|
p{Hello World} |
<p>Hello World</p> |
|
h1{Welcome} |
<h1>Welcome</h1> |
|
h2.title |
<h2 class="title"></h2> |
- Links & Images
|
Emmet Code |
Output Example |
|---|---|
|
a |
<a href=""></a> |
|
a[href="#"] |
<a href="#"></a> |
|
a[target="_blank"] |
<a target="_blank"></a> |
|
img |
<img src="" alt=""> |
|
img[src="img.jpg"] |
<img src="img.jpg" alt=""> |
- Lists (UL & OL)
|
Emmet Code |
Output Example |
|---|---|
|
ul |
<ul></ul> |
|
ul>li |
<ul><li></li></ul> |
|
ul>li*5 |
<ul><li></li> ×5</ul> |
|
ol>li*3 |
<ol><li></li> ×3</ol> |
- Nesting & Sibling Elements
|
Emmet Code |
Output Example |
|---|---|
|
div>p |
<div><p></p></div> |
|
div+p |
<div></div><p></p> |
|
div>ul>li*3 |
Nested list structure |
|
header>nav>ul>li*4 |
Website navigation layout |
- Forms & Inputs
|
Emmet Code |
Output Example |
|---|---|
|
form |
<form></form> |
|
form>input |
<form><input></form> |
|
input:text |
<input type="text"> |
|
input:email |
<input type="email"> |
|
input:password |
<input type="password"> |
|
input:submit |
<input type="submit"> |
|
button{Submit} |
<button>Submit</button> |
- Tables
|
Emmet Code |
Output Example |
|---|---|
|
table |
<table></table> |
|
table>tr>td*3 |
Table row with 3 columns |
|
table>tr*3>td*4 |
3 rows, 4 columns |
- Meta, CSS & Script Tags
|
Emmet Code |
Output Example |
|---|---|
|
link:css |
<link rel="stylesheet" href="style.css"> |
|
script:src |
<script src=""></script> |
|
meta:vp |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
- Advanced Emmet Layout Examples
|
Emmet Code |
Output Example |
|---|---|
|
div.card>img+p |
Card UI layout |
|
section>h2+p*2 |
Content section |
|
div.row>div.col*3 |
Grid system |
|
main>section*3 |
Website structure |
|
footer>p{© 2025 CodeKilla} |
Footer section |
“The Code Killa website is an excellent learning resource.Sir teaches every topic with such depth and clarity that it is rare to find this level of explanation. While studying the Code Killa website, I experienced a completely different level of learning.Sir teaches with complete dedication and genuine passion. Every concept on the Code Killa website is explained in a clear, structured, and practical manner. His hard work and continuous support for students make learning easier and more meaningful. This platform truly helps students gain clarity and confidence about their career path.”Thanku, sir, for creating such a valuable learning resource.”