Skip to Content

Class/ID names based on HTML5 and hAtom microformat

09 Apr 2009

My first, rough draft of a semantic HTML framework for an average webpage with banner area, content area, comment, sidebars and footer region. It uses class names suggested from HTML5 elements, and also builds in those required by the hAtom0.1 microformat. I’m using my own, unique(!) syntax — each line describing no more than one HTML element.

div .section .global #header-region
  div .header
    h1 "Website title"
    h2 "Website strapline"
    div .nav

div .section .local .hfeed
  div .article .hentry #article-ID
    div .header
      h1 .entry-title "Main article title"
    div .section .entry-summary
      p "Main article summary"
    div .section .entry-content
      p "Main article content"
      p "Main article content"
      p "Main article content"
      p "Main article content"
      p "Main article content"
    div .footer .entry-meta
      span .author .vcard
        a .url .fn .n "Author name"
      abbr .published title=’yyyy-mm-ddThh:mm:ss+0000’ "Date Published"
      p "Filed under:"
        a rel=tag "tag 1"
        a rel=tag "tag 1"
        a rel=tag "tag 1"

    div .section .comments .hfeed #comments-ID
    h2 "Comments"
      div .article .comment .hentry
        div .header
          h3
            a .bookmark .entry-title #comment-ID "Comment title (permalink)"
        div .section .entry-content
          p "Text of comment"
        div .footer
          span .author .vcard
            a .url .fn .n "Author name"
          abbr .published title=’yyyy-mm-ddThh:mm:ss+0000’ "Date Published"

div .section .global #sidebar-0
  div .aside
    div .nav
    etc
  div .aside
    div .nav
    etc
  div .aside
    etc

div .section .global #sidebar-1
  div .aside
    div .nav
    etc
  div .aside
    etc

div .section .global #footer-region
  div .aside
    div .nav
  div .footer
    "Copyright notices, etc."

Mark

Friday, 10 Apr 2009, 8:27

Just tried setting this out in HTML lists rather than indented code, and I think I’ve found the limits of what a human being can do with HTML. Will get Markdown installed here before I try that again :S