HTML5 and Wordpress: theme design

I'm currently planning to run a couple of extended tests on Wordpress themes using my local web server to build my own themes and run them on a testing site. Today I realized that much of my efforts should be put in creating brand new HTML5 themes for Wordpress. This just after working on a client's web site that makes use of an HTML5-compliant theme which really impressed me for its final design and flexibility. However, there are some potential problems that I'd like to discuss with you. As always, if someone has found a good solution to one of these problems, please let me know.

Minor changes to theme design

Minor changes to theme design include, among others:

  1. DOCTYPE switch in the header component
  2. Changing the meta tag used for content type to <meta charset="encoding" /> in the header component
  3. Using the footer element instead of a div in the footer component
  4. Using section elements instead of divs for the main components of a page
  5. Using the article element for marking up posts
  6. Using the header element instead of a div for marking up the branding section of the web site
  7. Using the header element inside each post, which will contain the post title and the date
  8. Using the time element instead of small for marking up a post date (support completely lacking at the time of this writing)
  9. Using the aside element for the sidebar
  10. Using the nav element for marking up a list of pages
  11. Using a footer element inside each post to markup the post metadata.

A basic skeleton would be the following:

<!DOCTYPE html>
<html>
<head>
<title>...</title>
<meta charset="utf-8" />
<!-- <link/> <script/> here-->
</head>
<body>
<section id="wrapper">

    <header id="branding">
      <h1></h1>
      <div class="description"></div>
    </header>
    <nav id="pages"></nav>
    
    <section id="content">
    
        <section id="main">
        
            <article>
            
              <header>
               <h2>...</h2>
               <time datetime="2011-02-27" pubdate="pubdate">...</time>
              </header>
              
              <!-- post content -->
              
              <footer>
               <!-- metadata -->
              </footer>
            
            </article>
            
            <!--more posts-->
        
        </section>
        
        <aside id="sidebar">
        
          <!--categories, widgets, etc. here-->
        
        </aside>
    
    </section>
    
    <footer id="site-info">
    
      <!-- footer info here -->
    
    </footer>
    

</section>
</body>
</html>

I think we should refine the HTML5 semantics of the above code by trying to find more appropriate elements for:

  1. post metadata
  2. site description

CSS support for HTML5 is still lacking of a default style sheet shared among browser. The best thing we can do is to apply some global styles at the beginning of our main CSS file:

article, aside, footer, header, nav, section, time {
 display: block;
}

For IE 8 and lower there is the excellent script by Remy Sharp.

Major changes to theme design

Our theme is not an island, but works together with other Wordpress features to get the final result of a fully working web site. We have to bear in mind that other components, such as widgets and plugins, may not work well with an HTML5 theme. I'm not saying that an HTML5 theme will break Wordpress. Far from it. The thing is that most plugins and widgets use XHTML, and this might cause some compatibility problems when it comes to markup validation.

HTML5 has no DTD, but this doesn't imply that everything is allowed within an HTML5 document. For example, the acronym element is obsolete in HTML5 and you should always use the abbr element instead. Certain elements, e.g. flow elements, allow only a well-defined set of elements to be their children. For example, the following is an error in HTML5:

<hgroup>
  <p></p>
</hgroup>

A paragraph can't be contained within an hgroup element, nor a div. Now imagine what would happen if you've just pasted a plugin placeholder which makes use of divs in its markup within the aforementioned HTML5 element. Your markup will be invalid.

The fact is that most of the coolest Wordpress plugins and widgets still use XHTML for markup. This is not a problem per se, because valid XHTML is also valid HTML5, but it might be a problem when the differences mentioned above clash together, thus resulting in invalid pages.

2 thoughts on “HTML5 and Wordpress: theme design”

  1. I'm not sure the aside tag is actually appropriately used for a sidebar. I'm 99% certain that the intent of this tag is more in line with its dictionary meaning (http://en.wiktionary.org/wiki/aside) and that it should be used for noting additional content that is only somewhat related to its context (parent or sibling tags). See: http://www.w3schools.com/html5/tag_aside.asp for an example.

Leave a Reply

Note: Only a member of this blog may post a comment.