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.