A little Friday learning with HTML5

Although Summer ends closer to the end of September, traditionally the last friday of August is the last day of "summer" as the mind-shift shifts to Fall. Work on friday however is just as important in the summer as any other day of the week according to our leader here at Dow Jones (which i honestly agree with) so today a little Friday learning for all of us.

I used to have a small .txt file that had all the HTML tags that i thought people should know regardless if they ever had a chance to code a web page. Things like how to bold and italic text, add images, links etc. Useful tips for adding rich text to web forms, text inputs etc.

This blog post on HTML5 for journalists reminded me of my well distributed .txt file and perhaps the need to update it once again. If you have heard about HTML5 it is probably because of the HTML5 Video element for playing videos and movies that directly competes with Flash. The Spec being worked on by the W3C goes way beyond video and its a great opportunity to create mark-up that will moves us towards the semantic web by adding valuable semantic meaning to your pages in non-structural ways which is typical of HTML

Martin Belam's post is targeted to journalists (he is an Information Architect at the Guardian) but relevant to everyone that is producing content for online distribution and outlines some key markup that HTML5 is making standard. Here are some of the elements he highlights that are interesting:

• aside, is used to mark-up something tangentially related to the main body of text. In a news context, that might represent a factbox, some links to related stories, or a sidebar detailing the key points of a story's timeline.
• details is intended to provide a way of including extra content or information that can be optionally expanded or collapsed by the user. That might be something like additional information about an album release, or the opening times of an exhibition.
• replicate the print feature of having an image, chart or diagram that sits in the main flow of content, but that is not actually part of the main article. These elements will be marked-up as a figure, with figcaption specifying, as it suggests, a caption to go with the image.
• mark tag provides a way to highlight or signify text. Visually you can style it however you want, although a yellow highlighter pen effect seems to be the favourite so far, but the point is to allow you to distinguish portions of text.

At the bottom of his post he also points out some other articles on the subject that are good reads if you want to dig deeper. There are over 100 elements in the HTML5 specs that the W3C that is working on and the HTML5 draft is also a good reference point. Of course RDFa specifications are also being recommended as an add-in to HTML5.

HTML5 is early in its use in the wild but with the W3C making progress (and yes of course there is always some controversy that they have to work through) to finalizing the spec hopefully web developers who understand the value will start making more use of it- so get yourself ready....


Image|Flickr|justinsomnia