HTML Emmet shortcuts

sudhanshu shekharsudhanshu shekhar
6 min read

Table of contents

Here’s a list of commonly used HTML Emmet shortcuts to speed up your coding workflow:

1. Basic Tags

ShortcutResult
!Boilerplate HTML structure
html:5HTML5 boilerplate
div<div></div>
h1<h1></h1>
p<p></p>
a<a href=""></a>
img<img src="" alt="">
br<br>

2. Nesting Elements

ShortcutResult
div>p<div><p></p></div>
div>h1+p<div><h1></h1><p></p></div>
div>ul>li*3<div><ul><li></li><li></li><li></li></ul></div>

3. ID and Class

ShortcutResult
#header<div id="header"></div>
.container<div class="container"></div>
section#main.content<section id="main" class="content"></section>

4. Text and Attributes

ShortcutResult
a[href="https://example.com"]<a href="https://example.com"></a>
input[type="text"]<input type="text">
img[src="image.jpg"]<img src="image.jpg" alt="">

5. Multiplication and Numbering

ShortcutResult
ul>li*55 <li> elements inside <ul>
h1{Hello World}<h1>Hello World</h1>
p{Item $}*3<p>Item 1</p><p>Item 2</p><p>Item 3</p>

6. Grouping

ShortcutResult
(header>nav>ul>li*3)+footerHeader with nested nav/ul/li plus a footer

7. Special Elements

ShortcutResult
link:css<link rel="stylesheet" href="style.css">
script:src<script src="script.js"></script>
meta:viewport<meta name="viewport" content="width=device-width, initial-scale=1.0">

Pro Tip:

  • Use Tab key to expand Emmet abbreviations.

  • Combine elements creatively for faster development.

8. List of Common Elements

ShortcutResult
article<article></article>
aside<aside></aside>
blockquote<blockquote></blockquote>
canvas<canvas></canvas>
figure<figure></figure>
figcaption<figcaption></figcaption>
footer<footer></footer>
header<header></header>
main<main></main>
nav<nav></nav>
section<section></section>
summary<summary></summary>
details<details></details>

9. Forms and Inputs

ShortcutResult
form<form action="" method="post"></form>
input<input type="text">
input:checkbox<input type="checkbox">
input:radio<input type="radio">
input:email<input type="email">
input:password<input type="password">
input:submit<input type="submit" value="">
input:hidden<input type="hidden">
textarea<textarea name="" id="" cols="30" rows="10"></textarea>
select>option*3<select><option></option><option></option><option></option></select>

10. Media Elements

ShortcutResult
audio<audio controls></audio>
video<video controls></video>
source<source src="" type="">
iframe<iframe src="" frameborder="0"></iframe>
img[src="image.jpg" alt="Sample"]<img src="image.jpg" alt="Sample">

11. Table Structure

ShortcutResult
table>tr*3>td*3Creates a 3x3 table
thead>tr>th*3<thead><tr><th></th><th></th><th></th></tr></thead>
tbody>tr*2>td*3<tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody>

12. Text Formatting Tags

ShortcutResult
b<b></b>
i<i></i>
u<u></u>
strong<strong></strong>
em<em></em>
mark<mark></mark>
del<del></del>

13. Semantic Tags

ShortcutResult
article<article></article>
aside<aside></aside>
figure<figure></figure>
figcaption<figcaption></figcaption>

14. Utility Shortcuts

ShortcutResult
.class1.class2<div class="class1 class2"></div>
#id1#id2<div id="id2"></div> (Only the last ID is considered)
div#container>.row>.col*3<div id="container"><div class="row"><div class="col"></div><div class="col"></div><div class="col"></div></div></div>
div>(header>h1{Title})+main>p{Welcome!}+footerFull layout with header, main, and footer

15. Advanced Tricks

ShortcutResult
div{Hello $}*5Creates 5 divs with text numbering 1 to 5
ul>li.item$@3*5Numbering starts from 3 like <li class="item3"></li>
ul>li.item${Item $}*5List with auto-numbered text inside

16. List with Attributes

ShortcutResult
a[href="https://google.com" target="_blank"]<a href="https://google.com" target="_blank"></a>
img[src="image.jpg" title="Sample Image"]<img src="image.jpg" title="Sample Image" alt="">
input[required]<input type="text" required>
button[disabled]<button disabled></button>

17. Data Attributes

ShortcutResult
div[data-role="dialog"]<div data-role="dialog"></div>
span[data-id="123"]<span data-id="123"></span>

18. Comments and Metadata

ShortcutResult
<!-- comment --><!-- comment -->
meta:desc<meta name="description" content="">
meta:keywords<meta name="keywords" content="">
meta:author<meta name="author" content="">

19. List of Common Components

ShortcutResult
header+main+footerFull layout structure
div.container>header+main+footer<div class="container"><header></header><main></main><footer></footer></div>
section>article*3>h2{Title $}+p{Content $}Creates 3 articles with title and content
ShortcutResult
a.icon-home<a class="icon-home"></a>
i.icon-facebook<i class="icon-facebook"></i>

21. Flexible Text Formatting

ShortcutResult
p{This is a paragraph}<p>This is a paragraph</p>
h1{Heading 1}<h1>Heading 1</h1>
span{Special Text}<span>Special Text</span>

22. Auto-increment Attributes

ShortcutResult
ul>li.item$*5<li class="item1"></li> ... <li class="item5"></li>
img[src="img$.jpg"]*3<img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg">

23. Table with Advanced Structure

ShortcutResult
table>thead>tr>th*3Table header with 3 columns
tbody>tr*3>td*3Table body with 3 rows and 3 columns
table>(thead>tr>th{Title $}*3)+(tbody>tr*3>td{Data $}*3)Full structured table

24. Complex Layouts in One Go

ShortcutResult
div#app>header>nav>ul>li*4>a{Link $}Creates navigation links inside a header
section.cards>article.card*4>h3{Card $}+p{Details for card $}4 Card layout structure

25. Special Characters & Symbols

ShortcutResult
&lt;<
&gt;>
&amp;&
&copy;©
&reg;®
1
Subscribe to my newsletter

Read articles from sudhanshu shekhar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

HTML5HTML tags HTML CSS JAVASCRIPT

Written by

sudhanshu shekhar
sudhanshu shekhar