Advanced HTML Editing With Emmet

Dec 2, 2014
Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email


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

Emmet Sublime Text 3

Emmet Sublime Text 3

Emmet Sublime Text 3

Emmet Sublime Text 3

Creating Simple HTML Element(s)

Let's create a new empty HTML document.

Emmet Sublime Text 3

click TAB

Emmet Sublime Text 3

Creating Nested Elements

Emmet Sublime Text 3

click TAB

Emmet Sublime Text 3

Creating Multiple Child Sibling Elements

Emmet Sublime Text 3

click TAB

Emmet Sublime Text 3

Moving Out Of Nested Elements

Emmet Sublime Text 3

click TAB

Emmet Sublime Text 3

Adding Multiple Class To The Tag

Emmet Sublime Text 3

click TAB

Emmet Sublime Text 3

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.