The amber light is changing to green
Html 5 is just around the corner and unless you want to be left behind it is time for all of us to start using HTML5 in conjunction with CSS3. Many designers and developers are waiting for the green light, the nod from some higher source telling us to go ahead and use it. The reality is that this time is never going to happen. CSS2.1 is a perfect example. We as designers/developers use this to style our websites day in day out and yet it is still not fully validated. Has this stopped us and a whole plethora of other designers from using it? Nope it hasn’t but is still universally accepted because it has incrementally become mainstream rather than signalling a green light with a go sign.

What makes HTML 5 different?
At present we all love div’s. Div is short for divisions and we use these divisions to divide our page into a whole host of segments which make up our page layout. What HTML5 will do is scrap these and make our pages more semantic. This will make it easier for search engines to read your web pages and will also make it easier for screen readers to navigate through our pages…all in all making the web experience a lot more fun!

An incentive for Designers to code?
You do however need to know how to code by hand to use HTML as there aren’t any shortcuts available in Dreamweaver to write the code for you. If ever there was an incentive for those designers who can’t hand code now is the time. For those of you who do know how to code using HTML and CSS the transition should be relatively seamless as all the new semantic tags are self explanatory.

The elements we can use with HTML 5
Below I’ve given a breakdown as to the new semantic tags we will be using and what they will do.

Block elements:

• Article: for things like blog pots, newspaper articles and other independent items
• Aside: for things like pull quotes and sidebars.
• Footer: for the footer section. This tag is not however reserved just for the bottom of the page. You could use it as the footer for a blog post or an entire document.
• Header: This represents a group of navigational aids and again is a tag you can use more than once.
• Nav: you should use this to wrap around navigational blocks and this should be used for links that navigate around the site.
• Section: a general section, this is not to replace a div however.

Inline elements:

• Details: for additional info. also uses JavaScript and can be toggled by the user,
• Figure: used to annotate images, photos, listings etc.
• Mark: highlights a chunk of text.
• Time: to encode modern dates and times

Interactive

• Audio and Video: allows us to embed both these elements without any need for plug-in.

Check back for part2 next week

In Part Two I will look at CSS3 ways we can start using it now and also a look at its extensive list of features.

 |    |