Creating text content

As seen in some of the examples, adding text to a tag is just about putting it right after a tag:

Jade	HTML
div Here goes some text	<div>Here goes some text</div>
p One-line paragraph	<p>One-line paragraph</p>
button Click Me	<button>Click Me</button>

The preceding method works very well for single-line text, but it cannot handle multiline text. So how do we write multiline text?

There are two ways of handling this: text blocks defined using the bar notation and the dot notation.

The bar notation uses the vertical bar character (|) to mark the contents of a text block. The text block should be indented within the containing tag:

Jade	HTML
p | one two | buckle my shoe	<p> one two buckle my shoe </p>
pre | step 1 | step 2 | step 3	<pre>step 1 step 2 step 3</pre>

Text blocks can also be used seamlessly with other nested elements, as shown in the following...