Experiment #2 - Semantic Blog Template - Part 1
I made the decision some time back to overhaul my site templates based on best practice principles of web design. Partly inspired by the classic CSS Zen Garden I wanted to be able to switch stylesheets without needing to change the underlying markup. I also wanted to try and avoid making any conceit to design issues, focusing mainly on the semantic structure of the markup. CSS Zen Garden uses additional "utility" markup in order to aid designers in applying images and other styles. I have no problem with that as CSS Zen Garden was built with the express purpose of demonstrating what could be achieved design-wise using CSS so providing addition markup to use as "hooks" for design elements makes perfect sense.
For this first part I'm going to concentrate on the overall structure of the site pages, in the second part I'll look at the content in more detail and how I can optimise that markup further and finally I'll look at the options available for applying styles to the markup.
Define the page structure
One of the advantages of defining a semantic structure without any thoughts on final layout is that we concentrate on what the content actually is rather than where it will appear - this can guide us into producing contextually coherent pages which can inform the final design.
I began the process by writing a simple indented list of the page contents in terms of conceptual elements:
page
header
logo
navigation
maincontent
primarycontent
secondarycontent
footer
I hold my hands up to making the first web design compromise - the page element is not strictly required but a "wrapper" always helps in styling HTML and I feel that it's semantically forgivable (or at the very least, not entirely incongruous).
The "Header" and "Footer" elements bothered me as they suggest presentational positioning - There's no reason why the footer content couldn't be at the top of the page and the header content on the left hand side. I couldn't think of any more suitable terms for these and a quick browse through a glossary of publishing terminology threw up no better alternatives so the names remain.
Add Details
Now I decided to look in a bit more detail at the contents of each structural area, I spent a while playing about with the structure of the blog post: do the comments belong to the post or are they a separate item? The great thing about working out these problem now are that I just add or delete some spaces rather than shuffle html around or re-jig a design.
I defined a set of secondary content elements based on what I felt was generic sidebar content. This demonstrates to a certain extent how the semantic structure can guide the placement of content items so that they make sense rather than where the design appears to have a convenient gap.
page
header
logo
navigation
maincontent
primarycontent
blog
post
title
date
content
tags
permalink
postcomment
comments
secondarycontent
syndication
profile
links
network
footer
Transform into (X)HTML
Now that I was fairly happy with this basic structure I built the first XHTML draft. At this stage I mainly used div tags to define the elements as generic block-level containers. The exceptions to this were the logo, the permalink and post comment links. The logo I defined as an h1 tag intending to use it for the site title and then use CSS to replace with an image if the design requires it. The permalink and post comment links were obviously going to be anchor tags so I used the appropriate markup for them.
To ensure validation, I took care to use id attributes where an element should only appear once in any page and class elements for items which may appear multiple times e.g. blog posts.
<html>
<head>
<title>Semantic Blog Markup</title>
</head>
<body>
<div id="page">
<div id="header">
<h1 id="logo">Title</h1>
</div>
<div id="navigation"></div>
<div id="maincontent">
<div id="primarycontent">
<div id="blog">
<div class="post">
<h2 class="title"></h2>
<span class="date"></span>
<div class="content"></div>
<div class="tags"></div>
<a class="permalink"></a>
<a class="postcomment"></a>
<div class="comments"></div>
</div>
</div>
</div>
<div id="secondarycontent">
<div id="syndication"></div>
<div id="profile"></div>
<div id="links"></div>
<div id="network"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Re-use existing structures - implement Microformats
Still pondering the hierarchical structure of the blog and it's posts I had a flash of inspiration- I'll see if there are any appropriate microformats which I can use. After all this is an exercise in best practices, why not go the full hog and make it a web standards crusade?
Microformats are definitions within the scope of semantic html which lend further context to page content. They represent standards by which content of a particular type can be recognised and understood by data parsing applications. For instance, using the hCalendar microformat when marking up event details would enable an event aggregator such as upcoming.org to include that event in it's listings without the need to re-enter all of the data, similarly a browser extension might allow the user to add the event to their calendar with a single click.
Whilst browsing the list of microformats, the one which seemed immediately appropriate was hAtom - still in draft but there's no reason not to try it out as it doesn't detract from the goal of semantic markup, if anything it adds another layer of context to the markup. I also found uses for rel-home and the commonly used rel-tag.
So here's the basic structural markup
<html>
<head>
<title>Semantic Blog Markup</title>
</head>
<body>
<div id="page">
<div id="header">
<h1 id="logo"><a href="..." rel="home">Title</a></h1>
</div>
<div id="navigation"></div>
<div id="maincontent">
<div id="primarycontent">
<div class="hfeed" id="blog">
<div class="hentry post">
<h2 class="entry-title">
<a href="..." rel="bookmark">Post Title</a>
</h2>
<span class="date"><abbr class="published" title="YYYY-MM-DDThh:mm:ss+ZZ:ZZ"></abbr></span>
<div class="entry-content"></div>
<div class="tags">
<a href=".." rel="tag">tag</a>
</div>
<a class="permalink" rel="bookmark"></a>
<a class="postcomment"></a>
<div class="comments"></div>
</div>
</div>
</div>
<div id="secondarycontent">
<div id="syndication"></div>
<div id="profile"></div>
<div id="links"></div>
<div id="network"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Example
In the example, I've created a simple CSS block to display the structure, my next mission will be to fill in some details and look at creating a base stylesheet to use as a template for styling all manner of content and for future design experiments.
In the next part of this experiment, I'll add some sample content in order to define the markup in more detail, again there are some more microformats which may apply.
Labels: Semantic
Come up to The Lab and see what's on the slab.
2 Comments:
I really hate to date myself like this, but having been a systems integrator before there was a Web to design for, and a structured-source programmer before that, I just have to reaffirm the age-old adage that the more things change, the more they remain the same:
http://www.kimsoft.com/api-cobol/mis210l1a.htm
Bruce Arnold, Web Designer
Miami Florida
Wow, I don't think I've set eyes on any COBOL since I had to learn it in college.
Post a Comment
Links to this post:
Create a Link
<< Home