!!!
%html(lang="ja")
%head
%title Haml test
%meta(charset="UTF-8")
%body
%h1 Hello World
%p
%a(href="http://www.google.com") LinkText
上記Hamlをコンパイルすると下記HTMLに出力されます。
<!DOCTYPE html>
<html lang='ja'>
<head>
<title>Haml test</title>
<meta charset='UTF-8'>
</head>
<body>
<h1>Hello World</h1>
<p>
<a href="http://www.google.com" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.google.com']);">LinkText</a>
</p>
</body>
</html>
順を追って説明します。
文書宣言
!!!
!3個以上記述でHTML5のDoctype宣言を出力します。
テキストの記述
%title Haml test
%でタグ名を記述し、半角スペース一つ開けて中のテキストを記述できます。
属性値の記述
%meta(charset="UTF-8")
スペースを開けず()でHTML同様の属性値を記述できます。
入れ子構造
%p
%a(href="http://www.google.com") LinkText
入れ子構造はインデントで行われます。
