Designing a blog with html5

by .

This article is an edited version of two articles published by Opera Web Evangelist, Bruce Lawson, reproduced with permission. All rights reserved.

This article was updated 27 May 2014 to use the <main> element to denote the main content of the page (was previously <div>).

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 at marking up a blog.

Firstly what we’ll do is use the header, footer, main and nav elements to mark up the broad structure of the page. Doing this will make your site more accessible to real people who use some assistive technologies.

Next, we’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the sectioning elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see what HTML 5 offers us for representing dates and times.

So take the phone of the hook, and make a cup of tea and we’ll get started.

Setting the DOCTYPE

HTML 5, when used as plain HTML rather than its XHTML 5 sibling doesn’t need a DOCTYPE. But all browsers do, otherwise they go into Quirksmode, which you don’t want: the collision of HTML 5 and Quirksmode is like matter and anti-matter meeting, and will cause a negative reality inversion that will make your underwear catch fire.

You’ve been warned, so at the top of your document, you need the line <!DOCTYPE html>.

Some sites “use” HTML 5, when in actual fact all they’ve done is take their existing code and change the DOCTYPE. That’s fine and dandy if you’ve been using valid, semantic code as HTML 5 is very similar to valid HTML 4.01. Eric Meyer mentions small differences like “not permitting a value attribute on an image submit”, and there are a few differences between the languages, summarised in the document HTML 5 differences from HTML 4.

However, I don’t want simply to rebadge my existing code, but to use some of the new structural elements now.

Using some new structural elements

My blog – like millions of others – has a header denoted by <div id="header">, a footer <div id="footer">, some articles (wrapped by an area called “content”, <div id="content">) and some navigation (wrapped up in an area called “sidebar” <div id="sidebar">). Most sites on the Web have similar constructs, although depending on your choice they might be called "branding" or "info" or "menu", or you might use the equivalent words in your own language.

Although these all have very different functions within the page, they use the same generic div in the markup. as HTML 4 has no other way to code them. HTML 5 has new elements for distinguishing these logical areas: header, nav, footer and friends. (There’s more on this in an artice by Lachlan Hunt on A List Apart: A Preview of HTML 5.)

The overall aim is to replace this structure:

structure chart before redesign

with this:

structure chart after redesign

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and “colophon” information as well as site-wide navigation. I decided against the aside element, as the spec says it “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 it’s nevertheless content rather than navigation. So I decided to go for the nav element as the closest fit.

I’ve wrapped the main content in a <main> element, which maps to the ARIA 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.

New form attributes

As well as the main structural item on the page, I’ve added some new attributes on input elements in the comments form.

HTML 5 was designed to reflect what developers actually do rather than to reflect a philosophical purity, and that’s very clearly manifested in the new attributes which mean the browser takes up much of the work currently done by developers re-inventing validation routines in JavaScript. (Extending forms functionality was how the HTML 5 spec began).

So I amended the email input field in the comments to be input type="email" which means that when the user submits the form, an HTML 5-aware browser will use built-in validation routines to check that it’s in the correct format, without any JavaScript. Check it out in the current version of Opera, as that the only full implementation at the time of writing (June 2009), and note that it also adds a “mail” icon in the input field as a cue to the user.

There are similar input validation routines triggered by some of the new input types, such as url (which I use on the field that asks for the user’s web address), number and pattern which compares the input with an arbitrary regular expression.

Another good example is input type="date", which pops up a calendar widget/ date picker when the user focusses on the input field. You can test the date picker, or here’s a screenshot from Opera 9.6:

date picker pops up next to input field

A very useful new attribute I used on both input fields for commenter’s name and email address, and the comment textarea was type="required" which generates a message on submission if the fields are left blank. Each different localisation of a browser would need to have a different message, and it’s not (so far) customisable by the developer.

red-bordered browser message 'You have to specify a value' next to unfilled required field

The good thing with all this new form fabulousness is it’s all formed around new attributes on an exisiting element, so people using older browsers just see a plain old input field.

A note on screenreaders and HTML 5

I hope screenreaders are ready for these new interactions; I asked the html 5 group to formally invite screenreader vendors to participate in the specification; to my knowledge, none have done so. However, using <header<, <footer>, <nav> and <main> gives real benefits to some assistive technology users.

Laying out the new elements

It’s not too hard to layout the new elements. In all the non-IE browsers, you can lay out anything using CSS – even a nonsense element. One gotcha is that that the current crop of browsers have no “knowledge” of these elements, although support is improving all the time.

All browsers have default settings for the elements they “know about”—how much padding, margin they element gets, does it display as a block or inline?. (Here’s a sample default stylesheet.) Unless over-ridden by CSS, these defaults apply. But the browsers don’t know about header, nav and the like, so have no defaults to apply to them.

I got terrible rendering oddities until I explicitly told the browsers

header, footer, nav, article, main {display:block;}

IE layout

There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work. You can force it to quite easily with a JavaScript hack document.createElement('element name'). (Lachlan Hunt gets to the bottom of why IE needs this.)

For your convenience, Remy Sharp has written an HTML 5 enabling script which I use in the header to conjure all the missing elements into existence all at once.

But let’s be clear: this won’t work if your IE user doesn’t have JavaScript turned on. How much of that’s a big deal that is for you to decide. Pragmatically, it seems to me that the sites that will benefit the most from HTML 5’s new “Ajax”-style features, such as drag-and-drop, are the sites that currently have no hope of working without JavaScript.

Firefox 2 and Camino 1 layout

Firefox 2 and Camino 1 both use Gecko 1.9 which has a bug and so gets grumpy if you don’t serve the page as XHTML. (Go figure; that’s almost enough to trigger a negative reality inversion and you know how bad that can be). However, Firefox and Camino users upgrade frequently so Firefox is in version 3, while Camino 2 beta is out, so the problem will soon cease to exist. (Read more at How to get HTML5 working in IE and Firefox 22 by Remy Sharp.)

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“.

But so what?

Robin Berjon expressed it beautifully in a comment on A List Apart:

Pretty much everyone in the Web community agrees that “semantics are yummy, and will get you cookies”, and that’s probably true. But once you start digging a little bit further, it becomes clear that very few people can actually articulate a reason why. So before we all go another round on this, I have to ask: what’s it you wanna do with them darn semantics?

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 nav for example, or jumped straight past the navigation, in a programmatic implementation of “skip links“.

Which brings me to…

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

diagram of article structure; explanation follows

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 footer on page; the spec’s description says "the footer element represents a footer for the section it applies to" and a page may have any number of sections. The spec also says "Footers don’t necessarily have to appear at the end of a section, though they usually do."

Comments

I’ve marked up comments as articles, too, as the spec says that an article could be “a user-submitted comment”, but nested these inside the parent article. The spec says

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

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.

Times and dates

Most blogs, news sites and the like provide dates of article publication.

Microformats people, the most vocal advocates of marking up dates and times, believe that computer-formatted dates are best for people: their wiki says “the ISO8601 YYYY-MM-DD format for dates is the best choice that is the most accurately readable for the most people worldwide, and thus the most accessible as well”. I don’t agree (and neither do candidates in my vox pop of non-geeks, my wife, brother and parents).

I do agree with the microformats people that hidden metadata is not as good as visible, human-readable data and therefore elected not to use the pubdate attribute of article.

Therefore I’ve used the HTML 5 time element to give a machine parsable date to computers, while giving people a human-readable date. Blog posts get the date, while comments get the date and time.

The spec is quite hard to understand, in my opinion, but the format you use is 2004-02-28T15:19:21+00:00, where T separates the date and the time, and the + (or a -) is the offset from UTC. Dates on their own don’t need a timezone; full datetimes do. Oddly, the spec suggests that if you use a time without a date, you don’t need a timezone either.

There’s considerable controversy over the time element at the moment. Recently one of the inner circle, Henri Sivonen, wrote that it’s for marking up future events only and not for timestamping blogs or news items: “The expected use cases of hCalendar are mainly transferring future event entries from a Web page into an application like iCal." This seems very silly to me; if there is a time element, why not allow me to mark up any time or date?

The spec for time does not mention the future event-only restriction: "The time element represents a precise date and/or a time in the proleptic Gregorian calendar" and gives three examples, two of which are about the past and none of which are "future events". Although the spec doesn’t (currently) limit use of the element, it does limit format to precise dates in "the proleptic Gregorian calendar". This means I can mark up an archive page for "all blog posts today" using time, but not "all July 2008 posts" as that’s not a full YYYY-MM-DD date. Neither can you mark up precise, but ancient dates, so the date of Julius Ceasar’s assassination, 15 March 44 BC is not compatible.

I don’t expect this to be resolved. If you think as I do, feel free to mail the Working Group to express your feeling!

Hopefully, this brief article (geddit?) has given you a quick overview of how to use some of the new semantic elements. Let me know what you think!

142 Responses on the article “Designing a blog with html5”

  • ocean90 says:

    Nice article.
    A good help, because I’m creating currently a theme with HTML5.

    The link for the date picker doens’nt work.

  • JB says:

    This is great. Bruce, you and the other authors here are going to accelerate the use of HTML 5 by providing articles like this to everyday bloggers and web professionals. Thanks for your forward looking work.

  • Karl says:

    Very interesting – pictures *and* colour too. You spoil us Mr. Ambassador ;)

    Looking at my markup for a single post, I’ve put the “pearls of wisdom” inside a section (hmm, I probably done this for an hAtom hook) but comments as nested articles? Seems a bit incongruous with the element name to me despite the spec description. I think I copped out there and went old skool with an ordered list within another section. A nav tag for the article navigation, yes I umm, yes. Next iteration…

    best regards, Karl

  • Alejandro Moreno says:

    Thanks for posting this here!

    I read the first part in your blog, but somehow missed the rest.

  • Mike T. says:

    Great read! Can you recommend any resources that detail browser implementations of forms 2.0, other than Opera?

  • ysbreker says:

    PPK wrote a nice indepth article about the (problems with) the time-tag: http://www.quirksmode.org/blog/archives/2009/04/making_time_saf.html#more

  • Bruce Lawson says:

    I believe Safari implements some of the web forms stuff (esp input type=”range”)

  • Mike T. says:

    @Bruce, thanks. PPK has been tweeting about html5 forms support just this morning (well, morning for me):

    https://twitter.com/ppk/status/2419144715

  • Dave says:

    Hi Bruce

    I’ve tried to implement some HTML5 features on my own site but sadly had to back track as I was unable to get around issues with IE. I did use the JS hack adding elements on the fly but it didn’t seem to work. My JS was not inline maybe this is an issue, must run some tests when I get a minute. Do you know of any other issues when using HTML5 in IE like block elements not clearing that could have effected my layout?

  • Bruce Lawson says:

    None that I know of, Dave.

  • Sean says:

    Great article, not only is the content of great interest as a web developer, but it’s well written and easy to follow without wanting to hurry up and finish the article. Love the color-coded tag demonstrations.

  • Tom says:

    Bruce, superb article. It will be interesting to see how others interpret and act on this.

    I love the new form options the most.

  • Another Dave says:

    I’m really surprised that Webkit haven’t implemented more of the HTML5 web forms stuff. With the soft keyboard on the iPhone you think they’d jump at any way to make data entry easier.

    I’d also heard that the spec for that stuff had changed since Opera implemented it. Is that true?

  • Bruce Lawson says:

    Yes, Another Dave: http://my.opera.com/community/forums/topic.dml?id=215544. It’s why Opera calls their implementation “experimental” as it was made at least a year ago, on a spec that’s a moving target.

    Disclosure: I work for Opera.

  • Jim says:

    I have no idea how I found this site, but I’m really glad I did! Looks like exactly the kind of information I need to update my sites to HTML5. Thanks for taking the time to write this up.

  • […] HTML 5 Doctor ci viene in aiuto con un dettagliata analisi sull’utilizzo dei nuovi elementi strutturali, del corretto modo di definire la struttura di un post, dei nuovi attributi disponibili per i form. E molti altri accorgimenti utili che puoi iniziare ad adottare sin da oggi. […]

  • Carsonified linked me here with their newsletter, and it’s been a great way to catch up with all the updates and rush for HTML5. I’ve started rewriting the code of my site to reflect these changes, and this site has been really helpful.

    Thanks!

  • […] posts contained within an <article> you may have another <article> housing comments. Designing a blog post with HTML5 from HTML5 Doctor has an excellent overview of […]

  • BJJ says:

    i’m getting help, really thankful to you :)

  • […] und nav und ergänzen die Theorie mit eindrucksvollen Beispielen, die Mut machen, zum Beispiel den Umbau eines Blogs in Angriff zu nehmen. Für den extra leichten Umstieg hält der Doktor eine HTML 5 Vorlage bereit, […]

  • Garrett Albright says:

    Hmm. Instead of type=”required” for form elements for which we want to require a value, shouldn’t it be required=”required”? That seems to be what this spec doc is asking for:
    http://www.whatwg.org/specs/web-apps/current-work/#attr-input-required

  • Hikari says:

    VERY interesting post!

    U went beyond typical “colored layout” and talked about each of its piece and why you chose each element.

    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.

    After reading that you may think that my opinion is that comments are not part of the article, but that’s not the case. For me, comments are as valuable content as the post, sometimes even more implortant and valuable, since they represent visitor’s contribution, and sometimes visitors even talk to each other as if it was a forum. Because of that, I think that threaded comments should nest article elements, but I’m not sure about that. The advantage would be to make threads semantic, but whould browsers and search engines understand that? And comments may also have multiple pages, requiring their own nav element, making their section element even more necessary.

    And of course, as you did, post and comments are all surrounded by an article element, showing that all of them are part of a “macro” article, separated by sections and “mini” articles.

    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?

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • […] worth detailing here. Starting out with the reset stylesheet and Bruce Lawson’s article on designing a blog in HTML 5, almost everything worked out of the box. Site navigation went in a <nav>, blog posts went in […]

  • […] Designing a Blog with HTML 5 – Tutorial sobre la construcción de un blog  con HTML 5. […]

  • […] there are no slides to publish, but I have an article called Designing a blog with HTML that covers the same ground. (Two articles on this blog cover it in much more detail: Redesigning […]

  • Colin says:

    I disagree with putting all your sidebar in a nav element. This is exactly what an aside is made for and you can even add separate nav elements in your aside. Anyway, don’t take my option, the W3C says the same thing:

    The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. ~ From W3C note on the aside element

  • Rich says:

    @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.

  • […] Doctor: Designing a Blog with HTML5 (I do not agree with everything in this article, and most notably nor does the W3C […]

  • Bruce Lawson says:

    @Colin

    I disagree with putting all your sidebar in a nav element. This is exactly what an aside is made for and you can even add separate nav elements in your aside.

    Indeed. The spec changed after I did the redesign. You’re correct – and if I did it again, that’s what I’d do.

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • Ray says:

    There is 137 errors and 297 warnings on this page!

  • Hikari says:

    But it loads accordinly even on IE6.

    HTML5 is still a prototype, even validators can be buggy yet.

  • Nice Representation of HTML5 …

  • […] なお、当記事は、<html>5 doctor::Designing a blog with html5の記事を、自分なりに和訳して理解したものを書いています。場合によっては和訳が間違っており、正しくないことを書いてしまっている場合もあります。もし、おかしな点などございましたら、上記サイトから、該当箇所を確認していただくか、コメント欄やtwitter(@1987yama3)までご連絡いただけたらと思います。 […]

  • bigrick says:

    Yes this is a great article on html, great stuff!!

  • juanpetey says:

    i’ve always preferred coding with html, this article shows why

  • […] found a pretty good link for you read as well, from the html5 doctor himself. […]

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • […] Designing a blog with HTML 5 […]

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • […] App Coding a HTML 5 layout from scratch HTML 5 and CSS3: The techniques you’ll soon be using Designing a blog with HTML 5 HTML 5 tutorial – A simple web page […]

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • elfynity says:

    Hi there! I am looking to put one blog page in my own website. I have searched on how to do this with html, etc, and haven’t found the code yet to put one into my own website!

    I’m sure it must be javascript related. if you have any coding info on this … please reply with leads, if you can!!!

    Thank you!

  • Hikari says:

    elfynity, just use WordPress.

    You can set a (static) page to home page, and set the “blog page” to a subfolder of the site, and all posts will be listed there.

  • […] Designing a Blog with HTML 5 – 一个利用 HTML5 建设博客站点的完整教程。 […]

  • […] 使用 HTML5 设计博客 […]

  • elfynity says:

    THis is great! thank you for the info!

  • […] Designing a Blog with HTML 5 – 一个利用 HTML5 建设博客站点的完整教程。 […]

  • […] Designing a Blog with HTML 5 – 一个利用 HTML5 建设博客站点的完整教程。 […]

  • […] Designing a Blog with HTML 5 – 一个利用 HTML5 建设博客站点的完整教程。 […]

  • […] 使用 HTML5 设计博客 […]

  • […] Designing a blog with HTML 5 […]

  • […] ก็พอได้ไอเดียจากบทความนี้ครับ “Design a blog with HTML5” จาก html5doctor.com .. […]

  • ss pathania says:

    html 5 is vey useful to design a blogger template or layout……

  • Good article…I’m so used tu use “wordpress ” that I forgot ti try make one by my self,I’m going to make it! Let’s see…je,je

  • Laura says:

    I am very excited about designing with HTML5. It is going to make designing much easier.

  • […] 3) Designing a Blog with HTML 5 […]

  • […] Web 1.0 pages. In order to investigate these, let’s look at marking up a blog. Source : http://html5doctor.com/designing-a-blog-with-html5/ This entry was posted on Monday, October 4th, 2010 at 7:19 pm and is filed under Html5 […]

  • WPF says:

    This kind of read is so practical when you are developing a HTML5 theme. Thumbs up for taking the time and sharing!

  • […] Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5. […]

  • HTML 5 is very goof for this work.
    Very good post!

  • Davy Crockett says:

    looks like you were hacked – lots of chinese writing o.0

  • Louise says:

    Newbie at all this. Trying to master CSS. Does HTML5 use CSS? Or is it independent?

  • Ramanakumar Shankar says:

    Thanks a lot… really helped..

  • […] con ustedes un sitio, en inglés, donde recolectan una serie de tutoriales, que van desde como armar tu blog en HTML5 a como crear un app para iPhone en el nuevo […]

  • […] with HTML5 and CSS3Plantilla base HTML5 para nuevos proyectosHow to make an HTML5 iPhone AppDesigning a blog with HTML5¿Dónde está el límite?En este artículo os he mostrado algunas de las novedades de HTML5, pero […]

  • 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…

  • pligg says:

    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….

  • […] creating my theme, I read through "Designing a blog with HTML5" on HTML5Doctor.com and had a real good look at a lot of other blog articles about HTML5. The first […]

  • Web Geek says:

    Great Post! Thanks for sharing. I specially like the blog anatomy section. Looking forward to try a few of these techniques.

  • dhaval shah says:

    Awesome Article!

    Great thanks for the blog and your time.

  • […] Designing A Blog With HTML5 […]

  • mc says:

    What elements are related to authors of comments/posts? ?

  • usa mapquest says:

    What elements are related to authors of comments/posts? use HTML preview from your theme to see what container have this

  • Nice article Bruce.
    Shailendra Singh

  • I’m really looking forward to using HTML 5 and CSS 3 for our webpages, the only problem we have is that lots of Clients in big buisinesses are still using IE6! So we can only really do the cool stuff on Candidate facing webpages. That is unless everyone suddenly ditches IE…. We can but hope!

  • […] Desenvolvendo um blog com HTML5 O conjunto de recursos HTML5 envolve as APIs de JavaScript, que tornam mais fácil o desenvolvimento de páginas Web interativas, confira um exemplo de criação de uma estrutura de blog: […]

  • CodePsd.com says:

    Great article Bruce.

  • envelop says:

    Very interesting article. I enjoyed reading it. Thanks for posting.

  • Will says:

    While the market share of browsers that do not support HTML5/CSS3 is still representative (from 25% to 40% today, approximately), I don’t feel inclined to use it. I am crazy to put all this stuff in action, but I feel I have to wait, because websites are not developed for web developers, but for the general audience. In the end, it is the public, with its browser update rate, who defines when we can start doing all the cool stuff.

  • Another great article Bruce, Thanks.

  • Ashish says:

    Wow, this is very much helpful for beginners like me who recently decided to dive into HTML5.

    thanks for this great article to start HTML5 marking up.

  • Frank says:

    Great Info!! I am new to this and HTML5 is a bit confusing, Thank you!

  • […] Bruce Lawson, html5 Doctor, Designing a blog with html5 […]

  • yonathan says:

    Great Info!! I am new to this and HTML5 is a bit confusing, Thank you!

  • alex chuan says:

    Thanks for sharing . even if my website does not working at html5.

  • Blaise says:

    with regards to a single post and its related comments: what if I want to add something like “Discussion x-nbr comments” just before the first comment article. Something like a header before the comments start … What semantic element can I use?
    I though of <hgroup> but I don’t think it is in the right place since it will be loose.

  • Anya says:

    Thank you very much! This was one of the best articles I have found about HTML 5 !

  • […] 500 watchers and 80 forks. It was a theme made a few years back based on Bruce Lawson’s popular article from the days when no one was quite sure how to use the new sectioning elements. Steve made a […]

  • Jeffc says:

    Its amezing and looks great, but how the differnce made me stood..

    Still it looks ameszing the code are tightly bounded and that are used superbly…

  • I am not sure about why use side bar as a nav?

  • I dicovered this is a informative and interesting submission, so I think it is very useful and knowledgeable. Thank you for the efforts you have made in writing this publication. I am wishing the same best work from you in the future as well. actually your creative writing ability has inspired me.

  • checked validation 0 errors. I am adding footer.php in index.php page, using this code: ( ), getting son some error:

    Sorry, I am unable to validate this document because on line 142 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

    The error was: utf8 “\xA9” does not map to Unicode

    Please help me, how to fix this error

    Swamy Giduturi
    swamygiduturi@yahoo.com
    91-7893105707

  • Anonomus says:

    Thanks so much for the great article. Now I can design my blogs too.

  • Juggle Today says:

    Great site and awesome article. Love the new form options and the IE layout.

  • Anata says:

    Finally, I kept the navigation really simple. I hid nearly all of the blog gorp in an expanding menu that appears when you click the ‘blog’ link. This was probably the design’s most opinionated decision. While this certainly hurts the discoverability of content, I’m not out to make a web portal. It’s a blog. Generally visitors will either be following via RSS or arriving via Google/Twitter/Whatever to view a particular article. The 99% case is to make the site as readable as possible. This is also why I used a vertical typographic grid, which I will describe later.

  • […] Designing a blog with html5(用html5设计博客) 许多HTML5 特性要结合JavaScript API一起使用,以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些,我们来看怎样建立一个博客。 […]

  • Jterm says:

    Thats very nice and interesting im going to try it !

  • Fea says:

    Thats one great introduction in the new HTM5 style !

  • Like your blog . Good work, very useful Blogs,thanks!

  • Carlton says:

    I feel with HTML5 it seem to be alot nicer to code with .. I have add php to my web site an using the HTML5 make my life easy ..

  • […] Beginner Guide / Design Blog +  Layout coded from scratch + Vector Masks + HTML5 […]

  • nice code but it would be better if you could have mentioned demo link….

  • Collette says:

    Hi there friеndѕ, how іѕ the whole thing, аnd whаt yоu deѕіre to say сoncerning thiѕ pаragraрh, іn my view itѕ really remarkable deѕigned fог mе.

  • Brian says:

    Yes really, there lots of new techniques & tricks with the new version available, hope this will be the good one & will help to deal with css. Article is really nice. I was confused to purchase HTML5, but after reading this article defiantly will try this one.

    Thanks

  • Sanu says:

    I really enjoyed this post.you explain this topic very well.It helped me a lot.I would like to share new HTML5 theme which i have currently designed.you please see the skin and give your valuable comments.

    https://html5mojo.codeplex.com/releases/view/96670

  • S Ghosh says:

    Very good tutorial. Thanks and keep posting :)

  • Maria James says:

    Thanks for sharing! Another good resource is Sitepoint, who have a sepcific html5 tutorial.

  • mi name says:

    comentario para ver si esto funciona

  • Very nice Bruce! Pleasant color-coded tag demonstrations. Nice post, thank you for sharing. I want firefox implementations of forms 2.0. Can you do this?

  • Henry Wood says:

    Great post! I think it will be more pleasant to code with html5 for my new website.

  • Great article. What would you suggest for pingbacks?

  • Nice article. Its much informative. Thanks for posting…

  • Erlando Eril says:

    How to create comment and automatic appear on comment list?

  • Very nice post. I absolutely appreciate this site.
    Keep it up!

  • Leave a Reply to Web Geek

    Some HTML is ok

    You can use these tags:
    <a href="" title="">
    <abbr title="">
    <b>
    <blockquote cite="">
    <cite>
    <del datetime="">
    <em>
    <i>
    <q cite="">
    <strong>

    You can also use <code>, and remember to use &lt; and &gt; for brackets.