Blog.

Why should you use Emmet in your code editor?

Cover Image for Why should you use Emmet in your code editor?
Dario Chiapperini
Dario Chiapperini

Why should you use Emmet in your code editor?

First: What is 'Emmet'?

Emmet is a free add-on for your text editor that allows you to type shortcuts that are then expanded into full pieces of code.

With Emmet you can quickly create an HTML boilerplate. In an HTML file, simply type ! and you’ll see that Emmet has popped up as a suggestion. Now hit Enter. There you have it, a basic, blank HTML web page ready to go.

let's get started with some examples:

  • !
<!doctype html>
<html lang="en">
	<head>
		<title>Demo</title>
	</head>
	<body>
	</body>
</html>
  • ul>li*5
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • nav>ul>li
<nav>
	<ul>
		<li></li>
	</ul>
</nav>
  • p[title="Hello world"]
<p title="Hello world"></p>
  • td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
  • [a='value1' b="value2"]
<div a="value1" b="value2"></div>
  • a
<a href="">Click me</a>
  • p>{Click }+a{here}+
<p>
	Click <a href="">here</a> to continue
</p>
  • .class
<div class="class"></div>
  • em>.class
<em>
	<span class="class"></span>
</em>
  • ul>.class
<ul>
	<li class="class"></li>
</ul>
  • table>.row>.col
<table>
	<tr class="row">
		<td class="col"></td>
	</tr>
</table>
  • div+div>p>span+em^bq
<div></div>
<div>
	<p>
		<span></span>
		<em></em>
	</p>
	<blockquote></blockquote>
</div>

// div>(header>ul>li*2>a)+footer>p

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

Emmet Is Awesome!

With Emmet, you can create a really complex HTML structure with one line. It’s really awesome. And, it also works with CSS.

If you would like to learn more, visit the official site: https://emmet.io/