{ Emmet. }

Objectives:

By the end of this chapter, you should be able to:

Introduction and Installation

Sometimes typing all of these HTML tags is quite a pain. There are a lot of characters to type, some of them are awkward to type (especially the opening and closing brackets), and you have to remember to add closing tags as well!

Thankfully, there is a nice tool to help us out called Emmet, which makes writing HTML a breeze. We will be using Sublime Text 3 as our text editor so to get started, follow these steps:

  1. Install Sublime Text 3. You can find it here
  2. Open Sublime Text 3 and then follow the instructions here to Install Package Control
  3. Open your Package Manager in Sublime (command + shift + p), type "install package," and press enter. Then wait a second for a list to pop up and search for "Emmet." After the installation, restart Sublime. Then, create and save a file with a .html extension.

In your .html file - type in ! and press tab and this should appear:

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

</body>
</html>

Don't worry about trying to remember all of this HTML boilerplate; Emmet's got you covered!

Emmet Shortcuts

One of the nice things you can do with emmet is write HTML quickly! Get started by typing h1 and pressing tab. You should see <h1></h1> with your cursor in the middle!

If you want to nest tags inside of others you can use the > symbol. For example, typing div>span and pressing tab should produce <div><span></span></div>. Once again, your cursor should show up in the middle.

If you want to add text inside a tag you can use the {} braces and then press tab. Emmet converts h1{Hello World} to <h1>Hello World</h1>.

If you want to create multiple tags you can use the * operator.

p>div{inner}*2 produces:

<p>
  <div>inner</div>
  <div>inner</div>
</p> 

You can also create sibling elements (remember, these are elements with the same direct parent) using the + operator.

div+p>span produces

<div></div>
<p>
  <span></span>
</p>

What about attributes? Emmet's got you covered there as well! You can pass in an attribute name and value between square brackets.

div[id="hello"]{Hi everybody!}>span{Yo}*3 produces

<div id="hello">Hi everybody!
  <span>Yo</span>
  <span>Yo</span>
  <span>Yo</span>
</div>

There's a lot more that Emmet can do for you as well. You can always check out the documentation for all of the features, but there's also an Emmet cheat sheet which is a great reference when you're first trying to pick up these shortcuts.

Opening in browser

Another nice Sublime trick when working with HTML files is to right click anywhere in the .html file and select "Open in Browser". This will open your page right in a browser tab! In order for this to work, you need to make sure your file is saved with the .html extension.

Emmet Exercises

Write the one-line Emmet commands to produce the following HTML:

<h1></h1>
<div>
    <p>
        <section>
            <h1>Nice!</h1>
        </section>
    </p>
</div>
<ul>outside
    <li>inside</li>
    <li>inside</li>
    <li>inside</li>
    <li>inside</li>
</ul>
<p>sibling 1</p>
<div>sibling 2</div>
<p>parent
    <div>child
        <div>grandchild</div>
    </div>
</p>

When you're ready, move on to Basic Tags

Continue

Get 100+ hours of free content, tutorials, and screencasts

Send us your email, and we'll give you a confirmation code to unlock all of our materials. No spam, we promise.