What is a vertical bar in jade? : <p>To convert HTML to jade is use this <a href="http://html2jade.aaron-powell.com/" rel="noreferrer">jade converter</a>.</p>

<p>When I enter the following HTML,</p>

<pre><code>&lt;!doctype html&gt;
&lt;html class="no-js"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="header"&gt;
        &lt;ul class="nav nav-pills pull-right"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>the output is as follows:</p>

<pre><code>doctype html.no-js
head
    meta(charset='utf-8')
  |   
  body
    .container
      .header
        ul.nav.nav-pills.pull-right
          li.active
            a(href='#') Home
          |           
          li
            a(href='#') About
          |           
          li
            a(href='#') Contact
</code></pre>

<p>What is the purpose of the vertical bars (<code>|</code>) ?</p>
