The first time I heard about Emmet abbreviations, my mind was blown completely wide open. I was amazed by the sheer power and ease of this tool and wondered how I had never heard about it. If you still don't know about Emmet, allow me to introduce you to your new best friend!
So who is Emmet? Well, the real question is not "who is Emmet?" but "what is Emmet?" Emmet is a plugin for text editors that is meant to do a lot of heavy lifting for you. If you're like me and your text editor of choice is VSCode, support for Emmet is already built in and you don't have to do a thing to start taking advantage of it. Otherwise, all you have to is install the plugin and you're ready to go.
At its core, Emmet is really just a series of keyboard shortcuts. When I was first introduced to Emmet, I certainly did not realize how much it could do. In fact, I initially thought that the first Emmet abbreviation that I learned was a standalone shortcut. Now, Emmet can be used for a lot including CSS, XML, and more, but if you're just getting started and/or have not dealt with Emmet before, allow me to show you some of the abbreviations that I have come to use for HTML on a daily basis.
If you're starting up an HTML project and you need some template code, you can Google it, or you can just type ! and hit enter/return , and Emmet will then expand it to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Perhaps my most commonly-used Emmet abbreviations are the ones for classes and ids. By default, if you use Emmet abbreviation for a class and/or id with no other information, Emmet will assume that you're trying to create a div. To create a div with a class of "paragraph", you can just type .paragraph and, when you hit enter/return, it will be expanded to:
<div class="paragraph"></div>
If you wanted to just give that div an id of "paragraph", you could type #paragraph, and that will expand to:
<div id="paragraph"></div>
But where Emmet gets really magical, is in its ability to chain abbreviations! So, let's say you wanted that div to have both a class of "paragraph" and an id of "first-paragraph". All you'd have to do is type .paragraph#first-paragraph and Emmet would expand that to:
<div class="paragraph" id="first-paragraph"></div>
And if you wanted that div to be a p tag, you'd just have to pop a "p" on to the beginning of your abbreviation like so: p.paragraph#first-paragraph to get
<p class="paragraph" id="first-paragraph"></p>
And it's not just p tags! If you wanted it to be an h1 or wanted to create a form, you could say h1.header#heading, which would give you
<h1 class="header" id="heading"></h1>
or form#my-awesome-form, which would give you
<form action="" id="my-awesome-form"></form>
You can even create lis within uls! To create a ul with four lis with a class of "thing", you can say ul>li.thing*4 and Emmet magic will return
<ul>
<li class="thing"></li>
<li class="thing"></li>
<li class="thing"></li>
<li class="thing"></li>
</ul>
And if you wanted to number the "things" (or maybe just felt particularly inspired by Dr. Seuss), you could say ul>li.thing$*4 to add numerical values:
<ul>
<li class="thing1"></li>
<li class="thing2"></li>
<li class="thing3"></li>
<li class="thing4"></li>
</ul>
All of this to say, Emmet is absolutely spectacular and, quite frankly, fun to use! I highly recommend that you install the plugin (if necessary), learn these shortcuts, and take a look at the documentation to find out else Emmet can help you save time and be the most efficient developer you can be!
Top comments (0)