How to use HAML


HAML structure is really easy to understand. It attempts to strip out as much of the annoying HTML repetition as possible. For example to write paragraph tag you could use:

%p This is HTML paragraph.

HAML will convert that to:

<p>This is HTML paragraph</p>

As you noticed HAML converts keyword after "%" to HAML tag. Like Python HAML code depends on white space. So when you are writing long lines HAML will close the code when the same level of white space is reached. For example:

        This is HTML paragraph
        with multiple lines inside.

And the result would be:

<p>This is HTML paragraph with multiple lines inside.</p>

HTML tag attributes

You can also pass more attributes to the tag you want:

.banners(id="top-banner", title="Your ad here") Your text here

Will be rendered like this:

<div id="top-banner" class="banners" title="Your ad here">Your text here</div>

HTML doctypes

All HTML documents starts with doctypes. You could easily write one using:


To render:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">


!!! frameset

The result would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "">

Or even:

!!! strict

To receive:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

Homepage  |  About HAML  |  HAML usage examples

Sponsored by:   UptimeTea Websites Monitoring   ·   HeroTofu Forms Backend   ·   SerpWall Competitors Bidding Monitoring   ·   StatsGlitch Google Analytics Alerts

© Haml Online Converter 2012 - 2023. All rights reserved.