Web Developers are always looking for new ways to speed up our development process, one the best ways to speed up your development and becoming more productive is to choose the right IDE for the way you code. I’ve tried a lot of IDE’s but he one that I find myself most productive with is with sublime text, this is because the speed I can do different tasks.
Much of this performance comes from the massive amount of plugins that are available to the IDE, in this article we are going to be looking into one of the most productive front-end development plugins called Emmet previously known as Zen Coding.
Emmet is a time saving plugin that you can get on many different IDE’s and it allows you to create a combination of shortcuts to quickly create HTML. You are able to type in a number of different shortcuts and it will automatically create the HTML for you.
A simple example of this will be to create a list with 5 list items, instead of typing in this.
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
All you have to do is type in the below and hit tab and the HTML will be created for me.
ul>li*5
You can do this sort of abbreviations with almost any HTML element so lets do something a bit more complicated than a list. Lets create a full HTML page with a head, body, wrapper div, a header div with a navigation bar, content div with a h1 and a number of paragraphs, a sidebar area and a footer div.
The following is the complete command we will use to create this basic HTML page.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $ }^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer
This will output the following html.
If you haven’t used Emmet before this command will not make much sense so let’s take it apart and go over how this is created.
Creating the Basic HTML Page With Emmet
First we start off by creating a HTML5 doctype which is done in Emmet by using the below command. This will not just create the HTML doctype but will also create the head tags and the body tags for your HTML page.
html:5
Create Wrapper Div
After creating the HTML page the focus will be set inside the body tag where we want to place a child element of a DIV which has an ID of wrapper. To create a child element in Emmet we use the select >, Emmet will now place the following element inside the previous element. The next element will be a div and will use the CSS selector for ID # and define the name of the ID.
html:5>div#wrapper
Create The Header With Logo And Navigation
Inside the wrapper div we are going to add a DIV for the header followed by a DIV for the logo and a list of menu items used for the navigation of the site.
The header element is going to be the child element of the wrapper DIV so we use the > command followed by a div#header, to create a DIV with an id for header. Inside this DIV we are going to create the logo DIV this is again going to use the > followed by a div.logo. This time instead of using # to add an ID we use . to add a class name to the div.
Also inside the header element we are going to add a navigation list element which is going to be a sibling of the logo element inside the header element, to create a sibling element we use the command + followed by ul.navigation>li*5>a{Item $ }. This will create a list element with a class name of navigation, a child element of li 5 times inside these are going to be an anchor tag with the word Item in them.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $ }
Create The Content Area
In our basic page we are going to create a content area which will be positioned on the same level as the header DIV, but the current focus is going to be inside the list items of the navigation so we need to step up the tree and get back to the same level as the header DIV. To step up the DOM tree in Emmet you use the command ^, as we are currently inside the list item we need to step up 3 elements to be back on the same level as the header DIV.
Then we can create our sibling element of the content area ^^^+div#content, the content area will most likely be used for text such as an article so we can place a h1 at the top followed by a number of paragraph tags. As the header and paragraphs are inside the content DIV we used the child selector >h1+p*4.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $ }^^^+div#content>h1+p*4
Create The Sidebar
At the same level as the content DIV we are going to create another DIV that will be used for the sidebar content, this will have a number of list items in it so that we can quickly add links or text to this section.
As with the previous statement meant we are inside the content DIV we need to step up the tree by using ^ then create the sidebar DIV with list items inside it similar to how we made the navigation section, ^div#sidebar>ul>li*5.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $ }^^^+div#content>h1+p*4^div#sidebar>ul>li*5
Create The Footer
Finally we can create the footer DIV, as we finished the last command inside the list item on the sidebar we need to come up two levels so that it is on the same level as the sidebar DIV, and then we can simply create a DIV with the ID of footer ^^div#footer.
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $ }^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer
Conclusion
This was just a very basic overview of using Emmet, there are so many more things you can do with it like CSS abbreviations. But hopefully from this example you can understand how you can use this to quickly create your HTML page structure with one line of abbreviations.
If you want to learn more about how to use Emmet have a look over their documentation.