Mindo's Blog
Improve your HTML workflow using Emmet

Improve your HTML workflow using Emmet

Joseph Mindo's photo
Joseph Mindo
·

3 min read

Emmet from the official website is defined as a plugin for many popular text editors which greatly improves HTML & CSS workflow. Consistent practice using emmet can greatly improve your productivity. An example is creating a list in HTML, the default way is to type out everything line by line like 

<ul class='list'>
    <li>List-Item-1</li>
    <li>List-Item-2</li>
    <li>List-Item-3</li>
</ul>

But using emmet ul.list>li{List-Item-$}*3 is enough to give the same output.

Let's move to install emmet to your programming environment.

Installation

For this article, I will be using VSCode which has emmet support by default. If you are using a different text editor check the official site for download instructions.

Getting started

We are going to explore some features of emmet in an HTML file. Let us start by creating a new HTML file called index.html Inside the file, let us create the boiler-plate code by typing html:5 then hitting the tab key. You will notice this generates code like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Creating child elements

Child elements are elements that are direct children of some elements. Take this block code for instance

<nav class="parent">
    <div class="child"></div>
</nav>

nav is the parent to the div To create elements with children, 

nav.parent>div.child

Notice the >, this is what indicates that the elements to the right of > are the children of whatever element is on the left.

Creating sibling elements

Sibling elements are elements that share the same parent. 

<nav class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</nav>

In the above example, child1,child2 and child3 all share the same parent. To create this structure, 

nav.parent>div.child1+div.child2+div.child3

Climbing up

You may want to create an element with children and then another element on the same level as the parent such as

<nav class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</nav>
<div class="otherdiv"></div>

Using emmet 

nav.parent>div.child1+div.child2^div.otherdiv

Grouping

You may want to group some elements together and then create other elements on the fly such as.

<nav class="parent">
        <div class="child1">
            <ul>
                <li class="list-item"></li>
            </ul>
        </div>
        <div class="child2">
            <a href="" class="link1"></a>
            <a href="" class="link2"></a>
            <a href="" class="link3"></a>
        </div>
    </nav>

Using emmet it is pretty simple 

 nav.parent>(div.child1>ul>.list-item)+div.child2>(a.link$)*3

Text

Adding text to tags is a pretty common thing to do and that is why emmet has a handy shortcut to do this. To create a p tag with some text inside its as simple as

p{Some text has got to be here}

Conclusion

Emmet is a perfect way to improve your workflow when writing HTML and from the examples above you can see how easy it is to write complex structures with just a line of code. The features described here are not all, and I would recommend going through the Emmet docs to see more uses cases. Happy Coding.

HTML5workflow