Creating your first template

In the following example, you will create a Diet template from the HTML page using various techniques. The template syntax is concise and easy to read, which is a great advantage over using plain HTML.

Turning the HTML page into a Diet template

Let's start with a one-to-one translation of the HTML page into a Diet template. The syntax that we will use is based on Jade templates (http://jade-lang.com/), which you might already be familiar with. It looks similar to the following:

doctype html
html
  head
    meta(charset='utf-8')
    title Demo site
    link(rel='stylesheet', type='text/css', href='demo.css')
  body
    header
      | Header
    nav
      ul
        li
          a(href='link1') Link 1
        li
          a(href='link2') Link 2
        li
          a(href='link3') Link 3
    article
      h1 Title
      p Some content here.
    footer
      | Footer

The template resembles the...