Tags are the foundation of a Jade template.

Write the HTML element name directly and use indentation to describe its children.

ul
  li First
  li Second
  li Third

This represents an unordered list containing three list items.

Nesting

Indentation determines the parent-child relationship.

article
  h1 A Jade article
  p This paragraph belongs to the article.

Classes

Use a dot to add a class.

button.primary Save

IDs

Use # to add an ID.

main#content

Combining shorthand

Classes and IDs can be combined with a tag.

a.button#signup Sign up

Div shorthand

A div is so common that you can omit the tag name when using a class or ID.

.container
  #content
    p Hello

Self-closing elements

Elements such as img, input, meta, and link are rendered according to the active document type.