Tags

By default, text at the start of a line (or after only white space) represents an HTML tag. Indented tags are nested, creating the tree structure of HTML.

  1. ul
  2.   li Item A
  3.   li Item B
  4.   li Item C
  1. <ul>
  2.   <li>Item A</li>
  3.   <li>Item B</li>
  4.   <li>Item C</li>
  5. </ul>

Pug also knows which elements are self-closing:

  1. img
  1. <img/>

Block Expansion

To save space, Pug provides an inline syntax for nested tags.

  1. a: img
  1. <a><img/></a>

Self-Closing Tags

Tags such as img, meta, and link are automatically self-closing (unless you use the XML doctype).

You can also explicitly self close a tag by appending the / character. Only do this if you know what you’re doing.

  1. foo/
  2. foo(bar='baz')/
  1. <foo/>
  2. <foo bar="baz" />

Rendered Whitespace

Whitespace is removed from the beginning and end of tags, so that you have control over whether the rendered HTML elements touch or not. Whitespace control is generally handled via plain text.