Now if you're using visual studio code then Emmet ships with it by default so you don't even have to install it as a plugin. If you're using some other text editor such as VIM or Sublime text or Atom. Then you may need to add it in manually but you can search through those respective package manager or plugin directories and find it and the way you spell it is just E M M E T and then you'll be able to use it but if you're following along with Visual Studio code then you can simply start typing each one of these things and they're going to work.

So let's start off with creating some HTML 5 boilerplate code. Now if you are like me you don't really like having to do something like this every time you create a new document. Typing DOCTYPE and then HTML and having to go through that entire process. Well, you can do a couple things you can do one thing that I've done which is to create a code snippet and you can just add that into your user snippets but also if you're using Emmet you don't even have to do that.

You can perform this task where you simply type in html:5 just like this and then hit tab and you can even see right here on the right-hand side Visual Studio code is telling us that this is an Emmet abbreviation

So if you type that in and hit tab you can see that it has given us the entire set of HTML 5 boilerplate code

so you can even have some responsive elements like we have here on line 5. You can have a title, you have body tags, your head tags, everything like that. This is really helpful and it makes it so you don't even need to use the snippet if you don't want. I personally still do use them because I like to have my own custom version of it but just to give you an idea that Emmet allows you to do that as well.

Now in the show notes, I'm going to have every one of these commands and what it generates so you don't have to feel like you have to type each one of these in and keep them because you can just reference the show notes if that helps you. So that's the first command generating the HTML5 boilerplate.

Now next let's see how we can use some computational tools. So if you've ever had a scenario where you wanted to create bullet points you might have had to do something like this where you typed in a UL tag and then inside of it you typed one li and then you had to copy that and do all of this manually, and that's perfectly fine you can do it that way. But Emmet allows you to use computation so you can actually multiply all of that out and so on one line you can generate as much code as you want.

So here the command I'm going to use is UL and then the greater than sign and then from there type li times which we use and Asterix for times and then if you want 10 bullet points just type 10 just like that.

ul>li*10

hit tab and you can see that it built all of those for you automatically and even place the cursor right in the first bullet point. So I could start working just like that.

So multiplication is something that is very helpful and as you may have noticed it also allowed me if you use that greater than symbol, it allows you to use a parent-child relationship. If you notice we actually created two elements just by using that greater than symbol so if you didn't want to multiply it out and you only wanted 1 li then you could do UL greater than li

ul>li

and then it creates that for you so that's very helpful.

Now moving down the line if you need to create a class so say that you want to create a div and you want it to have a class name. Well usually you'd have to do something like this type div and then class and then give it whatever name you want so you can do container and then you have to type whatever it is you want inside of the div.

<div class="container">

</div>

Well to use Emmet for this all you have to do is type period. So that is going to be how you define if it's going to be a class or an ID. And here I can just type a container and then hit tap.

And as you can see that created the full div for us right there with a class of container.

Now we can do the same thing with an ID. So instead of a period if I start off with the hash symbol and so if I say hash headline hit tab. Now you can see it gives me a div with an id of headline.

That's the difference between using a class and an ID. Now let's talk about multiple nesting, so we saw how earlier we could use single nesting where I typed ul and then li that allowed us to create an unordered list. But you're not limited to doing it just with one parent-child, you can actually have multiple levels of nesting. So imagine that you want to build out a navbar and you know that inside of the nav you want a div and then inside of that div you want four span tags. Well, you can type nav greater than then a div then greater than and then span times four.

nav>div>span*4

and now you can see that generated a nav tag it placed a div inside of it and then it gave us four span tags automatically.

So that is really helpful. I love being able to just auto generate all of that code. It not only saves time it's also is really fun. So far we've talked about nesting but if you have a scenario where you may want to create multiple elements but you don't want to place them all inside each other. What you can use is what is called The Sibling operator which is just the plus sign.

So let's say that we want to have a nav then below that we want to have a div with the class of container and then we want to have a footer. So it's kind of a standard setup so I can say NAV plus dot container plus footer.

nav+.container+footer

Now if I hit tab you can see that that gave me a nav element, then it gave me a div with class container, and then it gave me a footer.

As you can see these are not nested inside each other, they are their own entities and so that is something that I use quite a bit just so I can auto-generate all of the different components on a page that I know that I'm going to need. Now extending that knowledge a little bit we can combine that Sibling operator and our nested processes and put them all together. So if I want to have a nav component and then below that I want to have my container class and then inside of the container. I want to have a UL and then an LI and I want to have five different elements inside of that five different list items if I want to do that I can.

nav+.container>ul>li*5

so I can combine the sibling operator with the other one such as being able to nest items. So here we have a navbar followed by our div which has a UL inside of it and then that has our 5 list items inside of that.

Now, moving down the line if you have ever seen a template website or you're kind of prototyping a website and you've seen lorem ipsum text that is Latin and it is just placeholder text because imagine that you want to do something like have a paragraph tag and you want to have a few sentences inside of it because you're prototyping, you want to see what it's going to look like on the website. Well, it would be a pain if you had to type all of that manually and that wouldn't even get you that much text.

So what we can do with Emmet is auto-generate as much placeholder content as we want. So if I were to want to have say five widgets. So I may want to have five divs with a class name of widgets so I'm going to say widget times five. And then I want to have inside of that widget I want to have some placeholder text. So I can say greater then because we want to pass this inside each one of those widgets and then say lorem, then this is going to generate all of that placeholder text for us so I can type tab. And now we have five divs with a class of widget and then as you can see we have only the placeholder text that we would want right there and you can see it's all unique and it's with varying lengths so this is really helpful whenever you want to be able to have some placeholder tax but you don't want to have to go copy and paste it from some other site or do anything like that you can just let it do all of that for you.

Now we are not limited to this amount of text because this is the default if you just type lorem in you'll get how many words are right here but say that you wanted to have longer content or shorter content what you can do is type the same thing we just did. So widget times five and then you can say lorem but you can pass in anything you want into lorem so I could say lorem 200

.widget*5>lorem200

hit tab and now you can see that each one of these divs contains 200 words of our placeholder text.

So this allows us to have a lot of flexibility with exactly what we're trying to pull in and I'll delete all of this. And one more time just so you can see how it works. .widget*5>lorem5 now you can see we have five different divs with five words inside each one of those divs.

So if you wanted to build out something with some sample titles or anything like that, then this is a perfect way of being able to implement that. And now we've already walked through how we could create our own custom classes with divs just by doing something like saying container and that creates a div and then we saw we could do with an ID. But you also can be a little bit more explicit because you don't always want to generate a div and so using the DOT followed by the class name that gives you a little bit of a shortcut but you also could manually type out div followed by a dot followed by whatever class name you want and this will give you the same behavior.

Your first question maybe that seems pointless we just had to type something in that we didn't have to before which is true but what you can also do and what this means is that you can do that with any kind of tag. So if you wanted to add a span tag with a specific class you could say span dot title and that's going to give you a span of title.

span.title

You also could say P for a paragraph tag and say p dot some paragraph and this is going to give you the same exact behavior where it creates a paragraph tag and then gives you whatever class that you pass directly into it.

p.some-paragraph

So that's something that when it comes to using Emmet this might be one of the ways that I use at the very most because it allows me to very quickly add a class and define what tag I want that nested inside of.

Now, so far whenever we have generated anything we have created for the most part except when we used our lorem ipsum we created empty divs and elements so if I did something like container and then featured and then an H1 and if I did that you can see that it works. I have a container with a featured class inside of it and then an H1 heading inside of that.

.container>.featured>h1

But we can even be a little bit more efficient and we can insert text directly into our generate command so I can say dot container and then greater than sign dot featured and then the greater than sign again h1 and then pass in with curly braces whatever content I want. So here I can pass in Hi there and then simply type tab.

.container>.featured>h1{Hi there}

You can see that it generated the same set of divs and the heading but it also took our content and added it directly into that heading tag. So that is something that is nice if you're wanting to be even a little bit more efficient. Now I will say I rarely implement this myself. I typically will simply generate all of the tags and then type it in because there's not a huge performance benefit to doing it, but just in case you want to it is something that is helpful.

Now in addition to adding text you also can do things like add attributes. So say that you are going to create a image tag and you need to slide a image and a source inside of that. Well, I can say dot img and in this case, I'm just going to call a class of img wrapper and then inside of here I want to create an image tag. Well, the way I can do that is by saying img then in square brackets type src equals and then whatever url path I want. So here I'll just say featured dot JPEG and now if I typed tab then this is going to create a div of image wrapper.

.img-wrapper>img[src="featured.jpg"]

It generates the HTML tag for the image inside of it and then it even passes in that featured path to the image directly to the source so this gives us a perfectly valid HTML image tag wrapt right into an image wrapper so you can add in those attributes. I have found that this can be really helpful for students that maybe don't have all of the syntax memorized for pure HTML and they can simply learn and pass in these values into the generator commands for Emmet and it allows them to have all of the code generated automatically.

Just in case you're curious if this src command is something magical. It is not, you can pass in anything you want as an attribute with those square brackets so I can say .img-wrapper and then pass in image just like we did before. And yeah I can pass in the source like we did where I'll say featured and then pass in whatever that path is. But then you can pass anything else that you want so you could pass in alt and then say my alt content. And then just so you know that you don't even have to pass in true HTML attributes if you need to add something custom you get say special adder which is nothing real it's just something that we're making up and then put in whatever content that you want inside of it. If you run this you can see that it created an image tag with the featured JPEG with all text with our content and then it even use this special attribute and passed in the value that we passed in there.

.img-wrapper>img[src="featured.jpg" alt="My alt content" special-attr="asdf"]

So that means that what we're doing here is really just leveraging the generator commands but there's nothing special about those tag names they are not reserved words or anything like that they're simply looking at the values we're passing in and then it's generating that HTML markup. Now you can imagine that this also could be really helpful for say that you're building out react applications and you want to be able to generate a button so we can use Emmet for that. So I could say something like button and then pass in an attribute.

So inside the brackets, I can say on click and then this on click handler is going to take in something like activate sidebar. It doesn't really matter this isn't a real application I'm just giving you example of how that would work. And then from there inside of here, we want to have some content so we could just say something like and I want a curly brace because this is content. I say show sidebar and then just hit tab and you can see that we've created a full react type of button.

button(onClick={activateSidebar}]{Show Sidebar}

It's a button element with an on click handler and then it's calling this active sidebar function. So this is something that you could use not just for HTML but JavaScript and those kinds of things as well so Emmets very helpful when it comes to that. Now if you want to perform something like adding a class to a custom tag we've talked about traditional ones such as adding classes to paragraph tags or divs or span's but you can also do something like this and say NAV dot NAV dash wrapper and then hit tab and you can see that you are not limited to using the pure HTML tags you can use anything that you want.

nav.nav-wrapper

That's what I really like about Emmet is it doesn't really have knowledge of pure HTML. I should say it allows you to follow a pattern and then it's going to generate whatever pattern you throw at it. So it's not going to yell at you and say there's really no such thing as a nav component. It's going to simply take in whatever you type and then it is going to generate the HTML for you it's really nice and flexible that way.

Now we're getting close to being done with the guide. But we have a few more fun things to go through the next one is going to be how we can group elements together. So say that we have a container and then inside of that container we want to have one div that is a hero unit and then another one that's a content wrapper and then below that we want to have some bullet points and then inside those bullet points we want to have a bunch of li tags. Well we can run a grouping command by using parentheses so I can say that I have a class of container and inside of it I have this group so I have a group that is going to take a hero unit plus a container wrapper plus a ul and then inside of that ul I want it to have 10 items and so if I take this and run it you can see that it generates HTML with a container class then inside of that it has a hero unit below that it has a container wrapper class and then we have all of our bullet points and so we can use parentheses to have a nice and easy way of grouping all of those kinds of things together.

.container>(.hero+.container-wrapper+ul>li*10)

Now we also have the ability to number items. So imagine that you have a scenario where you want to use a UL tag and then you want to have some li's inside of it that each one of these li's needs to have a class. So say it needs to have a bullet list 1 and then the next one needs to say bullet list 2. You might think that you need to type all of that out manually but Emmet gives the ability for you to count which can be very helpful in a number of situations so you can say UL and then li dot bullet dash list then the dollar sign and then from there Astrix and let's say 7. Now if I run this you can see that it performed that full task for us automatically.

ul>li.bullet-list$*7

It created each one of those li tags and it started at 1 and it added customized numbers at the end of each one of these classes so it generated all of that for us. And that could definitely save some time depending on how many elements that you need to create.

Now, we're down to our last three tips. I'm going to now walk through how you can auto import stylesheets. So if you simply type in link and then tab this gives you the full set of syntax you need in order to import a stylesheet.

link

Now if you want the ability to create a link or say that you're new to development and you're constantly forgetting the syntax if you type a and then tab that creates a basic link for you.

a

But if you want to get even a little bit more efficient you can create in pre-populate that a tag. So you can say a and then using brackets you can say href and then inside of that, you can pass in whatever that a href is. So I can say Google.com and then at the very end of this we can actually add in some content with curly bracket so I can say Google and now if you hit tab you can see that you've created a full link that has an href inside of it and then it even has the text for that link.

a[href="google.com"]{Google}

So you've auto-generated the entire thing and like before you can add any attributes, you could add a target, you could do anything like that that you want.

So I hope that this guide was helpful I know it was a longer one but I think by the end of it you're going to be able to have a full toolset that you can use, that'll help you become even more efficient as a developer.

Code

• Source code for guide