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:
section
represents a generic document or application section. It can be used together withh1
–h6
to indicate the document structure.
article
represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside
represents a piece of content that is only slightly related to the rest of the page.
header
represents the header of a section.
footer
represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav
represents a section of the document intended for navigation.
dialog
can 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>
figure
can 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:
audio
andvideo
for 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.source
elements are used together with these elements if there are multiple streams available of different types.
embed
is used for plugin content.
m
represents a run of marked text.
meter
represents a measurement, such as disk usage.
time
represents a date and/or time.
canvas
is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.
command
represents a command the user can invoke.
datagrid
represents an interactive representation of a tree list or tabular data.
details
represents additional information or controls which the user can obtain on demand.
datalist
together with the a newlist
attribute forinput
is used to make comboboxes:<input list=browsers> <datalist id=browsers> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>
The
datatemplate
,rule
, andnest
elements provide a templating mechanism for HTML.
event-source
is used to "catch" server sent events.
output
represents some type of output, such as from a calculation done through scripting.
progress
represents a completion of a task, such as downloading or when performing a series of expensive operations.The
input
element’stype
attribute now has the following new values:
datetime
datetime-local
date
month
week
time
number
range
url
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:
The
a
andarea
elements now have amedia
attribute for consistency with thelink
element. It is purely advisory.The
a
andarea
elements have a new attribute calledping
that 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.The
area
element, for consistency, now has thehreflang
andrel
attributes.The
base
element can now have atarget
attribute as well mainly for consistency with thea
element and because it was already widely supported. Also, thetarget
attribute for thea
andarea
elements is no longer deprecated, as it is useful in Web applications, for example in conjunction withiframe
.The
value
attribute for theli
element is no longer deprecated as it is not presentational. The same goes for thestart
attribute of theol
element.The
meta
element has acharset
attribute now as this was already supported and provides a nicer way to specify the character encoding for the document.A new
autofocus
attribute can be specified on theinput
(except when thetype
attribute ishidden
),select
,textarea
andbutton
elements. 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.The new
form
attribute forinput
,output
,select
,textarea
,button
andfieldset
elements allows for controls to be associated with more than a single form.The
input
,button
andform
elements have a newreplace
attribute which affects what will be done with the document after a form has been submitted.The
form
andselect
elements (as well as thedatalist
element) have adata
attribute that allows for automatically prefilling of form controls, in case ofform
, or the form control, in case ofselect
anddatalist
, with data from the server.The new
required
attribute applies toinput
(except when thetype
attribute ishidden
,image
or some button type such assubmit
) andtextarea
. It indicates that the user has to fill in a value in order to submit the form.The
input
andtextarea
elements have a new attribute calledinputmode
which gives a hint to the user interface as to what kind of input is expected.You can now disable an entire
fieldset
by using thedisabled
attribute on it. This was not possible before.The
input
element has several new attributes to specify constraints:autocomplete
,min
,max
,pattern
andstep
. As mentioned before it also has a newlist
attribute which can be used together with thedatalist
andselect
element.
input
andbutton
also have a newtemplate
attribute which can be used for repetition templates.The
menu
element has three new attributes:type
,label
andautosubmit
. 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 globalcontextmenu
attribute.The
style
element has a newscoped
attribute which can be used to enable scoped style sheets. Style rules within such astyle
element only apply to the local tree.The
script
element has a new attribute calledasync
that influences script loading and execution.The
html
element has a new attribute calledmanifest
that 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:
class
,dir
,id
,lang
,tabindex
andtitle
.There are also several new global attributes:
The
contenteditable
attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup. Thecontextmenu
attribute can be used to point to a context menu provided by the author. Thedraggable
attribute can be used together with the new drag & drop API. Theirrelevant
attribute 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
http://www.w3.org/1999/xhtml
namespace.:
repeat
repeat-start
repeat-min
repeat-max
HTML 5 also makes all event handler attributes from HTML 4 that take the form
onevent-name
global attributes and adds several new event handler attributes for new events it defines, such as theonmessage
attribute which can be used together with the newevent-source
element 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/.
I always thought XHTML was a huge waste of time for virtually zero gain. I am glad that it is being bypassed for HTML 5, which has a great deal of features that I like.
Thanks you very much. The post on HTML is really helpful