[HTML & CSS General] Haml: や
はインデントの間違いだった

タイトルで言い切っていますが、はまったので memo.

状況

元の html はこんな形。
つまりコンパイル後の html としては、これが欲しい。

<img src="https://placeimg.com/72/72/people" alt="写真 サムネイル" class="thumbnails">
<p><span class="label label-default">NEW</span> 【カテゴリー】</p>
<p><a href="">親譲りの無鉄砲で小供の時から損ばかりしている。</a> datetime</p>

html を haml に変換するサービスで一括置換してみました。

%img.thumbnails{:alt => "写真 サムネイル", :src => "https://placeimg.com/72/72/people"}
  %p
    %span.label.label-default NEW
    【カテゴリー】
  %p
    %a{:href => ""} 親譲りの無鉄砲で小供の時から損ばかりしている。
    datetime

チェック

haml ファイルをコンパイルすると、htmllint で以下のように怒られました。

[L102:C15] Tag must be paired, No start tag: [ </img> ]

生成された html を確認すると、こんなことに。

<img alt="写真 サムネイル" class="thumbnails" src="https://placeimg.com/72/72/people">
  <p>
    <span class="label label-default">NEW</span>
    【カテゴリー】
  </p>
  <p>
    <a href="">親譲りの無鉄砲で小供の時から損ばかりしている。</a>
    datetime
  </p>
</img>

対処

よくよくソースを見ると、%p タグの前に不要なインデントが入っていたので修正します。
あたりまえちゃ、あたりまえなのですが。

%img.thumbnails{:alt => "写真 サムネイル", :src => "https://placeimg.com/72/72/people"}
%p
  %span.label.label-default NEW
  【カテゴリー】
%p
  %a{:href => ""} 親譲りの無鉄砲で小供の時から損ばかりしている。
  datetime

信頼性の高い変換ツールをご存じの方いましたら教えてください。

追記(2015/11/13)