Save Time When Coding HTML By Using Emmet

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:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

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

ul>li

will produce:

<ul>
	<li></li>
</ul>

What if I wanted 5 list items:

ul>li*5

which produces:

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

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

ul>li.myclass*5

which gives:

<ul>
	<li class="myclass"></li>
	<li class="myclass"></li>
	<li class="myclass"></li>
	<li class="myclass"></li>
	<li class="myclass"></li>
</ul>

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

ul>li#$*5

which generates:

<ul>
	<li id="1"></li>
	<li id="2"></li>
	<li id="3"></li>
	<li id="4"></li>
	<li id="5"></li>
</ul>

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:

table>tr*3>td*5

which is a lot faster than typing out the following:

<table>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

We can combine classes and ids as follows:

table>tr#$*3>td.red$*5

which gives:

<table>
	<tr id="1">
		<td class="red1"></td>
		<td class="red2"></td>
		<td class="red3"></td>
		<td class="red4"></td>
		<td class="red5"></td>
	</tr>
	<tr id="2">
		<td class="red1"></td>
		<td class="red2"></td>
		<td class="red3"></td>
		<td class="red4"></td>
		<td class="red5"></td>
	</tr>
	<tr id="3">
		<td class="red1"></td>
		<td class="red2"></td>
		<td class="red3"></td>
		<td class="red4"></td>
		<td class="red5"></td>
	</tr>
</table>

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

div#red>(header>ul>li*2>a)+footer>p>lorem5

which gives:

<div id="red">
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p>Lorem ipsum dolor sit amet.</p>
	</footer>
</div>

Generating a simple navbar is just a case of:

.navbar>ul>li*5>a[href=#]{link $}

With the following result:

<div class="navbar">
	<ul>
		<li><a href="#">link 1</a></li>
		<li><a href="#">link 2</a></li>
		<li><a href="#">link 3</a></li>
		<li><a href="#">link 4</a></li>
		<li><a href="#">link 5</a></li>
	</ul>
</div>

CSS

Emmet can also be used for CSS.

Dealing with simple things like width, height, padding etc

w10>h10>p10

gives:

width: 10px;
height: 10px;
padding: 10px;

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

lg(right, #FFF 30%, #000)

which gives:

background-image: -webkit-linear-gradient(right, #FFF 30%, #000);
background-image: -o-linear-gradient(right, #FFF 30%, #000);
background-image: linear-gradient(to left, #FFF 30%, #000);

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.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.