Here are examples of SHPAML. You may want to try the tutorial after reading this.

Write SHPAML... ...and convert to HTML
(or templating language) 		Get desired result! 
p.greeting | Hello World!

.content
    p#message1
        Goodbye Angle Brackets!
    p#message2
        Goodbye Close Tags!

<p class="greeting">Hello World!</p>

<div class="content">
    <p id="message1">
        Goodbye Angle Brackets!
    </p>
    <p id="message2">
        Goodbye Close Tags!
    </p>
</div>

Hello World!

Goodbye Angle Brackets!

Goodbye Close Tags! 

.section
    h5 | Table Example
    .prices
        table border="1"
          tr
            th | Item
            th | Cost
          tr
            td | Orange
            td | 0.75
          tr
            td | New car
            td | 20,000
          tr
            td | DRY Markup
            td style="color: green" | priceless 

    h5 | List Example
    .list_example
        ol
            li | One
            li | Two
            li
                .longer_ordinal_description
                    This is the
                    third item

<div class="section">
    <h5>Table Example</h5>
    <div class="prices">
        <table border="1">
          <tr>
            <th>Item</th>
            <th>Cost</th>
          </tr>
          <tr>
            <td>Orange</td>
            <td>0.75</td>
          </tr>
          <tr>
            <td>New car</td>
            <td>20,000</td>
          </tr>
          <tr>
            <td>DRY Markup</td>
            <td style="color: green">priceless</td>
          </tr>
        </table>
    </div>

    <h5>List Example</h5>
    <div class="list_example">
        <ol>
            <li>One</li>
            <li>Two</li>
            <li>
                <div class="longer_ordinal_description">
                    This is the
                    third item
                </div>
            </li>
        </ol>
    </div>
</div>
Table Example
Item Cost
Orange 0.75
New car 20,000
DRY Markup priceless
List Example
  1. One
  2. Two
  3. This is the third item 
<body>
    <p>
        You can still embed <b>HTML</b> as needed
        inside your SHPAML markup.
        | Prefix lines with a pipe if you want to
        | be explicit about where your content lies
        | to both yourself and SHPAML.
    </p>
    <div>
        You can also use raw HTML with block
        tags as shown here.
    </div>
    pre
        || If you want your text to be dedented in
        ||    in the output, then you can use
        ||       the double pipe syntax shown
        ||           here.
</body>

<body>
    <p>
        You can still embed <b>HTML</b> as needed
        inside your SHPAML markup.
        Prefix lines with a pipe if you want to
        be explicit about where your content lies
        to both yourself and SHPAML.
    </p>
    <div>
        You can also use raw HTML with block
        tags as shown here.
    </div>
    <pre>
If you want your text to be dedented in
   in the output, then you can use
      the double pipe syntax shown
          here.
    </pre>
</body>

You can still embed HTML as needed inside your SHPAML markup. Prefix lines with a pipe if you want to be explicit about where your content lies to both yourself and SHPAML.

You can also use raw HTML with block tags as shown here. 
If you want your text to be dedented in
   in the output, then you can use
      the double pipe syntax shown
          here.
    
For singleton tags like input and br, you might find it
most simple to just use raw HTML.
<br />
<br />

.main
    form method="POST"
        label for="id_description" | Comment:
        <br />
        <input type="text" value="example only" />
        <input type="submit" />

.alternative
    p
        But you can also use this shortcut.
        > hr

For singleton tags like input and br, you might find it
most simple to just use raw HTML.
<br />
<br />

<div class="main">
    <form method="POST">
        <label for="id_description">Comment:</label>
        <br />
        <input type="text" value="example only" />
        <input type="submit" />
    </form>
</div>

<div class="alternative">
    <p>
        But you can also use this shortcut.
        <hr />
    </p>
</div>
For singleton tags like input and br, you might find it most simple to just use raw HTML.


But you can also use this shortcut. 

see also:
a href="http://haml-lang.com/" | HAML

see also:
<a href="http://haml-lang.com/">HAML</a>
see also: HAML 
books
    book title="Design Patterns"
        authors
            author | Erich Gamma
            author | Richard Helm
            author | Ralph Johnson
            author | John M. Vlissides
    book title="An Introduction to Python"
        authors
            author | Guido van Rossum
            author | Fred L. Drake
    book title="War and Peace"
        authors
            author | Leo Tolstoy

<books>
    <book title="Design Patterns">
        <authors>
            <author>Erich Gamma</author>
            <author>Richard Helm</author>
            <author>Ralph Johnson</author>
            <author>John M. Vlissides</author>
        </authors>
    </book>
    <book title="An Introduction to Python">
        <authors>
            <author>Guido van Rossum</author>
            <author>Fred L. Drake</author>
        </authors>
    </book>
    <book title="War and Peace">
        <authors>
            <author>Leo Tolstoy</author>
        </authors>
    </book>
</books>
You can even render XML with SHPAML.