[HTML & CSS General] Haml: </img> や </br> はインデントの間違いだった
タイトルで言い切っていますが、はまったので 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)