Last time we where discussing semantic mark-up of blog's home page. With all this knowledge we can smoothly move forward and mark up the page with full article contents and visitors' comments.
The process will be very similar to one we used for home page, so if you haven't read previous article, please do it as it will be really helpful. If you already been there don't hesitate and read on :)
Article page check-list
Of course we start with a little check-list. What are the contents of article page?
- header
- Every page needs a header, we know it already. We'd like to have a nice and big article title there and of course a name or logo of the blog, so the visitor knows where he is and what he or she is reading.
- article contents
- As it is an article page then the full text of the article is the most important content here.
- foot note
- Visitors probably would like to know who wrote the article, when was it published and such stuff.
- comments
- List of comments. If you've read the post about marking up the home page you will know why the list is keyword here.
- comment form
- Simple form to leave a comment: text input for nickname, bigger text box for comment and maybe some checkboxes for subscribing feature or antispam captcha image to read.
- addtional info
- And as this article page is still part of a blog website it would be nice to have some modules with archives, legal note, blogroll or whatsoever. But this one was described already in previous post, so I wont repeat myself once again.
Yep... seems to be quite a lot of it wont be that hard, you'll see.
#1 Article header
When we where talking about home page, the blog title was our main <h1> header and you may be tempted to do the same on an article page. We are still on a blog aren't we? So the blog title is the most important thing... is it really?
Article page is a part of blog website, but as it's article page then the article title should me the most important header, don't you think? So this is what we will do:
<h1>
<a href="/" title="permalink">
Title of this great article
</a>
</h2>
This <a> link is not needed here but I like to keep it consistent. And it's a nice place to store a bookmark link, so visitors don't need to copy/paste url from address bar.
But how about blog's title? Or a logo?
Yes, we still want visitor to be aware that this page is part of the whole website and there is no better place for "back to home" link as header section... So let's create some navigation links list right above our <h1> header.
<ul>
<li class="home">
<a href="/" title="Go home">Awesome home page</a>
</li>
</ul>
<h1> ... </h1>
Why the list if there is only one element?
Because it's very likely that the list of links in the navigation will grow. Maybe one day you'll add 'About me' page for example? Even if not it's a very good practice from accessibility point of view to add some kind of 'Skip to content' link at the top so the users with text browsers or veeeeeery small screens will be able to quickly move to things that are more important to them than a shiny header.
<ul>
<li class="access">
<a href="#content">Skip to content</a>
</li>
<li class="home"> ... </li>
</ul>
<h1> ... </h1>
So now we have nice semantic header with accessibility enhancement. How cool is that?
#2 Article header
So... The article contents. There is only one article on a page, so no lists here, really :)
We will just use plain <div>.
<div class="contents">
<p>Here this great article starts.</p>
</div>
And that's it really when it comes to content. Just remember to put text it into paragraphs and use headers wisely.
#3 Article's foot note
Here is where we want to have author's name, published date and let's say a list of tags.
<p>written by bartaz on 7th May 2008 about</p>
<ul>
<li>life</li>
<li>universe</li>
<li>everything</li>
</ul>
Simple as it could be: a <p> paragraph of text and unordered list <ul> of tags.
You would probably like to make a tag names linked to some page with a list of other articles tagged with it on your blog or some search engine (like Technorati).
<p> ... </p>
<ul>
<li><a href="/life" rel="tag">life</a></li>
<li><a href="/universe" rel="tag">universe</a></li>
<li><a href="/everything" rel="tag">everything</a></li>
</ul>
Have you noticed rel="tag" attribute inside the <a> tag? This rel stands for relation and it means that relation between the page we are linking to and ours is that it's a tag page. So this few characters added a great semantic meaning to this links. Now it's clear that these are the tags. And it's clear not just for humans reading the post (or looking into the code) but also for machines - such as search engines for example, that can now understand it and use this tags to properly index your page.
And you know what? With this simple little trick we just used one of Microformats called rel-tag! That was really easy, wasn't it? That's the truth about microformats - they're really simple and straightforward.
But still this paragraph and list seem to be separate things in document flow. If we want to connect them semantically we should just wrap everything there into a <div> with some nice class attribute.
<div class="footnote">
<p> ... </p>
<ul>
...
</ul>
</div>
#4 List of comments
We are all used to the concept of the lists, aren't we? So it wont be hard to mark up the list of comments.
<ol>
<li class="comment"> ... </li>
</ol>
I used ordered list <ol>, as comments are in most cases ordered by date. Now let's dig into comment contents.
<ol>
<li class="comment">
<p><cite><a href="/">troll</a></cite> said:</p>
<blockquote>
Oranges are so much better than apples.
</blockquote>
</li>
</ol>
Simple paragraph with commenter's name, link to his/her website in a <cite> element and a <blockquote> to represent comment contents.
But why the cite and <blockquote> elements? Are we really quoting anything?
For sure it's not a quote from any other website or a book, but we are somehow quoting commenter's words or thoughts. That's why I think <blockquote> as comment contents and a <cite> element to indicate commenter's name and address are semantically correct in this place.
#5 Comment form
Forms in general are a really long story and a great pain for designers and web developers. But the real pain starts when it comes to styling and we will worry about it a bit later. Let's now focus on the mark-up. It's quite straightforward, especially in such simple example as comment form.
<form id="comment_form" action="/" method="post">
<fieldset>
<label for="nick">Nick</label>
<input type="text" id="nick" name="nick"/>
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
<input type="submit" value="Submit"/>
</fieldset>
</form>
Simple, but if we want to actually look nicely we will need some additional mark-up there. Right now we will get all the labels, text-fields and buttons in one line.
The easiest way to get around it is the use of <p> paragraphs:
<form ... >
<fieldset>
<p><label>...</label><input ... /></p>
<p><label>...</label><textarea ... ></textarea></p>
<p><input value=Submit ... /></p>
</fieldset>
</form>
It will be enough for now, but a little more magic will be needed when we will come to styling this form with CSS. But we don't worry about it today.
That's all folks
That was quite a long way but in the end we have a really nice semantic mark-up on this article page. It wasn't that hard, right? And we are just a small step from applying even more semantic meaning with Microformats (we already did it with tags, remember?) but this is a subject of a brand new article.
Want some more?
If you don't have enough in this topic just have a look at one of these:
- Joe Dolson's Guide to Semantic Use of HTML Elements
- W3C recommended technique - Using semantic elements to mark up structure
