Attributes

Tag attributes look similar to html, however their values are just regular JavaScript.

a(href='google.com') Google
a(class='button', href='google.com') Google

<a href="google.com">Google</a>
<a class="button" href="google.com">Google</a>

All the normal JavaScript expressions work fine too:

- var authenticated = true
body(class=authenticated?'authed':'anon')

<body class="authed"></body>

Boolean Attributes

Boolean attributes are mirrored by Jade, and accept bools, aka true or false. When no value is specified true is assumed.

input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true.toString())

<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />

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

doctype html
input(type='checkbox', checked)
input(type='checkbox', checked=true)
input(type='checkbox', checked=false)
input(type='checkbox', checked=true && 'checked')

<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

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.

- var classes = ['foo', 'bar', 'baz']
a(class=classes)
//- the class attribute may also be repeated to merge arrays
a.bing(class=classes class=['bing'])

<a class="foo bar baz"></a>
<a class="foo bar baz bing"></a>

Class Literal

Classes may be defined using a .classname syntax:

a.button

<a class="button"></a>

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

.content

<div class="content"></div>

ID Literal

IDs may be defined using a #idname syntax:

a#main-link

<a id="main-link"></a>

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

#content

<div id="content"></div>