HAML to HTML

Convert HAML templates to HTML — tags, classes, IDs, attribute hashes, nesting, and doctypes.

HAML Input

or drop a file here

HTML Output

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1 id="main" class="hero">Hello, HAML!</h1>
    <p class="intro">This is a paragraph.</p>
    <ul>
      <li>First item</li>
      <li>Second item</li>
    </ul>
    <input type="text" placeholder="Enter text" />
    <br />
  </body>
</html>

What is HAML?

HAML (HTML Abstraction Markup Language) is a Ruby-ecosystem template language that uses indentation instead of closing tags. Popular in Ruby on Rails apps, it eliminates boilerplate: %h1.title Hello maps to <h1 class="title">Hello</h1>. This converter handles common HAML — tags, classes, IDs, attribute hashes, self-closing tags, and doctypes. Ruby expressions (= and -) are shown as HTML comments since they require server evaluation.

Built and maintained by Meet Shah · Last updated 28 July 2026

What this tool is used for

Understanding an existing HAML template by seeing the markup it produces.
Migrating a Ruby view off HAML onto plain templates.
Debugging nesting in a HAML file where indentation has gone wrong.
Converting a snippet from a tutorial into ordinary HTML.
Checking what attributes a HAML shorthand actually generates.

Frequently Asked Questions

What is HAML?: An indentation-based templating language for Ruby, designed to remove closing tags entirely — nesting is expressed by whitespace, so the structure is visible in the shape of the file. `%h1` is an h1 element and its children are simply indented under it.
How are classes and IDs written?: With CSS-style shorthand appended to the tag: `%h1.hero#main` is `<h1 class="hero" id="main">`. A bare `.card` with no tag defaults to a div, which is why HAML files contain so few explicit divs.
What does the trailing slash mean?: It marks a self-closing element — `%br/` and `%input{...}/`. HAML cannot infer it from the tag name alone in every case, so the slash is explicit. Omitting it on a void element is the most common HAML syntax error.
What is `!!! 5`?: The doctype declaration, producing `<!DOCTYPE html>`. The number selects the version, and the terse spelling is characteristic of the language — HAML's whole design premise is that boilerplate should be as short as possible without becoming ambiguous.
Is HAML still used?: Mainly in older Rails applications. Newer Ruby projects tend to use ERB or Slim, and the wider industry has moved to component frameworks where markup and logic live together. Conversion to HTML is usually part of migrating away from it.

Common errors and gotchas

Mixing tabs and spaces, which HAML treats as a structural error rather than a style issue.
Assuming Ruby interpolation converts, since it needs the runtime and cannot be resolved statically.
Losing filters such as `:javascript` or `:css`, which need special handling.
Overlooking that a single indentation mistake reparents an entire block.
Expecting helper calls to render, when they are application code rather than markup.