How to write HTML code faster

Modern websites require lots of HTML code. Complex layouts with multiple different views and states can be difficult to create with just a simple text editor. Thankfully, there are a host of HTML generation tools out there to work with. Here we take a quick look at two of the more popular tools, Emmet and Pug.

However, you still need to know your HTML to use both of these powerful time-saving tools. So, before you dive in make sure you're using the popular semantic HTML tags the right way. Also see our guide to using a HTML boilerplate.

Want to swerve the code? Try these website builders. Or for extra help along the way, choose a web hosting service with tech support. 

Generate HTML on the fly

When writing large amounts of HTML in one go, writing each tag out by hand can become very tedious, very quickly. For example, when writing out a list of links, we need to make sure that the <ul>, <li> and <a> tags all open and close in the right place. Otherwise the links may not work and the whole page layout will go completely haywire.

How to use Emmet

To make sure you reduce the chances of this happening you can employ the talents of Emmet. This is a tool that will save you lots of typing and will greatly improve your HTML & CSS workflow. Emmet allows you to create elements by typing out a CSS-like selector. It will then parse and expand that element into regular HTML. Below is the original element created in Emmet.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet will detect this element, parse it and then transform the element into standard HTML as shown below. A quick look at the Emmet element suggests that <li> is multiplied by (*3) and each <li> instance will be called Chapter followed by the appropriate number (up to 3). 

Note how many characters the Emmet element contains and how many the standard HTML contains. Even this small snippet of code demonstrates how much time can be saved by using the Emmet shorthand. 

<nav>
  <ul>
    <li><a href=”” class=”chapter”>Chapter 1
 of 3</a></li>
    <li><a href=”” class=”chapter”>Chapter 2
 of 3</a></li>
    <li><a href=”” class=”chapter”>Chapter 3
 of 3</a></li>
  </ul>
</nav>

Emmet is also aware of context. For example, if we are editing a <table> it is likely we will want some <tr> (these are rows) elements to fill it. All we would need to do is specify how many we need.

This is just a quick example of what Emmet can do, but there are plenty more configuration options available. These include CSS editing, BEM (Block Element Modifier) class creation and there is even a Lorem Ipsum generator. 

It's also worth noting that most code editors either have Emmet built in or support it through plugins. You can find out more about this on the Emmet Documentation page.

Use Pug for dynamic content

While Emmet is ideal for static content, what happens if content needs to be more dynamic? For example, we may need to generate personalised homepages, complex order tables or repeat common blocks of HTML. This is all possible in JavaScript, but by pre-rendering this content we can get an added speed boost without relying on the user’s browser. Remember if you've got a media-heavy page, you'll want to back it up with reliable cloud storage.

Step forward Pug. This is a templating tool for HTML. You can write pages in the “.pug” format and Pug will read that file, inject some dynamic data into it and return standard HTML. The example below is how you would write the code in Pug to create the same HTML as the Emmet example (above). 

ul
  each val in [1, 2, 3]
    li
      a(href=””, class=”chapter”) Chapter
#{val} of 3

A Pug file uses indentation alone to indicate nesting. It can iterate over values to generate large amounts of HTML in one pass. These “.pug” files are designed to be reused many times across a project.

Pug is available to install from package manager npm. But, if you want more information on how to get started with Pug pay a visit to the website. 

This content originally appeared in Web Designer magazine.

Read more:

• 10 best CSS frameworks
• CSS animation examples to recreate
• 8 HTML tags you need to be using (and 5 to avoid)