Designing a blog with html5

`role=main` so that screenreaders and other assistive technologies can easily find the main content. Note that you should only use this element once per page…. ## What’s the point of those new structural elements?

Well, they add semantics to the page. The browser now knows which area of your site is the header or the footer because there are

`header` and

`footer` elements, whereas

`div` might be called “branding” and “legal”, or even “en-tete” and “pied-de-page” or “kopfzeile” and “fusszeile“…. The general answer is “to repurpose content”. That’s fine on the surface, but you quickly reach a point where you have to ask “repurpose to what?” … I think HTML should add only elements that either expose functionality that would be pretty much meaningless otherwise (e.g.

`canvas`) or that provide semantics that help repurpose for Web browsing uses…. In my view, there are a couple of things I want to do with those semantics. The first is for search engine use; it’s easy to imagine Messrs Google or Yahoo! giving lower weighting to content in

`footer` elements, or extra weight to content in the

`header`. The second reason is to make the site navigable for people with disabilities. People with learning difficulties might instruct their browser always to put the articles before the navigation, for example. User agents might very well have a keyboard shortcut which jumped straight to the… ## Further refining the HTML 5 structure
### The blog home page

An interesting thing about a blog homepage is that there are generally the last 5 or so posts, each with a heading, a “body” and data about the post (time, who wrote it, how many comments etc.) and usually a link to another page that has the full blog post (if the homepage just showed an excerpt) and its comments…. HTML 5 has an

`article` element which I use to wrap each story:

The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.

Let’s look in more detail at the guts of how I mark up each blogpost…. ### Anatomy of a blog post

The wrapper is no longer a generic

`div` but an

`article`. Within that is a

`header`, comprising a heading (the title of the blogpost) and then the time of publication, marked up using the

`time` element…. Then there are the pearls of wit and wisdom that consitute each of my posts, marked up as paragraphs, blockquotes etc., and is pulled unchanged out of the database. Following that is data about the blog post (category, how many comments) marked up as a footer and, in the case of pages that show a single blogpost, there are comments expressing undying admiration and love. Finally, there may be navigation from one article to the next…. #### Data about the article

Following the content there is some “metadata” about the post: what category it’s in, how many comments there are. I’ve marked this up as

`footer`. I previously used

`aside` which “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content” but decided that it was too much of a stretch; data… *about* a post is intimately related.

`footer` is a much better fit: “A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.” I was initially thrown off-course by the presentational name of the element; my use here isn’t at the bottom of the page, or even at the bottom of the article, but it certainly seems to fit the bill – it’s information about its section, containing author name, links to related documents (comments) and the like. There’s no reason that you can’t have more than one… These are headed with the date and the time of the comment and name of its author—if you want, you can wrap these in a

`header`, too, but to me it seems like markup for the sake of it…. About post, I’d add a section element around the main post, and another around comments. I agree with u on chooseing footer element for metadata, but the way you did became too loose. header and footer elements are related to main post, not to comments, but they are all on the same level. Using 2 section elements you can semantically show what header and footer are related to, and that comment articles are other section of the article. I’d also put nav below footer (or above header, as it is more used), since it is also related to post and not to comments…. But I have a question, what about big posts with many headers? I use to make very big posts, some have 2 or 3 heading lvls. I even created a WordPress plugin to dynamically and automatically generate an index of contents. In this case, should I wrap each block on an section element, and each heading on a header element? Or would that be too abusive and I should stick with h1, h2, h3 and leave everything on a unique block?… @Colin, we’re back to the old semantics debate here, let’s remember that we have to describe the meaning of the content with web standards, so if Bruce’s nav contains (which aren’t specified in the article) links to categories, pages and recent posts then it’s entirely appropriate to use nav, If however it contains advertising etc then it would be entirely appropriate to use aside…. Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look…

Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages….