I have been keen to take a look at html 5 and I thought I would have a go. Google have recently released an os based on it, and Microsoft are promising that Internet Explorer will (mostly) support it.
From my initial view it looks really sensible. I hope that the browsers can get together and thrash out a solution to the video tag – it would save everyone from having to install flash, or worse still silverlight.
1) Embed other XML
HTML 5 allows for MathML and SVG elements to be used inside a document
2) New Tags
sectionrepresents a generic document or application section. It can be used together with the
h6elements to indicate the document structure.
this confuses me a bit – but it seems to be to define an area of the page as a section.
articlerepresents an independent piece of content of a document, such as a blog entry or newspaper article.
On the blog home page (like this one) each blog entry would be wrapped in a <article></article> tag. It’s likely to be well implemented by blog engines, and cms systems. Particularly if Google news will syndicate your content because its in an article tag
asiderepresents a piece of content that is only slightly related to the rest of the page.
This is for off-topic content. Great for search engines – but I can’t see many people using this too much unless they’re really geeky
hgrouprepresents the header of a section
Strangely named but I guess quite useful if you are keen to structure your pages perfectly. Really useful for SEO and search engines.
headerrepresents a group of introductory or navigational aids.
Similar sounding to head, heading is for what always seems to get put in “<div class=’head’>”. Really useful for SEO and search engines.
footerrepresents a footer for a section and can contain information about the author, copyright information, et cetera.
The same as header, but with the footer. Really useful for SEO and search engines.
navrepresents a section of the document intended for navigation.
The same as header and footer but for the navigation.
dialogcan be used to mark up a conversation like this:
<dialog> <dt> Sir if you were my husband I'd poison your tea <dd> Lady, if you were my wife I would drink it </dialog>
figurecan be used to associate a caption together with some embedded content, such as a graphic or video:
<figure> <video src="paris_hilton_vid"></video> <legend>un-named hotel heiress in video shame</legend> </figure> This wont hurt SEO, or Talking Browsers, and it seems to offer some nice possibilities
audiofor multimedia content.
Implementation of this is likely to be very hit and miss. Every browser seems really keen to do it absolutely differently
embedis used for plugin content.
markrepresents a run of marked text.
This is really for search results snippets where the word found is highlighted. Now the mark tag can be used
progressrepresents a completion of a task, such as downloading or when performing a series of expensive operations.
Self explanatory, but useful. Should not be confused with things that require the meter tag.
meterrepresents a measurement, such as disk usage.
Nice – this will help (support: http://html5doctor.com/measure-up-with-the-meter-tag/)
timerepresents a date and/or time.
Another nice addition, works on the locale of the browser
rpallow for marking up ruby annotations.
canvasis used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
commandrepresents a command the user can invoke.
The <command> tag defines a command button, like a radiobutton, a checkbox, or a button. The command element must be inside a menu element. If not, it will not be displayed.
detailsrepresents additional information or controls which the user can obtain on demand.
datalisttogether with the a new
inputcan be used to make comboboxes:
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Firefox"> </datalist>
keygenrepresents control for key pair generation.
Seems to allow for massively complicated key pair generation. I can’t think of a example use – but I’m sure there is a fabulous one.
outputrepresents some type of output, such as from a calculation done through scripting.
3) New Input Types
for entering telephone numbers
a synonym for text, useful for the browser to keep search results, but not other fields
a validated field for urls
a validated entry field for email addresses
a whole host of date/time pickers (nice)
lets you choose a number
lets you pick a number (floating point) b
etween the minimum and maximum values
a colour picker, nice
4) Additional Attributes
this is a bonus – a really sensible and useful addition.
As you can see there are a host of nice new features. Some of the new tags you could start using now (largely they will be ignored by older browsers). Others will require browser tweaking to get them to work successfully. But I think all-round its a nice standard.