Attributes

Tag attributes in Pug go in parentheses right after the tag name, class or id. Inside the parentheses are name="value" pairs, as in HTML.

One attribute

A link to the menu page in src/index.pug:

a(href="menu.html") Menu

The link text comes after the closing parenthesis and a space:

<a href="menu.html">Menu</a>

Several attributes

Attributes are separated by spaces. Commas between them are allowed too, but not required:

img(src="cup.jpg" alt="A cup of cappuccino" width="200")

The img tag has no content, so there is no text after the parentheses:

<img src="cup.jpg" alt="A cup of cappuccino" width="200"/>

There is no doctype html line here, so Pug closed the empty tag in XHTML style with />. A page with doctype html gets a plain <img ...>.

Attributes on several lines

When there are many attributes, move them to separate indented lines. The café newsletter form:

form(action="/subscribe" method="post")
  input(
    type="email"
    name="email"
    placeholder="Your email"
  )
  button(type="submit") Subscribe

The closing parenthesis can sit on its own line; in the HTML everything ends up in one tag:

<form action="/subscribe" method="post">
  <input type="email" name="email" placeholder="Your email"/>
  <button type="submit">Subscribe</button>
</form>

Boolean attributes

Attributes such as checked, required and disabled are written without a value:

label
  input(type="checkbox" checked)
  span No sugar

The checkbox on the page will be ticked:

<label>
  <input type="checkbox" checked="checked"/><span>No sugar</span>
</label>

In a fragment without doctype html Pug writes checked="checked"; in a page with doctype html it writes just checked. The browser understands both.

If a boolean attribute is set to false, Pug leaves it out: button(disabled=false) gives a <button> without the attribute. This becomes useful once the value comes from a variable.

data- attributes

Your own data- attributes are written like any other:

ul
  li(data-price="3") Cappuccino
  li(data-price="2") Espresso

A script on the page can read the price through dataset.price:

<ul>
  <li data-price="3">Cappuccino</li>
  <li data-price="2">Espresso</li>
</ul>

Common mistake

An attribute value in Pug is a JavaScript expression, not plain text. Without quotes Pug tries to evaluate it as code:

a(href=menu.html) Menu

The build stops with the error "Cannot read properties of undefined (reading 'html')": Pug was looking for a variable named menu. Always put strings in quotes: a(href="menu.html"). Without quotes, on the other hand, you can insert a variable — the lesson on variables covers that.