HTML5 Templates for Perch

As the solution for using HTML5 with Perch shows, Perch can easily be used to manage content on an HTML5 site as you have complete control of your mark-up. For those of you working in HTML5 we’ve created a set of default templates for Perch which are a direct replacement for the existing templates (found in /perch/templates/content) and can simply be dropped in and used or edited.

Download the templates.

There is also a replacement example index.php, which uses the HTML5 boilerplate found on the HTML5 Doctor website.

The existing Perch default templates will validate as HTML5 if you simply switch your doctype, however they don’t take advantage of new semantic elements introduced in HTML5.

Changes to the templates include:

article.html

This template now uses the new semantic article, header and footer elements. I have also used HTML5 Microdata in place of the microformats used in the default template.

<article>
  <header>
    <h2><perch:content id="heading" type="text" label="Heading" 
required="true" title="true" /></h2>
    <time pubdate datetime="<perch:content id="date" type="date" 
label="Date" format="%Y-%m-%d" required="true" />">
    <perch:content id="date" type="date" label="Date" 
format="%d %B %Y" /></time>
  </header>
  <perch:content id="body" type="textarea" label="Body" textile="true" editor="markitup" 
required="true" />
  <footer>	
    <p>&copy; <perch:content id="date" type="date" label="Date" format="Y" /></p>
    <div itemtype="http://microformats.org/profile/hcard" itemscope>
    <div itemscope itemprop="n">
      <span itemprop="given-name"><perch:content id="author_given_name" 
type="text" label="Author given name" /></span> 
      <span itemprop="family-name">
      <perch:content id="author_family_name" type="text" 
label="Author family name" /></span>
    </div>  
    </div>
</footer>
</article>

image.html

Uses the HTML5 figure and figcaption elements.

<figure>
  <img src="<perch:content type="image" id="image" label="Image" />" alt="<perch:content type="text"
 id="alt" label="Description" required="true" 
help="Alternate text (for users who do not see the image)" title="true" />" />
  <perch:if exists="caption">
  <figcaption><perch:content type="text" id="caption" label="Caption" required="false" 
help="e.g. Photo of MD John Smith with his best wig on" title="true" /></figcaption>
  </perch:if>
</figure>

contact.html

Now uses HTML5 Microdata instead of microformats.

<div itemtype="http://microformats.org/profile/hcard" itemscope>
  <div itemscope itemprop="n">
  <perch:if exists="url">
    <a href="<perch:content id="url" type="url" label="Website" 
order="4" />" itemprop="url">
  </perch:if>
  <span itemprop="given-name">
    <perch:content id="given-name" type="text" label="Given name" 
order="1" title="true" />
  </span>
  <perch:if exists="additional-name">
    <span itemprop="additional-name">
      <perch:content id="additional-name" type="text" 
label="Addtional name" order="2" />
    </span>
  </perch:if>
  <span itemprop="family-name">
    <perch:content id="family-name" type="text" label="Family name" order="3" title="true" />
  </span>
  <perch:if exists="url"></a></perch:if>
  <perch:if exists="role">
  - <span itemprop="role">
    <perch:content type="select" id="role" label="Role" options="Developer, Manager, Publisher" 
allowempty="true" />
    </span>
  </perch:if>
  </div>
</div>

You can, of course, continue to use microformats in your HTML5 pages, so you may choose to use a combination of HTML5 semantic elements and microformats. Again, this is perfectly valid. For more information read Extending HTML5 – Microdata, on the HTML5 Doctor website.