Build a Web Page Fast with Emmet.io

I’ve been developing a lot of elearning design in HTML5 recently, and I’ve been rediscovering how much I love working with Emmet.io (formerly known as Zen Coding). It’s a simple syntax that lets you string together shortcuts for HTML elements, and then POOF! expand them into a complete website. It makes coding HTML so fast and effortless, taking much of the drudgery out of opening and closing HTML tags.

Emmet is a free plugin that you can add to your favorite text editor. Here, I have it working with Panic Coda editor for Mac, but I also like to use it in Atom.io and Brackets.io, two great free cross-platform text editors.

Watch and Learn

Start with an HTML Page Template

In the example above, I first create a basic HTML5 page template just by typing

html:5

when I press [TAB], Emmet expands that text to

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

</body>
</html>

Which is a nice way to get started writing a web page! We can change the contents of the title tag to give our web page a title and we’re up and running!

Build a Page with a Simple String of Text

I then go on to write this syntax:

h1{My Awesome Page}+(h2{Header Item $}+p{Lorem})*5

When I press [TAB], it creates an H1 element containing the text “My Awesome Page”.

Multiplying Parentheses

Next, I use the parentheses to enclose the following H2 and P tags, and, at the end of the string, I multiply the parentheses by 5 – this creates five pairs of those H2 and P elements.

Curly Braces: Text Inside Your Element

As you’ve guessed by now, you can follow an HTML element like H2 with {curly braces} so you can enter text inside that element. In h2{Header Item $}, the dollar sign tells Emmet to insert an ascending number in that place, so I end up with

  • Header item 1
  • Header item 2
  • Header item 3
  • Header item 4
  • Header item 5

The Plus Sign: Nesting with Care

Emmet has amazing tools for helping you manage how your elements nest inside of each other in the document object model (DOM). I used a + sign to tell Emmet that these elements were “siblings” – that is, they are both inside the same parent element. I could have just as easily used > to nest the second element inside the first.

Lorem Ipsum: Dummy Text when You Need It

Inside the p element, I have

p{lorem}

Placing my cursor inside those brackets and pressing [TAB] expands this to add some “dummy text” – handy when you want to show off what a page will look like with text.

p{Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.}

This is still in Emmet format, though, and so we have to go to the end of the whole Emmet code string to press [TAB] again and expand everything into valid HTML. The resulting code looks like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Page</title>
</head>
<body>

    <h1>My Awesome Page</h1>
    <h2>Header Item 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>
    <h2>Header Item 5</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, exercitationem sequi ab dolorem distinctio ipsa molestias sint. Odio, vero, quo nesciunt rem eaque soluta reprehenderit iste iusto fuga in delectus.</p>

</body>
</html>

From there, it’s a simple matter to change all that dummy text to your own writing, and you’ve got a beautiful page design in no time flat!

Emmet and Bootstrap

Emmet is especially handy when you are working with an HTML template like Twitter Bootstrap where you can design a whole page by nesting elements and using class attributes to invoke elements.

In this example, I turn this string of Emmet text into a beautiful page layout with multiple columns, headings, and images.

.container>.row>.col-md-12>h1.text-success{Emmet and Bootstrap 3}^^.row>(.col-md-4>h2{Heading $}+img[src="https://lorempixel.com/300/300/city/$"]+p{Lorem})*3^^^.row>(.col-md-3>img[src="https://lorempixel.com/g/200/200/nature/$"])*4

Once you learn the basic building blocks of Emmet, you can crank out a page design in a fraction of the time it would take you to code the whole thing!

Learn the Basics

It may seem complicated, but everything I’m doing all comes from these 7 simple to master tricks. Keep this guide by your side and experiment with how Emmet can add speed and enjoyment to your HTML coding life!

Liked this post? Follow this blog to get more. 

Comments

This site uses Akismet to reduce spam. Learn how your comment data is processed.