html5

Coding faster with Emmet

Leave a comment

And the wheel of coding has taken a new turn!

Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer. Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: write HTML code with CSS-like abbreviations, use different actions to quickly select and modify HTML and CSS code and more!

Lets speak the truth: Writing HTML from scratch everytime sucks, and its annoying with all of those tags, attributes, quotes, braces, etc.  Well you can refer me to all of th\ose text editors like Adobe Dreamweaver and the likes that have code completion, which helps a lot, but you still have to do a lot of typing.  Emmet instantly expands simple abbreviations into complex code snippets.

The 411

1. Initializers: 

Kicking off with a new HTML document takes less than a second now.  Just type ! or html:5, hit “Tab,” and you’ll see an HTML5 doctype with a few tags to jumpstart your application.

initializers

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

2.  Easily Add Classes, IDs, Text and Attributes:

Because of the similarity between Emmet’s syntax for describing elements and CSS selectors, getting used to it is ABC. Try mixing an element’s name (e.g. p) with an identifier (e.g. p#description).

classes-ids

 

 

3.  Nesting:  

By nesting abbreviations, you can build a whole page using just one line of code. First, the child operator, represented by >, allows you to nest elements. The sibling operator, represented by +, lets you place elements near each other, on the same level. Finally, the new climb-up operator, represented by ^, allows you to climb up one level in the tree.

texts-attrs

 

 

4. Grouping

To effectively take advantage of nesting without turning them into a confusing mess of operators, you’ll need to group some pieces of code. It’s like math — you just need to use parentheses around certain pieces. For example, (.foo>h1)+(.bar>h2) will output this:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

grouping

5.  Implicit Tag Names:

To declare a tag with a class, just type div.item, and then it will generate <div></div>.

In the past, you could omit the tag name for a div; so, you just had to type .item and it would generate <div></div>.  Now Emmet is more intelligent. It looks at the parent tag name every time you expand the abbreviation with an implicit name. So, if you declare .item inside of a <ul>, it will generate <li></li> instead of <div></div>.

implicit-tags

 

 

Here’s a list of virtually all implicit tag names:

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

Diving into the workstation!

You can download the plugin via emmet.io.

From there, you’ll see instructions on how to use it, but I’ll explain a little for ya!

It you’re a Notepad++ addict like me, This plugin is available via

– Plugin Manager:  use Plugins > Plugin Manager > Show Plugin Manager menu action and find and install “Emmet” plugin.

– Manual Installation

  1. Install Python Script plugin (available in Plugin Manager).
  2. Download EmmetNPP plugin and unpack it into C:\Program Files\Notepad++\plugins folder
  3. Start Nodepad++. You should see Plugins > Emmet menu item.

You’re welcome!