Advanced HTML Editing With Emmet

In the previous post on Sublime Text 3, I explained how to get up and running with the Text editor along with the PackageManager plug-in. In this post we will explore another plug-in Emmet. This is the single most powerful plug-in you can inject in your day to day web development life and be productive right away. Your simple abbreviation will be converted into complete HTML markup in no time.

Let's start by installing the plug-in on our Editor.

Installing Emmet

• Open Command Palette by pressing. Ctrl+Shift+p
• Type Install and click Enter
• Type Emmet, Select first result and hit Enter
• Restart the Editor

Creating Simple HTML Element(s)

Let's create a new empty HTML document.

click TAB

Creating Nested Elements

click TAB

Creating Multiple Child Sibling Elements

click TAB

Moving Out Of Nested Elements

click TAB

Adding Multiple Class To The Tag

click TAB

As you saw, just typing this abbreviation results into full blown HTML snippet that you can now plug-in to your web pages. In coming post I will show you how to get some more advanced Emmet techniques.