Hand coding lots of HTML can be time consuming. By utilising the power of Emmet in your coding environment you might actually start to enjoy coding HTML again.

WHAT IS EMMET?

Most text editors have the ability to use code snippets and can store these and use the equivalent of macros to retrieve blocks of code.

Emmet takes this idea to a whole new level, allowing you to quickly generate code with a few simple keystrokes.

I use CodeAnywhere.com as my online IDE and it has the benefit of having Emmet pre-installed. You will need to find out if your own IDE or coding platform of choice supports Emmet.

Let's get right into it and start with probably the simplest of all commands.

In my IDE I can simply type in an exclamation mark and then hit the tab key:

and the result is:

Let's say I wanted to produce an unordered list with a list item:

will produce:

What if I wanted 5 list items:

which produces:

We can take this a step further. If I wanted to add a class to each list item:

which gives:

We can give each list item an id and have this auto-increment:

which generates:

We can work with tables. For example, let's say I wanted to create a table with 3 rows and 5 columns, then I can use:

which is a lot faster than typing out the following:

We can combine classes and ids as follows:

which gives:

We can build up page elements quickly and efficiently and even use groupings with parenthesis:

which gives:

Generating a simple navbar is just a case of:

With the following result:

CSS

Emmet can also be used for CSS.

Dealing with simple things like width, height, padding etc

gives:

Through to more complex rules for linear gradient and vendor prefixes:

which gives:

There are many options to explore and not all can be covered in this brief tutorial.

I strongly suggest you start with some basic commands and start to use Emmet within your toolbox to save you time.