Attributes

Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript.

(NOTE: Examples on this page use the pipe character (|) for whitespace control.)

Normal JavaScript expressions work fine, too:

Multiline Attributes ¶

If you have many attributes, you can also spread them across many lines:

If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can use that syntax for attributes. This is really useful for attributes with really long values:

Quoted Attributes ¶

If your attribute name contains odd characters that might interfere with JavaScript syntax, either quote it using "" or '', or use commas to separate different attributes. Examples of such characters include [] and () (frequently used in Angular 2).

Attribute Interpolation ¶

a(href="/#{url}") Link

Here are some alternatives you can use to include variables in your attribute:

1. Simply write the attribute in JavaScript:

   - var url = 'pug-test.html'; a(href='/' + url) Link | | - url = 'https://example.com/' a(href=url) Another link

   <a href="/pug-test.html">Link</a> <a href="https://example.com/">Another link</a>

2. If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can also use its syntax to simplify your attributes:

   - var btnType = 'info' - var btnSize = 'lg' button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize) | | button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)

   <button class="btn btn-info btn-lg" type="button"></button> <button class="btn btn-info btn-lg" type="button"></button>

Unescaped Attributes ¶

By default, all attributes are escaped—that is,special characters are replaced with escape sequences—to prevent attacks (such as cross site scripting). If you need to use special characters, use != instead of =.

Boolean Attributes ¶

Boolean attributes are mirrored by Pug. Boolean values (true and false) are accepted. When no value is specified true is assumed.

If the doctype is html, Pug knows not to mirror the attribute, and instead uses the terse style (understood by all browsers).

Style Attributes ¶

The style attribute can be a string, like any normal attribute; but it can also be an object, which is handy when styles are generated by JavaScript.

Class Attributes ¶

The class attribute can be a string, like any normal attribute; but it can also be an array of class names, which is handy when generated from JavaScript.

It can also be an object which maps class names to true or false values. This is useful for applying conditional classes

Class Literal ¶

Classes may be defined using a .classname syntax:

Since div's are such a common choice of tag, it is the default if you omit the tag name:

ID Literal ¶

IDs may be defined using a #idname syntax:

Since div's are such a common choice of tag, it is the default if you omit the tag name:

&attributes ¶

Pronounced as “and attributes”, the &attributes syntax can be used to explode an object into attributes of an element.

The above example uses an object literal. But you can also use a variable whose value is an object, too. (See also: Mixin Attributes).