HTML 5 Draft
We have been using HTML 4.01 and XHTML 1.0 for a long time. And the draft of HTML 5 was published a month ago. There are several new tags that I suppose you will like. For example
<input type="number" /> will show up an input control that your visitor may only enter some numeric value. That sounds really cool! You may read a short list of changes/improvements below but that is not the complete list for sure.
The following elements have been introduced for better structure:
sectionrepresents a generic document or application section. It can be used together with
h6to indicate the document structure.
articlerepresents an independent piece of content of a document, such as a blog entry or newspaper article.
asiderepresents a piece of content that is only slightly related to the rest of the page.
headerrepresents the header of a section.
footerrepresents a footer for a section and can contain information about the author, copyright information, et cetera.
navrepresents a section of the document intended for navigation.
dialogcan be used to mark up a conversation like this:
<dialog> <dt> Costello <dd> Look, you gotta first baseman? <dt> Abbott <dd> Certainly. <dt> Costello <dd> Who's playing first? <dt> Abbott <dd> That's right. <dt> Costello <dd> When you pay off the first baseman every month, who gets the money? <dt> Abbott <dd> Every dollar of it. </dialog>
figurecan be used to associate a caption together with some embedded content, such as a graphic or video:
<figure> <video src=ogg>…</video> <legend>Example</legend> </figure>
Then there are several other new elements:
videofor multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent.
sourceelements are used together with these elements if there are multiple streams available of different types.
embedis used for plugin content.
mrepresents a run of marked text.
meterrepresents a measurement, such as disk usage.
timerepresents a date and/or time.
canvasis used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.
commandrepresents a command the user can invoke.
datagridrepresents an interactive representation of a tree list or tabular data.
detailsrepresents additional information or controls which the user can obtain on demand.
datalisttogether with the a new
inputis used to make comboboxes:
<input list=browsers> <datalist id=browsers> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
nestelements provide a templating mechanism for HTML.
event-sourceis used to "catch" server sent events.
outputrepresents some type of output, such as from a calculation done through scripting.
progressrepresents a completion of a task, such as downloading or when performing a series of expensive operations.
typeattribute now has the following new values:
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
And of course there are new attributes and changes within the currently existing attributes.
HTML 5 has introduced several new attributes to various elements that were already part of HTML 4:
areaelements now have a
mediaattribute for consistency with the
linkelement. It is purely advisory.
areaelements have a new attribute called
pingthat specifies a space separated list of URIs which have to be pinged when the hyperlink is followed. Currently user tracking is mostly done through redirects. This attribute allows the user agent to inform users which URIs are going to be pinged as well as giving privacy-conscious users a way to turn it off.
areaelement, for consistency, now has the
baseelement can now have a
targetattribute as well mainly for consistency with the
aelement and because it was already widely supported. Also, the
targetattribute for the
areaelements is no longer deprecated, as it is useful in Web applications, for example in conjunction with
valueattribute for the
lielement is no longer deprecated as it is not presentational. The same goes for the
startattribute of the
metaelement has a
charsetattribute now as this was already supported and provides a nicer way to specify the character encoding for the document.
autofocusattribute can be specified on the
input(except when the
buttonelements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience as the user can turn it off if he does not like it, for instance.
fieldsetelements allows for controls to be associated with more than a single form.
formelements have a new
replaceattribute which affects what will be done with the document after a form has been submitted.
selectelements (as well as the
datalistelement) have a
dataattribute that allows for automatically prefilling of form controls, in case of
form, or the form control, in case of
datalist, with data from the server.
requiredattribute applies to
input(except when the
imageor some button type such as
textarea. It indicates that the user has to fill in a value in order to submit the form.
textareaelements have a new attribute called
inputmodewhich gives a hint to the user interface as to what kind of input is expected.
You can now disable an entire
fieldsetby using the
disabledattribute on it. This was not possible before.
inputelement has several new attributes to specify constraints:
step. As mentioned before it also has a new
listattribute which can be used together with the
buttonalso have a new
templateattribute which can be used for repetition templates.
menuelement has three new attributes:
autosubmit. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global
styleelement has a new
scopedattribute which can be used to enable scoped style sheets. Style rules within such a
styleelement only apply to the local tree.
scriptelement has a new attribute called
asyncthat influences script loading and execution.
htmlelement has a new attribute called
manifestthat points to an application cache manifest used in conjunction with the API for offline Web applications.
Several attributes from HTML 4 now apply to all elements. These are called global attributes:
There are also several new global attributes:
contenteditableattribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup. The
contextmenuattribute can be used to point to a context menu provided by the author. The
draggableattribute can be used together with the new drag & drop API. The
irrelevantattribute indicates that an element is not yet, or is no longer, relevant. </LI>
The following are the attributes for the repetition model. These are global attributes and as such may be used on all HTML elements, or on any element in any other namespace, with the attributes being in the
HTML 5 also makes all event handler attributes from HTML 4 that take the form
onevent-nameglobal attributes and adds several new event handler attributes for new events it defines, such as the
onmessageattribute which can be used together with the new
event-sourceelement and the cross-document messaging API.
If you are interested of reading the differences between HTML 4.01 and HTML 5, you may visit http://www.w3.org/TR/html5-diff/.