Emmet is a plugin available to mostly all known IDE. Emmet boosts HTML workflow using simple CSS like selectors and abbreviations. This post gives overview of Emmet syntax to write complex HTML code using simple emmet abbreviations.

Emmet Installation and Usage

Emmet is a plugin to install in the text editors. Install emmet plugin and restart your text editors.
Type emmet interpretable code abbreviations and press tab. Keep pressing tab to iterate over Emmet created HTML text holders
For Example, html:5>div>(header>ul>li*5>a)+(section>div#content{Main Body})+(footer>div) and press Tab will produce following code block.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div>
		<header>
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</header>
		<section>
			<div id="content">Main Body</div>
		</section>
		<footer>
			<div></div>
		</footer>
	</div>
</body>
</html>

Emmet Syntax and Examples

Template of HTML 5 document using “html:5” OR “!”

html:5 or ! gives HTML 5 starter template.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Child “>”

div>ul>li will produce


<div>
	<ul>
		<li></li>
	</ul>
</div>

Sibling “+”

header+section+footer will produce


<header></header>
<section></section>
<footer></footer>

Climb Up “^”

header+section>div>p^^footer will produce


<header></header>
<section>
	<div>
		<p></p>
	</div>
</section>
<footer></footer>

Multiplication “*”

ul>li*5 will produce


<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

Grouping “()”

div>(header>ul>li*2>a)+(section>div)+(footer>div) will produce


<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<section>
		<div></div>
	</section>
	<footer>
		<div></div>
	</footer>
</div>

ID “#” and Class “.”

div#header.heading will produce


<div id="header" class="heading"></div>

Custom Attributes “[attributeName]”

input#firstName[placeholder="First Name" required] will produce


<input type="text" id="firstName" placeholder="First Name" required="">

Item Numbering: “$”

ul>li#number$*5 will produce


<ul>
	<li id="number1"></li>
	<li id="number2"></li>
	<li id="number3"></li>
	<li id="number4"></li>
	<li id="number5"></li>
</ul>

Change Base for Item Numbering: “$@”

ul>li#number$@4*5 will produce


<ul>
	<li id="number4"></li>
	<li id="number5"></li>
	<li id="number6"></li>
	<li id="number7"></li>
	<li id="number8"></li>
</ul>

Change Direction for Item Numbering: “$@-“

ul>li#number$@-*5 will produce


<ul>
	<li id="number5"></li>
	<li id="number4"></li>
	<li id="number3"></li>
	<li id="number2"></li>
	<li id="number1"></li>
</ul>

Text “{}”

a{click here} will produce


<a href="">click here</a>

Conclusion

Emmet is very powerful and quick to learn framework for rapid HTML5 code development. This post only covers Emmet for HTML. if you are interested in CSS shortcuts for Emmet, then visit Emmet for CSS .

References

Emmet Documentation