HTML Emmet Shortcuts

Spread the love

Speed Coding with html emmet shortcuts

! creates the entire html template outline below

That’s right just the exclamation mark — !
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

link{tab} then gets you this additional

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

With the cursor just after the ‘k’ in the word link, the text then expands outwards to look like this

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<link rel="stylesheet" href="">
</head>
<body>
     <!-- place your cursor here in the body and then type -->
     ul>li*8>a.{click on $}	
</body>
</html>

HTML Emmet Shortcuts – unordered List tags

And with this Emmet short cut ul>li*8>a.{click on $} we get an unordered list tag, 8 item tags with corresponding links

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<ul>
		<li><a href="" class="">click on 1</a></li>
		<li><a href="" class="">click on 2</a></li>
		<li><a href="" class="">click on 3</a></li>
		<li><a href="" class="">click on 4</a></li>
		<li><a href="" class="">click on 5</a></li>
		<li><a href="" class="">click on 6</a></li>
		<li><a href="" class="">click on 7</a></li>
		<li><a href="" class="">click on 8</a></li>
	</ul>
</body>
</html>

Html Emmet ShortCuts that can Amaze

So far, this was all done by using the exclamation mark ! plus the ul>li*8>a.{click on $} series of commands.

ul>li*8{tab} all on its on will create the unordered listing with 8 items in it.

li*6>a{tab} will create six items with anchor texts ready for a menu. It doesn’t look pretty yet, however it just looks like plain ole html with a lot of links lined up.

To make it look pretty, we need to take things a step further.

If we took the same design added the bootstrap set of classes, a couple of h1 & h2’s and a quick form, this would take some thinking ahead of time, but the Emmet keystrokes make it all rather quick.

Would I choose to do it this way in the real world? Yes, spending a bit of time thinking about the design first instead of just trying to code it on the fly may reap some small rewards later.

HTML Emmet Shortcuts – Ze bootstrap prettiness files

Firstly, we need to link to the bootstrap files. Steal this code from us.

This code does 2 things, it creates a direct link to thousands of useful styles and it gives our code the ability to address the mobile first philosophy.

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Mobile first and Bootstrap ready - almost</title>
</head>

HTML Emmet Shortcuts – optimizing ze Javascript via Placement

Then, lets look at putting the Javascript code near the bottom of the body tag like this … Note that theese 3 lines of code are all inside sets of <script> tags. It could have been just one, but there are 3 sets here.

	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

So, with all of this code now in place, we are going to erase the ul and li material in the body so that its empty like this.

</head>
<body>

HTML Emmet Shortcuts – Finally Ze Emmet Code,

We are now going to take the long block of Emmet code here and just paste it in and have a look at it
</head>
<body>
   (header#main-header.bg-success.text-white.p-4.mb-3>div.container>h1#header-title>{Item Lister})+(div.container>div#main.card.card-body>h2.title>{Add Items}^form.form-inline.mb-3>input:t.form-control.mr-2+input:s.btn.btn-dark^ul.list-group>li.list-group-item*5>{Item $})

It looks like this:

(header#main-header.bg-success.text-white.p-4.mb-3>div.container>h1#header-title>{Item Lister})+(div.container>div#main.card.card-body>h2.title>{Add Items}^form.form-inline.mb-3>input:t.form-control.mr-2+input:s.btn.btn-dark^ul.list-group>li.list-group-item*5>{Item $})

So lets see what this means

header#main-header is going to produce a header tag with an id of main-header.

header#main-header.bg-success.text-white.p-4.mb-3 is going to produce a header div with an id of main-header and each period is going to be part of the class= code, like the following.

Html emmet shortcuts are shown here. It starts with head#main-header.bg-success and includes Bootstrap code too.

So, far, it doesn’t seem like much of a short-cut, lol. However if we follow the same structure of using a period . to represent class=”” and # to represent id=”” then we can quickly see the div.container with an h1 inside and the hard coded text {Item Lister} gets us this h1 code below.

Html emmet shortcuts - This time zeroing in on the container class enveloping the h1 tag

HTML Emmet Shortcuts – Favorite Emmet Code

And this is where my fav piece of code hangs out: (div.container>div#main.card.card-body>h2.title>{Add Items}^

This is another div container with a div having id of main and several bootstrap classes representing card and card-body are settled. An h2 title rounds it out and this macro expands to:

Html emmet shortcuts showing 2 div class source codes enveloping an h2 header. Colored text on a dark brown background.

Add items is followed by a form with an empty field and a submit button. The Emmet code for this is

^form.form-inline.mb-3>input:t.form-control.mr-2+input:s.btn.btn-dark^ul.list-group>li.list-group-item*5>{Item $})

The ^ means that the Emmet macro should go back up one time in the chain, so that the form group elements are sitting at the same level as the h1 header.

HTML Emmet Shortcuts – Input:t what does it mean?

input:t means expand to create the input type=text and the input:s.btn.button-dark means to expand to show an input:submit button. All in all, it ends up expanding to look like this:

The html emmet shortcut code that produced this ul/li class with bootstrap styling is shown below the image.

So, this is how this: (header#main-header.bg-success.text-white.p-4.mb-3>div.container>h1#header-title>{Item Lister})+(div.container>div#main.card.card-body>h2.title>{Add Items}^form.form-inline.mb-3>input:t.form-control.mr-2+input:s.btn.btn-dark^ul.list-group>li.list-group-item*5>{Item $})

… ends up looking like this :

The finished image of the bootstrap influenced style sheet. Green header with a box below where user can add items using a submit button. Part of the html emmet shortcuts page

So, where does Emmet run? Pretty well all major editors, like Sublime Text2/3, Microsoft Visual Code, CodePen ( also called Zen Coding ) and quite literally a dozen other code editors.

The only place where Emmet doesn’t run is that funky code editor that your neighbor and his son built 2 Easters ago.

A few more Emmet macros.

More html emmet source code macros being shown for a nav bar.

You can see more macros here

Or the official Emmet page here

Or you can go back up to the top of this html emmet shortcuts page here

Top