How to Easily Create HTML Files with Emmet

Sites In Minutes With Emmet Featured

Is it possible to create all the HTML code of a site in minutes, if not seconds? It is possible if you’re using Emmet! This new approach allows the rapid development of code in HTML, XML, and other structured code formats.

Emmet is a plugin for many popular text editors. With Emmet, you create the skeleton of your page in a rational but very compressed syntax and then have it expand to full, proper HTML code. The result feels like magic: a line of text expands to hundreds of lines of syntax, and you have a static page, or even a full site’s structure, ready in minutes.

You’ll learn here how you can use Emmet to create a full static web page. Visual Studio Code is used for this tutorial since it comes with built-in support for Emmet. You can use Emmet in other editors, like Sublime Text and Atom, but you’ll have to add support for it through an extension.

Create your site’s file

To get started, open Visual Studio Code.

Sites In Minutes With Emmet Run Vscode

Choose “File -> New File” to create a new, blank document.

Sites In Minutes With Emmet Make New File

Choose “File -> Save As” to save your file, giving it an “html” extension.

Sites In Minutes With Emmet Save As Html

Basic structure

Each web page’s elements are organized in groups and subgroups. When coding with Emmet, you’ll have to always keep in mind how each group contains items that can themselves be groups of even more elements.

Note: although we’ll explain the basics, it would be better if you were familiar with the basics of HTML syntax before you proceed.

At a very basic, top level, most sites contain three such groups/sections: a header, a main part for the core content, and a footer. To create those with Emmet, type:

Sites In Minutes With Emmet Header Mainsite Footer

The “#” in front of each word means that each group is a div with an ID. Press Enter at the end of the line to see Emmet in action, turning this little phrase into three lines of structured HTML.

Sites In Minutes With Emmet Header Mainsite Footer Expanded

Header structure

A typical site’s Header contains its logo and one or two menus. To add those to your page, you can keep the expanded HTML from the previous step and type directly in the Header Div. You can then type something like:

Sites In Minutes With Emmet Add Logo And Menus

Press Enter to expand this as well, and you’ll have three more Divs for your site’s logo and two menus inside your Header.

Grouping in Emmet

With Emmet, you group elements by placing them in parentheses. This allows you to create complex structures for your pages. So undo everything up to now and keep only your basic #header+#mainsite+footer code from before.

Sites In Minutes With Emmet Undo And Experiment

Replace the #header in your code with the following:

In Emmet you can drop a level by using the > character and can go up a level by using the ^ character. This allows you to get in an element, add others there, and then go back up.

The result should look like the following:

Sites In Minutes With Emmet Header Plus Content

The above would translate to: “Add a Div (group) with the ID #header. Inside it, add three Divs with the classes “.logo,” “.menu.top” and “.menu.main.” Return one level up, outside the group, and add two more Divs next to it with the IDs “#mainsite” and “#footer.”

Sites In Minutes With Emmet Header As Html

Post Structure

A basic post on a typical site usually contains the following elements:

  • Title
  • Image
  • Excerpt (as a text paragraph)

It should also offer a link that allows the visitor to read the actual post and maybe links to its categories, tags, etc. For simplicity’s sake, though, we’ll use only those three elements for now.

This is the code that we are going to add:

Sites In Minutes With Emmet Post Emmet Syntax

This tells Emmet to “Create a Div with the class .post. Inside it, place a title of H3 heading, an image, and a paragraph for the excerpt.

With “{TEXT}” attached after an element, you define its contents. So, with “{Post Title},” that’s telling Emmet that the content of each H3 title will be the placeholder text “Post Title.” You can change “Post Title” to your name or whatever text string you fancy, and it will be used as the content of your post titles when the code is expanded.

The $ next to “Post Title” is a numeric variable that works in conjunction with the “5” you can see outside the parentheses. The *5 after the parentheses tells Emmet to repeat the contents of the parentheses five times. The $ is replaced with each post’s iteration number. Replace this number with the number of posts you want on your page.

Add this to the actual code. It should look like:

Sites In Minutes With Emmet Posts In Main Syntax

Footer Structure

For the Footer, we’re adding two groups – two Divs with the classes “.design” and “.copyright.”

The code is as follows:

Sites In Minutes With Emmet Footer Syntax

This will create a div with class “.design.” Inside it is a link with the class “.designerslink.” Added next to it is a second div with the class “.copyright.” Inside this div is a paragraph of plain text with the contents “Copyright 2020 My Name.”

Sites In Minutes With Emmet Footer Included

The result will be this:

Now, just press Enter, and your site’s ready!

With one keypress, everything we saw up until now, and this ultra-condensed bunch of characters, will turn into dozens of lines of proper HTML syntax for a full page!

Sites In Minutes With Emmet All Code Expanded

Save the changes to the file by pressing Ctrl + S or visiting “File -> Save.” To see your work, fire up your browser. Then, either using “File -> Open” or an external file manager, locate your HTML file and manually open it in the browser.

Sites In Minutes With Emmet Site In Browser

Wrapping Up

You have learned the basics of using Emmet to create your HTML file. Of course, you can return to your code at any time to tweak it or expand it with more stuff.

Did you already know about Emmet? Are you using some other shortcuts which help when creating sites? Tell us in the comments section below.

Related:

Odysseas Kourafalos Odysseas Kourafalos

OK's real life started at around 10, when he got his first computer - a Commodore 128. Since then, he's been melting keycaps by typing 24/7, trying to spread The Word Of Tech to anyone interested enough to listen. Or, rather, read.

Leave a Comment

Yeah! You've decided to leave a comment. That's fantastic! Check out our comment policy here. Let's have a personal and meaningful conversation.