Is it considered bad practise to use HTML in Jade?

Jade looks like a cool templating engine and I think I'll be using it for my next project. However, some of the syntax doesn't make sense to me.

What do you get by doing this:

ul
  li
    a(href="#book-a") Book A

instead of:

<ul>
  <li><a href="#book-a">Book A</a></li>
</ul>

I understand you save some typing, but it seems less readable to me. I noticed on Jade's live demo that regular html passes right through the translation. So would it be considered bad practise to do something like this:

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

UPDATE: Links to the references working again. If you visit the official project's site, search for the "Plain Text" section.

Background

Actually jade syntax allows plain HTML (or any other plain text) through the "pipe" or the "dot" syntaxes, as you can see in the reference on the project's site and the reference on its github repo.

dot syntax

ul.
  <li><a href="#book-a">Book A</a></li>
  <li><a href="#book-b">Book B</a></li>

pipe syntax

ul
  | <li><a href="#book-a">Book A</a></li>
  | <li><a href="#book-b">Book B</a></li>

tag syntax, "Simply place some content after the tag", can also do the trick

ul
  li <a href="#book-a">Book A</a>

which will render

<ul><li><a href="#book-a">Book A</a></li></ul>

The Question

Back to your question, your sample

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

could be written as simple as

.someClass
  h3= book.name

Which is a lot more readable I think, so in that case you should consider a bad practice writing raw HTML, but not always.

IMO

IMO, common sense is the best good practice. Maybe i would consider using a raw chunk of HTML to insert a widget on the page, i.e. a youtube video or a custom google map <iframe>.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>

As said above, here doesn't makes sense to use the attribute syntax. The result is nearly the same, and is quicker leaving the raw html.

iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed")

iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)

Jade now provides inline syntax for nested tags:

a: img

turns into

<a><img/></a>

Taken from the official documentation.