%div#all-headings.element
  %h2.element-title
    %a{:href => "http://developers.whatwg.org/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"} The h1, h2, h3, h4, h5, and h6 elements
  %p
    These elements
    %a{:href => "http://developers.whatwg.org/sections.html#represents", :title => "represents"} represent
    headings for their sections.
  %p
    The semantics and meaning of these elements are defined in the section on
    = succeed "." do
      %a{:href => "http://developers.whatwg.org/sections.html#headings-and-sections"} headings and sections
  %p These two snippets are equivalent in the outline:
  .markup
    %h1 Let's call it a draw(ing surface)
    %h2 Diving in
    %h2 Simple shapes
    %h2 Canvas coordinates
    %h3 Canvas coordinates diagram
    %h2 Paths
  .markup
    %h1 Let's call it a draw(ing surface)
    %section
      %h1 Diving in
    %section
      %h1 Simple shapes
    %section
      %h1 Canvas coordinates
      %section
        %h1 Canvas coordinates diagram
    %section
      %h1 Paths