Rapid Webpage Creation With Emmet (HTML and CSS)

Video Tutorial

Getting Started

If you are a Web Developer or you are trying to get into the field well, Emmet is one of the things that you need to add to your Career learning basket along the way of your journey. Emmet is a web toolkit designed for front-end developer which allows creating and typing HTML tags quicker and faster it shortens complicated tags and elements into easy to learn, shorter commands.

Emmet comes pre-installed with most of nowadays code editors (Atom, Sublime, VSCode) but still if you have a code editor that is less famous or you want to use some outdated editors then you can download and install the complete version from the Official Website.

Well, I really recommend you try Visual Studio Code Editor if you haven’t already, cause you are missing a lot of joy!

Read the Official Cheat-Sheet for a better understanding of Emmet shortcuts.

Emmet Syntax

The Syntax is quietly easy to type and remember once you start using it on a real-world project you will understand how it feels to use such a tool vs doing it the old way (If you enjoy typing a lot, well, this might not be the right tool for you).

Here is an example of a Emmet short command that will create a div element with class myClass and an id myId.

div.myClass#myId

The same as you reference it on CSS, the dot (.) for classes and the hashtag (#) for ids.

Once you finish typing you should be able to convert the command into HTML using the tab key or depending on the code editor you are using, you may get an Intellisense tab that will help you.

Well, the output is going to be.

<div class="myClass" id="myId"></div>

See, it is simple and it could be a way much simpler, let’s take a look on another a bit more complicated example.

You want to create three different elements (div, h3 and small), the div contains a p tag with some random text and so do the last two elements.

div>p{Hello World p}+h3{Hello World h3}+small{Hello World small}

right arrow (>) means the children of the div (parent) and curly braces ({}) puts text in between the start and the end tag.

Converting…

<div><p>Hello World p</p></div>
<h3>Hello World h3</h3>
<small>Hello World small</small>

Quiet nice! if you still think this might not help you the way it supposed to, take a look at the following code.

You want to create three lists each list has 10 items with a class in the format of item-(index) (item-1), you still can use the help of emmet.

ul*3>li.item-$*10

If it gets converted into HTML

<ul>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="item-5"></li>
  <li class="item-6"></li>
  <li class="item-7"></li>
  <li class="item-8"></li>
  <li class="item-9"></li>
  <li class="item-10"></li>
</ul>
<ul>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="item-5"></li>
  <li class="item-6"></li>
  <li class="item-7"></li>
  <li class="item-8"></li>
  <li class="item-9"></li>
  <li class="item-10"></li>
</ul>
<ul>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
  <li class="item-4"></li>
  <li class="item-5"></li>
  <li class="item-6"></li>
  <li class="item-7"></li>
  <li class="item-8"></li>
  <li class="item-9"></li>
  <li class="item-10"></li>
</ul>

Wow, all of that just in one single command, nice!

You can also use it to quickly type other HTML tags (for ex: type input) and press tab you would get an input tag created for you.

Make sure to watch the video tutorial for more information on the commands get executed and converted to plain HTML.

Emmet and CSS

If you did like to use Emmet on HTML you would definitely like it on CSS even though it doesn’t do that much work since CSS is even simpler but still, you can use it help if you want.

You can type it any CSS attribute only by using its shortcut.

.myClass {
 ff:s   ==> font-family:serif;
 bdt:n  ==> border-top:none;
 bgc    ==> background-color:#fff;
 fw     ==> font-weight:;
}

There is a lot of other shortcuts to use, just check out this Cheat-Sheet for more commands.

What’s Next

Emmet helps a lot in terms of spending less time structuring your web pages than doing the real work, you can really benefit from it if you take the time to master the shortcut commands.

Make Sure to save and take a look whenever you need to on the Official [Cheat-Sheet](docs.emmet.io/cheat-sheet) document.

No Comments Yet