← Back to Blog Home

Cool and Easy HTML with Emmet

Developer Tools
by: Jeanette Head

Article summary

emmet-logoAmaze your friends and write HTML faster with this one cool trick!

But seriously, native HTML is repetitive and annoying to write. Emmet provides an intuitive and sleek alternative. It’s widely supported, and its simplest features can be adopted no problem on day one of using it. Plus — it feels great to use, and it just looks cool.

Emmet, formerly known as Zen Coding (developed by Sergey Chikuyonok), is a super cool shorthand tool for writing native HTML code. There are plugins in most editors (including Sublime Text, Visual Studio, Eclipse, IntelliJ, and Brackets), so there’s no reason not to use it.

Creating a Blank HTML Document

In an editor with Emmet installed, type: ! + tab (an exclamation point directly followed by the tab key). You will see the following:

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

Simple Emmet Expressions

What you can expect to see if you evaluated the expressions on the left by pressing the tab key.

p = <p></p>
div.container = <div class="container"></div>
.container = <div class="container"></div> <!--div is implied-->
span#title = <span id="title"></span>
div>h1 = <div><h1></h1></div>
a+a = <a href=""></a><ahref=""></a>
div>h1^span = <div><h1></h1><span></span></div>
h3*2 = <h3></h3><h3></h3>

Combing Emmet Expressions

ul#list>li.item*4

<ul id="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

(div.container>span.title+.content)*3

<div class="container">
    <span class="title"></span>
    <div class="content"></div>
</div>
<div class="container">
    <span class="title"></span>
    <div class="content"></div>
</div>
<div class="container">
    <span class="title"></span>
    <div class="content"></div>
</div>

 

That’s it. Emmet also provides support for custom attributes and text, as well as shortcuts for wrapping HTML around a set of elements.

Emmet is a easy-to-use, lightweight tool that reduces frustration while writing HTML, which means if you’re writing native HTML there’s no good reason not to use it. What tools are hard for you to imagine life without?

Related Posts