basic.haml

Basic text.

%h1 Hey, this is in an h1

%p The following line is a paragraph consisting of a single instance variable: @text
%p= @text

%p If you want to embed code/Ruby in the middle of a line, you need ==.
%p== Like for example, this: #{@my_var}

%p To add attributes, use {}
%p{:style => "color:red"} Using CSS I made this paragraph red! (p.s. inline styles are bad)

%p You'll want to apply classes and ids to your DOM, too.
%p.foo This has the Foo class
%p#cat This has the Cat id
%p.foo#cat Of course you can do both!

%p Regarding nesting, you can do this...
%p
  Or you can do this
/ 
  %p But you can't do
    this!  Because you can't nest "underneath" while having content on the same line as the original tag.

basic.html

Basic text.
<h1>Hey, this is in an h1</h1>
<p>The following line is a paragraph consisting of a single instance variable: @text</p>
<p></p>
<p>If you want to embed code/Ruby in the middle of a line, you need ==.</p>
<p>Like for example, this:</p>
<p>To add attributes, use {}</p>
<p style='color:red'>Using CSS I made this paragraph red! (p.s. inline styles are bad)</p>
<p>You'll want to apply classes and ids to your DOM, too.</p>
<p class='foo'>This has the Foo class</p>
<p id='cat'>This has the Cat id</p>
<p class='foo' id='cat'>Of course you can do both!</p>
<p>Regarding nesting, you can do this...</p>
<p>
  Or you can do this
</p>
<!--
  [this code would have generated an error]
-->