Haml Walkthrough: HTML
We’re not going to go through the HTML to Haml conversion in as much detail as the previous ERB one. We just want to see how the stylistic changes can also be applied to a static site.
| haml/haml_h1.html | |
| | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 |
| | Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ |
| | xhtml1-transitional.dtd"> |
| | <html xmlns="http://www.w3.org/1999/xhtml" |
| | xml:lang="en"> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; |
| | charset=UTF-8" /> |
| | <title><%= @title || “Awesome Site” %></title> |
| | </head> |
| | <body> |
| | <div id='wrapper'> |
| | <div id='header'> |
| | <h1>Awesome Site</h1> |
| | </div> |
| | <div id='content'> |
| | <%= yield %> |
| | </div> |
| | <div id='footer'> |
| | <small>Copyright Hampton Catlin</small> |
| | </div> |
| | </div> |
| | </body> |
| | </html> |
Pretty standard stuff. In this example (à la Rails), the yield part is where we print out the page-specific contents. Let’s convert it the way that we know how so far.
Note: Try doing these next few steps along with us. Grab one of your sites, throw it into a tmp file and start hacking away at it. We promise it feels great!
First thing’s first: rip out those pesky end tags!
| haml/haml_h2.html | |
| | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 |
| | Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ |
| | xhtml1-transitional.dtd"> |
| | <html xmlns="http://www.w3.org/1999/xhtml" |
| | xml:lang="en"> |
| | <head> |
| | <meta http-equiv="Content-Type" content="text/html; |
| | charset=UTF-8" /> |
| | <title><%= @title || “Awesome Site” %> |
| | <body> |
| | <div id='wrapper'> |
| | <div id='header'> |
| | <h1>Awesome Site |
| | <div id='content'> |
| | <%= yield %> |
| | <div id='footer'> |
| | <small>Copyright Hampton Catlin |
Much neater. Let’s Hamlize it even more! We’ll go ahead and get rid of the <div> tags too. No sense in wasting our time.
Note: For the HTML tag, we have to use the old-school hashrocket syntax for Ruby attributes. Why? Because the JSON-style attributes don’t let you have dashes in them. Stupid Ruby hashes.
| haml/haml_h3.html | |
| | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 |
| | Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ |
| | xhtml1-transitional.dtd"> |
| | %html{'xmlns' => "http://www.w3.org/1999/xhtml", |
| | 'xml:lang' => "en"} |
| | %head |
| | <meta http-equiv="Content-Type" content="text/html; |
| | charset=UTF-8" /> |
| | %title= @title || “Awesome Site” |
| | %body |
| | #wrapper |
| | #header |
| | %h1 Awesome Site |
| | #content= yield |
| | #footer |
| | %small Copyright Hampton Catlin |
A few things to notice: when the contents aren’t dynamic, you can just put them after the tag name. For instance: %small Copyright Hampton Catlin. No equals sign means it’s not going to evaluate it: it’s just static text.
Also, we left the meta tag alone. It’s ugly and will remain ugly. Converting it to a Haml tag achieves nothing. So normally we have to leave that, but for your reference, here is how to do a self-closing tag like that.
| | %meta{“http-equiv” => "Content-Type", “content” => |
| | "text/html; charset=UTF-8"}/ |
We just put a / on the end, and the tag knows to self-close. So if we wanted to write <br/>, we can write %br/ instead.
We still have one really ugly thing left on this page—the DOCTYPE! Ugh. How many people just copy and paste from one project to another? We definitely do! So in Haml, we have a lovely little helper (named after one of our favorite bands) called !!! that does the job for us.
| haml/haml_h4.html | |
| | !!! |
| | %html{'xmlns' => "http://www.w3.org/1999/xhtml", |
| | 'xml:lang' => "en"} |
| | %head |
| | <meta http-equiv="Content-Type" content="text/html; |
| | charset=UTF-8" /> |
| | %title= @title || “Awesome Site” |
| | %body |
| | #wrapper |
| | #header |
| | %h1 Awesome Site |
| | #content= yield |
| | #footer |
| | %small Copyright Hampton Catlin |
Voilà. No more ugly DOCTYPE line. If you want a specific output type, you can always reference the Haml documentation for a complete list of variations.[21]
One more thing: comments. Just as with regular programming, good commenting is almost always a good idea. If we want to do a nonprinting comment (i.e., something that we’re only saying internally), then we can just do the following:
| | -# This comment won’t print |
Basically, the - means it’s a nonprinting Ruby line, and the # is the standard Ruby form for comments. So it’s just a little hack to do nonprinting comments.
What if you want real HTML comments? OK!
| | / This is an HTML comment |
This compiles to:
| | <!-- This is an HTML comment --> |
Footnotes
| [18] |
http://haml-lang.com/ and http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html, respectively. |
| [19] | |
| [20] |
However, we’re still of the belief that using two spaces is far superior and should be used in Haml. We were convinced by an article by Jamie Zawinski that we strongly suggest you read: http://www.jwz.org/doc/tabs-vs-spaces.html |
| [21] |