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.
Before HTML5, if you wanted to implement drag and drop features in the browser you had to use libraries such as jQuery and MooTools. Now you have HTML5 Drag and Drop, which gives you the ability to drag, drop, and transfer data natively within the browser. While Drag and Drop is a new API included in HTML5, it was – amazingly – first implemented in IE5, back in 2005 when Ian Hickson worked on the HTML5 API.
Whatever you call them - blocks, boxes, areas, regions - you’ve been dividing your Web pages into visible sections for well over a decade. The problem is, you’ve never had the right tools to do so. While the interfaces look all the world like grids, the underlying structure has been cobbled together from numbered headings and unsemantic helper elements; an unbridled stream of content at odds with its own box-like appearance. Now that HTML5 has finally made sectioning elements available, many of you greet them with great reluctance.
Imagine you have a form and you want a user to input a string of text, like their name for example. You have the <input type="text" /> element, which will allow the user to type whatever he or she pleases. Imagine then that you want the user to enter his or her country of residence; you’d likely use a <select> element. This would limit the results to the options available (sometimes a good thing) and would also present the user with a potentially huge list to choose from. But what if you want the user to be free to enter what they please and at the same time being given some suggestions? This is where datalist comes in.
HTML5 has a set of elements that make page structure more accessible to assistive technologies (ATs). The <header>, <footer>, <nav>, <article>, <aside> and <section> elements make it possible for ATs such as screen readers to identify the purpose of chunks of content on the page. But a growing school of thought says that there is one element missing from this set of semantically important tags.
Prior to HTML5 we had to rely on using class or rel attributes to store little snippets of data that you could use in your websites. This sometimes led to problems and could cause conflicts between the styling and functionality of websites. The advent of HTML5 introduced a new attribute known as data. In this article Aaron Lumsden is going to be looking at some examples of how he would use this attribute as well as how it should be used correctly.
The advent of HTML5 has created a new set of opportunities for web developers and site architects. The new system has also forced those unfamiliar with its origins to reassess how they view their site design, especially when it comes to questions of search engine optimization. How will HTML5 interact with the current search engine spiders, such as Googlebot and Bing, and how will those crawlers evolve in this dynamic environment?