HTML 5 - the latest revision of Hypertext Markup Language

[TechyGuy]

What is HTML 5?

The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. HTML5 is the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web.

Work on HTML 5 originally started in late 2003, as a proof of concept to show that it was possible to extend HTML 4's forms to provide many of the features that XForms 1.0 introduced, without requiring browsers to implement rendering engines that were incompatible with existing HTML Web pages. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification in June 2004 under the name Web Applications 1.0.

HTML5 aims to reduce the need for proprietary plug-in-based rich Internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX. The HTML 5 specification helps to improve interoperability and to reduce software costs by giving precise rules for properly handle HTML documents but also to recover if syntax errors.

HTML vs XHTML

There are various concrete syntaxes that can be used to transmit resources that use this abstract language, two of which are discussed below.

The first is "HTML5". This is the format recommended for most authors. It is compatible with all legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an "HTML5" document by Web browsers.

The second is "XML", also known as "XHTML5". When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an "XHTML5" document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the "HTML5" syntax.

The "DOM5 HTML", "HTML5", and "XHTML5" representations cannot all represent the same content. For example, namespaces cannot be represented using "HTML5", but they are supported in "DOM5 HTML" and "XHTML5". Similarly, documents that use the noscript feature can be represented using "HTML5", but cannot be represented with "XHTML5" and "DOM5 HTML". Comments that contain the string "-->" can be represented in "DOM5 HTML" but not in "HTML5" and "XHTML5". And so forth.

[TechyGuy]

What's new in HTML 5

The new content model concept is introduced in HTML 5. It describes what nodes are allowed inside the elements, and thus what is the structure of an HTML document or fragment look like.

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following are the broad categories:

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content

In addition, certain elements are categorized as form-associated elements and further subcategorized to define their role in various form-related processing models. Some elements have unique requirements and do not fit into any particular category.

1. Metadata content: This content sets up the presentation or behavior of the rest of the content, or sets up the relationship of the document with other documents, or conveys other "out of band" information.

e.g.: base, command, link, meta, noscript, script, style, title

2. Flow content: Most elements that are used in the body of documents and applications are categorized as flow content.

e.g.: a, abbr, address, area (if it is a descendant of a map element), article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link (if the itemprop attribute is present), map, mark, math, menu, meta (if the itemprop attribute is present), meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style (if the scoped attribute is present), sub, sup, svg, table, textarea, time, ul, var, video, Text

3. Sectioning content: Sectioning content is content that defines the scope of headings and footers.

e.g.: article, aside, nav, section

4. Heading content: Heading content defines the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself).

e.g.: h1, h2, h3, h4, h5, h6, hgroup

5. Phrasing content: Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Phrasing content runs form paragraphs.

e.g.: a (if it contains only phrasing content), abbr, area (if it is a descendant of a map element), audio, b, bdo, br, button, canvas, cite, code, command, datalist, del (if it contains only phrasing content), dfn, em, embed, i, iframe, img, input, ins (if it contains only phrasing content), kbd, keygen, label, link (if the itemprop attribute is present), map (if it contains only phrasing content), mark, math, meta (if the itemprop attribute is present), meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, Text

[TechyGuy]

The main tags and attributes of HTML 5

1. Doctype

The doctype is simplified:

DOCTYPE html>

It is not sensitive (we can write "DOCTYPE html>" for example), and its role is only to avoid rendering mode "Quirks" (or compatibility mode) browsers.

2. Section

The element <Section> can define the different sections of a document such as chapters, the header and footer-of-page, or any other section in a document. It can be combined with elements h1, h2, h3, h4, h5, and h6 for better definition of the document structure.

3. Article

<Article> represents a text from an external source such as a newspaper article, blog or forum.

<Article> 
<p><a href="http://forums.techarena.in"> 
XHTML is dead, long live HTML!</ a><br />  
In this somewhat provocative title (and false) hides an official reality last night: W3C has announced that its work on XHTML 2 will be completed in year 2009.</ p> 
</Article>

4. Aside

The element <aside> content is intended to indirectly related to the article itself, it is what surrounds such as a sidebar to archive.

<aside> 
    <h1>Archives</ h1> 
    <ul> 
        <li><a href="/archives/09/05 /">May 2009</ a></ li> 
        <li><a href="/archives/09/06 /">June 2009</ a></ li> 
        <li><a href="/archives/09/07 /">July 2009</ a></ li> 
    </ ul> 
</aside>

5. Header

The element <header> represents the header of a section or page.

6. Footer

The element <footer> represents the footer of a section or page to make the information on copyright, legal ... etc..

7. Nav

The element <nav> represents a section of navigation links.

<nav> 
<a href="index.php">Home</ a> 
<a href="contact.php">Contact</ a> 
</nav>

8. Dialog

The element <dialog> can be used to define a conversation.

<dialog> 
 <dt>Rupesh
 <dd>Hello, how are you? 
 <dt>Julie 
 <dd>Well thank you and yourself? 
 <dt>Rupesh
 <dd>Thank you, have you seen the new operation Kiwiz? 
 <dt>Julie 
 <dd>Ah yes its top, I think I'm going to order a book about the Sims 3. 
</dialog>

... although elements of definition lists (dt, dd) are explicitly used in the example proposed by the W3C, this usage seems rather incongruous.

9. Figure

The element <Figure> can be used to group elements such as pictures or videos with their legend <legend>.

<figure> 
<img src="/images/kitten.jpg" /> 
  <legend>A kitten cute and cuddly</ legend> 
</figure>

10. <Audio> and <video>

These elements are used for multimedia content.

<audio> 
  <! - Two formats in order of priority: -> 
  <source src="trapper.ogg" type="audio/ogg"> 
  <source src="trapper.aac" type="audio/aac"> 
  <! - Content if alternative formats on the audio or not supported in the browser: -> 
  <a href="trapper.ogg">Download <quote>Before I was a trapper</cite></ a> 
David TMX (Ogg Vorbis) 
</audio>

11. Canvas

The element <canvas> has been introduced in order to create 2D graphics in JavaScript on the fly. It allows to create an area for drawings or graphics applications. An editor that runs entirely on canvas has already been implemented by Mozilla.

12. Drag and Drop

Attribute draggable can make an element draggable.

13. Contenteditable

This attribute indicates that a field is editable. The user can change the content and manipulate the markup.

[TechyGuy]

Store data offline with HTML 5

The most interesting part of HTML5 permanently resides in its ability to offline storage. Programs like Thunderbird and Outlook (and Gmail now to some extent) you can work with data from the last connection, while still offline. With HTML5, you will have this same functionality, but in the browser. This is the first major step closer to the desktop and the Web, and it helps to imagine the future, all kinds of uses in web applications.

The W3C took the right side of various technologies and combined them in what promises to be the markup language most powerful to date.

Things that you can't do with HTML 5

There are certain features which HTML 5 is not capable of handling.

1. Localisation: To create localized versions of an HTML application, the best option is to pre-process the files on the server and then use HTTP content negotiation to serve the appropriate language.

2. Declarative 2D vector graphics and animation: HTML could not embed vector graphics into XHTML documents since it is the domain of SVG.

3. Declarative 3D scenes: HTML is also unable to embed 3D imagery into XHTML documents since because it is the domain of X3D or technologies based on X3D that are namespace-aware.

4. Timers: HTML 5 does not provide any support to timers because timeouts should not be fired while another script is running. Thus the HTML scripting model is strictly single-threaded and not reentrant.