Emmet for HTML: A Beginner’s Guide to Writing Faster Markup
What is Emmet ?
Emmet is a toolkit for web developers that substantially speeds up writing of HTML and CSS . It's a plugin/extension available in most modern code editors (VS Code, Sublime Text, Atom, etc.)
Emmet is like “code snippets on steroids” for HTML & CSS. It provides Abbreviation Expansion, you write short abbreviations that expand into full HTML/CSS code.
How Emmet Works ?
Basically you write an emmet abbreviation & then press TAB to expand the abbreviation into full length HTML or CSS
Basic Example of Emmet Abbreviation
! + TAB --> Expands into html5 boilerplate code as mentioned below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
Emmet Syntax
Child Elements: >
nav>ul>li + TAB --> Expands into below code
<nav>
<ul>
<li></li>
</ul>
</nav>
Sibling: +
div+p+bq + TAB --> Expands into below code
<div></div>
<p></p>
<blockquote></blockquote>
Multiplication: *
ul>li*5 + TAB --> Expands into below code
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ID and CLASS attributes
#header + TAB --> Expands into below code
<div id="header"></div>
.title + TAB --> Expands into below code
<div class="title"></div>
form#search.wide + TAB --> Expands into below code
<form id="search" class="wide"></form>
p.class1.class2.class3 + TAB --> Expands into below code
<p class="class1 class2 class3"></p>
Climb-up: ^
div+div>p>span+em^bq + TAB --> Expands into below code
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq + TAB --> Expands into below code
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Grouping: ()
div>(header>ul>li*2>a)+footer>p + TAB --> Expands into below code
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
(div>dl>(dt+dd)*3)+footer>p + TAB --> Expands into below code
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
Custom attributes: []
p[title="Hello world"] + TAB --> Expands into below code
<p title="Hello world"></p>
td[rowspan=2 colspan=3 title] + TAB --> Expands into below code
<td rowspan="2" colspan="3" title=""></td>
[a='value1' b="value2"] + TAB --> Expands into below code
<div a="value1" b="value2"></div>
Text: {}
a{Click me} TAB --> Expands into below code
<a href="">Click me</a>
p>{Click }+a{here}+{ to continue} + TAB --> Expands into below code
<p>Click <a href="">here</a> to continue</p>
Emmet For CSS
Emmet abbreviations are available for CSS as well but rather than memorising all of the CSS abbreviations you should focus on the ones listed above that will provide the maximum time spent on learning to time saved on writing CSS ratio.
More details on CSS abbreviations for Emmet can found on official documentation
