Select Page

Web Development Tools — Emmet for HTML Coding

by | Aug 7, 2014 | Technology, Web Design

We use a lot of different HTML editors here at HB Design.  Dreamweaver, Visual Studio, SharePoint Designer, Notepad++, and PSPad, to name a few.  I personally like PSPad.  It is fast and simple, yet has some powerful features like search and replace across files and a well-implemented regular expression search and replace.  In addition, you can add “Emmet”—a powerful  coding aid—to make coding HTML faster.

Basically, Emmet is a shorthand for creating HTML and CSS. For example, to create an order list with five list items you would type: ol>li*5<ctrl>, which would generate:

So instead of typing 54 characters, you only typed nine. Pretty cool!

Emmet is supported for a number of editors, but since my favorite editor for coding HTML is PSPad, here are the instructions.

Steps

  1. Download Emmet and store it in the PSPad jscripts folder.Emmet is in GitHub and, if you follow the link in the sidebar, you can download it by viewing the “raw” code. Then save the raw code page to your PSPad scripting folder. On my windows system, the folder is at C:Program Files (x86)PSPad editorScriptJScript.If you are running a portable version of PSPad, then the folder will be on your flash drive.
  2. If PSPad is not showing the “Scripts” menu item then do the following:
    1. Start PSPad as an administrator. (Right-click on the pspad.exe file, and select Run as administrator.)
    2. When PSPad starts, open the Settings -> Program Settings menu item.
    3. Select System Integration from the list on the left.
      integrated scripting
    4. Check the checkbox for the integrated scripting support (WSH), and click okay.
    5. The Scripts menu should now be showing:zen1
    6. Open the Scripts menu and you should see Emmet. If not try the “Recompile scripts” command
      in the menu.

Now give it a try. Open a new blank HTML document, and try typing !<ctrl-,> and see what you get!

There you have a HTML5 template with just three keystrokes. Now move to the body area and type #main>ol>li*5<ctrl-,>

That was 17 characters typed to give you over 177 actual characters!

Emmet is a plug-in available for a number of editors.  Use the links below to learn more.