Attributes

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

(NOTE: In the examples on this page, lines containing a pipe character (|) are used for whitespace control.)

All the normal JavaScript expressions work fine too:

Multiline Attributes

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

If you have a single very long attribute, and your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can utilize that syntax for attributes:

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 (), which are frequently used in Angular 2.

Attribute Interpolation

Caution

Previous versions of Pug/Jade supported an interpolation syntax such as:

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

This syntax is no longer supported. Alternatives could be found below. Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.

If you would like to include variables in your attribute, you can do one of the following:

  1. Simply write the attribute in JavaScript:

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

Unescaped Attributes

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

Caution

Unescaped buffered code can be dangerous. You must be sure to sanitize any user inputs to avoid cross-site scripting.

Boolean Attributes

Boolean attributes are mirrored by Pug, and 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 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 parts of the style 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 mapping class names to true or false values, which 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 object does not have to be an object literal. It can also just be a variable that has an object as its value (see also Mixin Attributes).

Caution

Attributes applied using &attributes are not automatically escaped. You must be sure to sanitize any user inputs to avoid cross-site scripting (XSS). This is done for you if you are passing in attributes from a mixin call.