Tags and Text

Tags

Tags are simple and straight forward. The first word in a line is your HTML tag.

Jade
HTML
<p></p>
<div></div>
<h1></h1>

Jade also knows when tags are self-closing

Jade
HTML
<img/>
<input/>

To add IDs, use the hash symbol.

Jade
HTML
<p id="header"></p>

To add classes, use the period.

Jade
HTML
<p class="notice"></p>

You can combine these.

Jade
HTML
<div id="menu" class="notice column another-class"></div>

Divs are very common in HTML. You can imply the div tag by just specifying IDs and classes.

Jade
HTML
<div id="menu" class="column"></div>

Text and content

To add text, simply add it after the word preceded by a space.

Jade
HTML
<p>Hello, World!</p>

For large blocks of text, indent the following lines and precede with a pipe.

Jade
HTML
<p>Hello, World!
This is a block of text.
I hope you enjoy using Jade.
</p>

To nest tags add it in an indented new line

Jade
HTML
<div>
  <p>hi</p>
</div>