Build a Threaded Comment Block with HTML5 and CSS3

Threaded comments allow users to directly reply inline with comments

Jake Rocheleau is going to look at building a simple HTML5 and CSS3 threaded comments layout. He won’t be using any jQuery effects on the comment blocks (although it is possible to extend this functionality). He will look into structuring the HTML5 document and how to position elements using CSS. From this base template it should be easy for developers to pick up their own customizations and implement a threaded comment block into any website layout.

 

Jake Rocheleau wants to start by looking over the basic HTML template used in this layout. He is sticking to the HTML5 doctype coded in UTF-8 along with some other HTML5 elements. For web browsers older than Internet Explorer 9 he includes a copy of the HTML5shiv script hosted on Google’s dev servers. Inside the <body></body> tags you can find a whole bunch of inner comment divs. The whole page layout is wrapped inside a div with the ID #w for wrapper. Everything is centered on the page with a fixed width of 700px. The #container div is what holds the comment system in place away from the header text or other page elements. Each thread of comments is held inside an unordered list where the root <ul> has the ID #comments.

Comments

Be the first to write a comment

You must me logged in to write a comment.