HTML to HAML Converter

Convert HTML markup to HAML template syntax — no closing tags, indentation-based nesting.

HTML Input

or drop a file here

HAML Output

!!!
    %meta{ charset: "UTF-8" }
    %title
      My Page
    #wrapper.container.main
      %h1.title
        Hello World
      %p.lead
        Welcome to HAML.
      %a.btn.btn-primary{ href: "/about" }
        Learn more

What is HAML and how does conversion work?

HAML (HTML Abstraction Markup Language) is an indentation-based template language popular in Ruby on Rails applications. It replaces verbose HTML with concise shorthand: %div for a div, #id for IDs, .class for classes, and no closing tags — indentation defines nesting. This converter handles the most common patterns including nested elements, attributes, IDs, and classes.

For Node.js templates, try the HTML to Pug Converter. For JSX/React, use HTML to JSX.

Built and maintained by Meet Shah · Last updated 9 August 2026

What this tool is used for

Migrating a template from HTML into HAML.
Converting designer markup into the syntax a Rails project uses.
Learning HAML's shorthand by seeing your own markup translated.
Producing a starting template you then add Ruby interpolation to.
Converting a Rails partial into the syntax the rest of the views use.

Frequently Asked Questions

What is Haml's core idea?: Indentation replaces closing tags entirely, and CSS-style selectors replace attributes: %div.card becomes <div class="card">, and .card alone implies a div. Nesting is expressed purely by whitespace.
Which ecosystem is it from?: Ruby, and Rails in particular — it predates most alternatives and remains common there. That heritage shows in the syntax, which embeds Ruby expressions with = and runs statements with -.
How is inline content handled?: This is Haml's known weak point. Long inline text with nested tags becomes awkward, and the succeed/precede helpers exist specifically to control whitespace around inline elements — a common source of frustration.
Does conversion preserve whitespace exactly?: Not always, and it matters for inline elements where a space between tags is significant. Haml offers whitespace-removal operators (> and <) precisely because indentation-based templates cannot express spacing implicitly.
Should I use Haml for a new project?: Only in a Ruby codebase that already does. Rails' default is ERB, and outside Ruby there is little tooling. The indentation approach also fights against IDE support and against pasting plain HTML from designers.
What does Haml do about whitespace-sensitive elements?: It provides the `~` operator and `preserve` helper, because Haml's own indentation would otherwise be inserted into a `<pre>` block. Converting such content without them changes what the page displays.

Common errors and gotchas

Losing significant whitespace between inline elements, which HAML handles differently and visibly.
Mixing tabs and spaces, which HAML rejects rather than tolerating.
Converting markup containing ERB, which HAML treats as text rather than code.
Assuming attribute syntax converts cleanly, since HAML offers two forms with different rules.
Expecting indentation to be flexible, when one space changes the structure.