back to top

info(at)sypo.uk01539 741461

Saving Time with Emmet

Posted on 10th September, 2018

By Mark Syred. Difficulty level: Intermediate

At SYPO, we don't often write web pages from scratch. That's not to say we don't know how to, it's just that we'll tend to use content management systems, such as WordPress or Concrete5. But, even using these, there are times when we need to edit template files, for example. And when we do, some of us will use Emmet, to help save time.

Emmet is a plugin that works with a large number of text editors, such as Sublime Text, or Notepad++. It generates HTML code based on a huge variety of abbreviated HTML elements. A quick example of this is, if you have Emmet installed, are editing an HTML document, and type, p followed by pressing the Tab key, will produce:

<p></p>

This, in itself doesn't save a lot of time. But, the real value to this plugin comes with its ability to nest HTML elements with very little effort on your part. It can even create basic loops. Typing:

div>p*5

followed by the Tab key, produces:

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

That saves a whole lot of time. And, adding different classes to each paragraph is easily achieved as well, like this. Typing:

div>p.item$*5

followed by the Tab key, produces:

<div>
    <p class="item1"></p>
    <p class="item2"></p>
    <p class="item3"></p>
    <p class="item4"></p>
    <p class="item5"></p>
</div>

There isn't space in this post to cover everything that can be acheived with Emmet, and there's a lot! But there's a few things that are worth making reference to before closing.

Emmet helps with editing too

Whenever you hit the Tab key, when using Emmet, not only will your abbreviated code get expanded, but your cursor will automatically be moved to the first place you're likely to need to edit.

Say you wanted to add a link to another page on the internet, typing a and hitting the Tab key will produce:

<a href=""></a>

with the cursor ending up between the inverted commas after, href.

Content can be added as part of your abbreviation

At any point in your short expression, you can add content by enclosing it in curly brackets. Continuing the example above: typing a.webdev{SYPO} and hitting the Tab key will produce:

<a href="" class="webdev">SYPO</a>

with the cursor immediately appearing in the right place for you to add your link.

The shortest abbreviation of all

Type ! and hit the Tab key, results in:

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

Finally, some lorem ipsum

There are times when you might want to knock up a dummy web page that you intend to add styling to later, to demonstrate what a customer's web page might look like. This can easily be achieved with the following short expression:

!>h1>lorem2^+p*5>lorem50^+ul>li#item$*3>p>lorem10

Always remember, if you want Emmet to change your abbreviated code into actual code, you need to be hitting the Tab key. Once you've done that, the following magic happens.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>Lorem ipsum.</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt enim tempora,
            explicabo magni iure consequuntur minima pariatur dolores ex ab suscipit quo
            assumenda ratione. Optio libero beatae deleniti minus repellendus enim itaque!
            Repudiandae culpa obcaecati hic doloribus facilis alias, pariatur, quis ipsam minus
            debitis aspernatur est! Voluptate enim aliquid, voluptates.</p>
        <p>
            Aliquam praesentium facilis maxime tenetur corporis, enim cupiditate facere
            tempora obcaecati beatae modi a perferendis, fuga numquam est, perspiciatis
            magnam deleniti ex magni. Corporis officiis porro, doloremque harum voluptatibus.
            Tempora voluptatum accusantium, suscipit. Nulla maxime saepe, blanditiis temporibus
            ducimus sed excepturi amet distinctio voluptas obcaecati ut, impedit molestias cum
            laudantium!
        </p>
        <p>
            Pariatur fugiat accusamus, suscipit? Nihil molestias praesentium, sint sequi
            animi voluptatum. Iusto ipsa adipisci nisi dolores laborum illum, velit amet
            eligendi delectus perspiciatis aperiam ea ratione ad sequi pariatur dicta quas,
            ab, aliquam voluptate modi similique repudiandae ullam. Odit quisquam dolorum
            voluptate in rem laboriosam numquam recusandae, labore sequi. Tenetur!
        </p>
        <p>
            Placeat laudantium in, quos doloremque, necessitatibus quas beatae cum nesciunt
            delectus sunt commodi iure? Laudantium officia commodi vitae ratione saepe
            provident fugiat, eligendi dignissimos tenetur, cupiditate non, illum
            voluptatem ipsa! Eaque, necessitatibus autem quis dolores, a ea odit nihil
            pariatur vero quam cumque laborum illum quaerat asperiores. Deleniti, fugiat,
            dicta!
        </p>
        <p>
            Atque vitae repudiandae autem fugit saepe sint ex, debitis possimus iste.
            Officia nobis cumque perferendis odit. Distinctio culpa fugit natus non soluta,
            blanditiis, neque aliquid corporis officia aut quis voluptates vitae quia
            debitis. Esse provident suscipit, modi aspernatur! Id ipsa fugit cupiditate
            quaerat, sequi omnis autem aliquam quis dolorum labore.
        </p>
        <ul>
            <li id="item1">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ipsam.
                </p>
            </li>
            <li id="item2">
                <p>
                    Unde nobis similique beatae qui rerum deserunt sequi, ex laboriosam.
                </p>
            </li>
            <li id="item3">
                <p>
                    Autem reiciendis perspiciatis provident, eum sequi velit commodi a. Ut.
                </p>
            </li>
        </ul>
    </body>
</html>

Impressive, isn't it? And that's just the start... Visit https://emmet.io/ to find out what else it's capable of. Happy, speedy coding.

This website uses cookies to deliver the best experience whilst browsing. More info