Skip to content

Instantly share code, notes, and snippets.

@fnhipster
Created April 9, 2011 01:19
Show Gist options
  • Star 69 You must be signed in to star a gist
  • Fork 25 You must be signed in to fork a gist
  • Save fnhipster/911009 to your computer and use it in GitHub Desktop.
Save fnhipster/911009 to your computer and use it in GitHub Desktop.
HTML5 HAML Template
!!! 5
%html
%head
%title= "Your Website"
%meta{ :content => "", :name => "description" }
%meta{ :content => "", :name => "author" }
%meta{ :content => "3 days", :name => "revisit-after" }
%link{ :href => "http://creativecommons.org/licenses/by/3.0/", :rel => "license", :title => "Creative Commons Attribution 3.0 Unported License" }
%link{ :href => "/feed", :rel => "alternate", :title => "Atom", :type => "application/atom+xml" }
%link{ :href => "/css/screen.css", :media => "screen", :rel => "stylesheet" }
%body
%header
%nav
%ul
%li= "Menu Item"
%section
%article
%header
%h2= "Article Title"
%p
Posted on
%time{ :datetime => "2009-09-04T16:31:24+02:00" }= "September 4th 2009"
by
%a{ :href => "#" }= "Author Name"
-
%a{ :href => "#" }= "6 comments"
%article
%p
It doesn't look so shiny to me. I just want to talk. It has nothing to do
with mating. Fry, that doesn't make sense. Why would I want to know that?
%p
They're like sex, except I'm having them! You seem malnourished. Are
you suffering from intestinal parasites? Yeah. Give a little credit
to our public schools.
%aside
%h2= "The Sidebar"
%p
Michelle, I don't regret this, but I both rue and lament it. Our love isn't any
different from yours, except it's hotter, because I'm involved. Bender, quit
destroying the universe! Robot 1-X, save my friends! And Zoidberg!
%footer
%p
Copyright 2011 My Name
@darylf
Copy link

darylf commented Jan 24, 2012

Typo on line 23. Should read "posted"

@fnhipster
Copy link
Author

Fixed. Thanks!

@darylf
Copy link

darylf commented Jan 24, 2012

LOL, didn't mean to be picky. Just noticed it after using on my own project.
Great response time! =)

@acconrad
Copy link

Totally random, but you show up #2 on Google for "haml html5" so I thought I'd offer a few more optimizations for your template - with a corresponding fork you can take a peak at:

  • You can remove the 5 in line 1 if your format is html5 (source)
  • The lang attribute is no longer necessary (source)
  • Empty start tags html, head, and body are optional and can be safely removed (source)
  • Line 5 should be broken out into two lines: %meta{ :http_equiv => "X-UA-Compatible", :content => "IE=edge,chrome=1" } and %meta{ :charset => "UTF-8" } (source)
  • Line 11 can be optimized to read %link{ :href => "/css/screen.css", :media => "screen", :rel => "stylesheet" } (source)

@fnhipster
Copy link
Author

Thanks!

@tstuderTopic
Copy link

I am just picking up haml. Thank You for putting this together!

@dideler
Copy link

dideler commented Jan 21, 2014

Line 4: According to the docs, you can write %title Your Website.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment