Hello,
I slice designs into Drupal themes. I'm exploring the use of HTML 5 markup in Drupal themes.
If I'm not mistaken, all blocks (and boxes) are to be tagged as sections and all nodes are to be tagged as articles for semantically accurate markup. Titles, content, meta and links can be sections within an article.
I've pasted generic block and node tpl.php files along with an HTML 5 version of the same:
Default block.tpl.php
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
<?php if (!empty($block->subject)): ?>
<h2><?php print $block->subject ?></h2>
<?php endif;?>
<div class="content"><?php print $block->content ?></div>
</div>HTML 5 version of block.tpl.php
<section id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?>">
<?php if (!empty($block->subject)): ?>
<h2><?php print $block->subject ?></h2>
<?php endif;?>
<section class="content"><?php print $block->content ?></section>
</section>Default node.tpl.php
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print $submitted; ?></span>
<?php endif; ?>
<div class="content clear-block">
<?php print $content ?>
</div>
<div class="clear-block">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php print $links; ?></div>
<?php endif; ?>
</div>
</div>HTML 5 version of node.tpl.php:
<article id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<figure><?php print $picture ?></figure>
<?php if ($page == 0): ?>
<header><h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2></header>
<?php endif; ?>
<?php if ($submitted): ?>
<time class="submitted"><?php print $submitted; ?></time>
<?php endif; ?>
<section class="content clear-block">
<?php print $content ?>
</section>
<div class="clear-block">
<section class="meta">
<?php if ($taxonomy): ?>
<section class="terms"><?php print $terms ?></section>
<?php endif;?>
</section>
<?php if ($links): ?>
<section class="links"><?php print $links; ?></section>
<?php endif; ?>
</div>
</article>Is the above HTML 5 code semantically accurate?
Are there improvements that can be made?
Edit:
I added <figure> tags to the image and <time> tags to the date in the node.tpl.php snippet.
In HTML 5, articles are meant to have their titles wrapped in <header> tags and I have updated the node.tpl.php file to show the same.
I've implemented the above code in a XHTML Drupal theme that I've converted to HTML5:
http://drupal.org/project/drixel5