HTML 5: What’s news?

26 June, 2008 at 19:41 Leave a comment

HTML5 logoJanuary 22nd W3C published the latest working draft for HTML 5. The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera and many hundred other vendors.

Some of the new features in HTML 5 are functions for embedding audio, video and graphics, client-side data storage, and interactive documents. Other features are new page elements like <header>, <section>, <footer>, and <figure>.

HTML 5 improves interoperability and reduce development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

HTML 5 is planned to be the fifth major revision of the core language of the World Wide Web, HTML. When HTML 5 is expressed in XML, it is called XHTML 5. The ideas behind HTML 5 were pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG). HTML 5 was adopted as the starting point of the work of the new HTML working group of the W3C in 2007. The HTML working group has published the First Public Working Draft of the specification on 22nd January 2008. The specification is ongoing work, and expected to remain so for many years.

HTML 5 differences

Syntax

The HTML 5 language has a “custom” HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4, such as <em/content/. Documents using this “custom” syntax must be served with the text/html MIME type.

HTML 5 also defines detailed parsing rules (including “error handling”) for this syntax which are largely compatible with popular implementations. User agents will follow these rules for resources that have the text/html MIME type. Here is an example document that conforms to the HTML syntax:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

The other syntax that can be used for HTML 5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML MIME type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]

Below is an example document that conforms to the XML syntax of HTML 5. Note that XML documents must have an XML MIME type such as application/xhtml+xml or application/xml.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

Character Encoding

For the HTML syntax of HTML 5 authors have three means of setting the character encoding:

  • At the transport level. By using the HTTP Content-Type header for instance.
  • Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used.
  • Using a meta element with a charset attribute that specifies the encoding as the first element child of the head element. <meta charset="UTF-8"> could be used to specify the UTF-8 encoding. This replaces the need for <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

For the XML syntax authors have to use the rules as set forth in the XML specifications to set the character encoding.

The DOCTYPE

The HTML syntax of HTML 5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML MIME type are always handled in standards mode. [DOCTYPE]

The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD. With HTML 5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

New Elements

The following elements have been introduced for better structure:

  • section represents a generic document or application section. It can be used together with h1h6 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 and video 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.
  • mark 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 new list attribute for input 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 and nest 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 ruby, rt and rb elements allow for marking up ruby annotations.

The input element’s type attribute now has the following new values:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • 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

HTML 5 has introduced several new attributes to various elements that were already part of HTML 4:

  • The a and area elements now have a media attribute for consistency with the link element. It is purely advisory.
  • The a and area elements have a new attribute called ping 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 the hreflang and rel attributes.
  • The base element can now have a target attribute as well mainly for consistency with the a element and because it was already widely supported. Also, the target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, for example in conjunction with iframe.
  • The value attribute for the li element is no longer deprecated as it is not presentational. The same goes for the start attribute of the ol element.
  • The meta element has a charset 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 the input (except when the type attribute is hidden), select, textarea and button 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 for input, output, select, textarea, button and fieldset elements allows for controls to be associated with more than a single form.
  • The input, button and form elements have a new replace attribute which affects what will be done with the document after a form has been submitted.
  • The form and select elements (as well as the datalist element) have a data attribute that allows for automatically prefilling of form controls, in case of form, or the form control, in case of select and datalist, with data from the server.
  • The new required attribute applies to input (except when the type attribute is hidden, image or some button type such as submit) and textarea. It indicates that the user has to fill in a value in order to submit the form.
  • The input and textarea elements have a new attribute called inputmode 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 the disabled attribute on it. This was not possible before.
  • The input element has several new attributes to specify constraints: autocomplete, min, max, pattern and step. As mentioned before it also has a new list attribute which can be used together with the datalist and select element.
  • input and button also have a new template attribute which can be used for repetition templates.
  • The menu element has three new attributes: type, label and 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 contextmenu attribute.
  • The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree.
  • The script element has a new attribute called async that influences script loading and execution.
  • The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications.
  • The link element has a new attribute called sizes. It can be used in conjunction with the icon relationship (set through the rel attribute) to indicate the size of the referenced icon.
  • The ol element has a new attribute called reversed to indicate that the list order is descending when present.
  • The iframe element has two new attributes called seamless and sandbox which allow for sandboxing content, e.g. blog comments.

Several attributes from HTML 4 now apply to all elements. These are called global attributes: class, dir, id, lang, style, tabindex and title.

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.
  • The contextmenu attribute can be used to point to a context menu provided by the author.
  • The draggable attribute can be used together with the new drag & drop API.
  • The irrelevant attribute indicates that an element is not yet, or is no longer, relevant.
  • The ref, registrationmark and template global attributes complement the data template feature.
  • The data-* collection of author defined attributes. Authors can define any attribute they want as long as they prefix it with data- to avoid clashes with future versions of HTML. The only requirement on these attributes is that they are not used for user agent extensions.

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 the onmessage attribute which can be used together with the new event-source element and the cross-document messaging API.

Changed Elements

These elements have slightly modified meanings in HTML 5 to better reflect how they are used on the Web or to make them more useful:

  • The a element without an href attribute now represents a “placeholder link”.
  • The address element is now scoped by the new concept of sectioning.
  • The b element now represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is emboldened.
  • The hr element now represents a paragraph-level thematic break.
  • The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized. Usage varies widely by language.
  • For the label element the browser should no longer move focus from the label to the control unless such behaviour is standard for the underlying platform user interface.
  • The menu element is redefined to be useful for actual menus.
  • The small element now represents small print (for side comments and legal print).
  • The strong element now represents importance rather than strong emphasis.
  • Quotation marks for the q element are now to be provided by the author rather than the user agent.

Absent Elements

The elements in this section are not to be used by authors. User agents will still have to support them and HTML 5 will get a rendering section in due course that says exactly how. (The isindex element for instance is already supported by the parser.)

The following elements are not in HTML 5 because their effect is purely presentational and therefore better handled by CSS:

  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u

The following elements are not in HTML 5 because their usage affected usability and accessibility for the end user in a negative way:

  • frame
  • frameset
  • noframes

The following elements are not included because they have not been used often, created confusion or can be handled by other elements:

  • acronym is not included because it has created lots of confusion. Authors are to use abbr for abbreviations.
  • applet has been obsoleted in favor of object.
  • isindex usage can be replaced by usage of form controls.
  • dir has been obsoleted in favor of ul.

Finally the noscript is only conforming in the HTML syntax. It is not included in the XML syntax as its usage relies on an HTML parser.

Absent Attributes

Some attributes from HTML 4 are no longer allowed in HTML 5. If they need to have any impact on user agents for compatibility reasons it is defined how they should work in those scenarios.

  • accesskey attribute on a, area, button, input, label, legend and textarea.
  • rev and charset attributes on link and a.
  • shape and coords attributes on a.
  • longdesc attribute on img and iframe.
  • target attribute on link.
  • nohref attribute on area.
  • profile attribute on head.
  • version attribute on html.
  • name attribute on img, form and a (use id instead).
  • scheme attribute on meta.
  • archive, classid, codebase, codetype, declare and standby attributes on object.
  • valuetype and type attributes on param.
  • language attribute on script.
  • summary attribute on table.
  • axis and abbr attributes on td and th.
  • scope attribute on td.
  • headers attribute on th.

In addition, HTML 5 has none of the presentational attributes that were in HTML 4 as they are better handled by CSS:

  • align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
  • alink, link, text and vlink attributes on body.
  • background attribute on body.
  • bgcolor attribute on table, tr, td, th and body.
  • border attribute on table, img and object.
  • cellpadding and cellspacing attributes on table.
  • char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr.
  • clear attribute on br.
  • compact attribute on dl, menu, ol and ul.
  • frame attribute on table.
  • frameborder attribute on iframe.
  • height attribute on td and th.
  • hspace and vspace attributes on img and object.
  • marginheight and marginwidth attributes on iframe.
  • noshade attribute on hr.
  • nowrap attribute on td and th.
  • rules attribute on table.
  • scrolling attribute on iframe.
  • size attribute on hr, input and select.
  • type attribute on li, ol and ul.
  • valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr.
  • width attribute on hr, table, td, th, col, colgroup and pre.
[http://www.w3.org]
[wikipedia.org]


Bookmark and Share

Advertisements

Entry filed under: XHTML, XML. Tags: , .

jQuery: JavaScript library DTD manipulation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


IT Passion’s Store

Archives

Communities

Get the Source
OSGi supporter
JUG Milano

Upcoming Events



....

Blog Stats

  • 328,400 hits

My PageRank

What's My Google PageRank?

%d bloggers like this: