Web designer Nepal

HTML5

New Generation - Defining the new generation of web and its future

Table of Contents

  1. What is HTML 5?
  2. What is the WHATWG?
  3. History
  4. Differences from HTML 4/XHTML 1.x
  5. Elements
  6. New Elements
  7. Changed Elements
  8. Absent Elements
  9. Attributes
  10. New Attributes
  11. Absent Attributes
  12. API’S
  13. Event
  14. Error handling
  15. Backwards Compatible
  16. Sample
  17. References

What is HTML 5?

HTML 5 is a new version of HTML 4.01 and XHTML 1.0 addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. Besides defining a markup language that can be written in both HTML (HTML5) and XML (XHTML5) it also defines many APIs that form the basis of the Web architecture. These APIs are known to some as "DOM Level 0" and have never been documented. Yet they are extremely important for browser vendors to support existing Web content and for authors to be able to build Web applications.

HTML 5 is the main focus of the WHATWG community and also that of the (new) W3C HTML Working Group.

What is the WHATWG?

The WHATWG (Web Hypertext Application Technology Working Group) is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organizations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

History

The conceptual thinking for HTML 5 began in late 2003. The World Wide Web Consortium (W3C), the organization that oversees the web's standard protocols and guidelines, expressed interest in the HTML 5 draft originally developed by the Web Hypertext Application Technology Working Group (WHATWG).

Development is underway, and HTML 5 is anticipated to reach W3C Candidate Recommendation status in 2012, though many modern browsers already have partial support for HTML 5 specifications.

Differences from HTML 4/XHTML 1.x

The following is a cursory list of differences and some specific examples.

Elements

List of some of the elements

Tag Description  4   5 
<!--...--> Defines a comment 4 5
<!DOCTYPE>  Defines the document type 4 5
<a> Defines a hyperlink 4 5
<abbr> Defines an abbreviation 4 5
<acronym> Not supported. Defines an acronym 4  
<address> Defines an address element 4 5
<applet> Not supported. Defines an applet 4  
<area> Defines an area inside an image map 4 5
<article> Defines an article   5
<aside> Defines content aside from the page content   5
<audio> Defines sound content   5
<b> Defines bold text 4 5
<base> Defines a base URL for all the links in a page 4 5
<basefont> Not supported. Use CSS instead 4  
<bdo> Defines the direction of text display 4 5
<big> Not supported. Defines big text 4  
<blockquote> Defines a long quotation 4 5
<body> Defines the body element 4 5
<br> Inserts a single line break 4 5
<button> Defines a push button 4 5
<canvas> Defines graphics   5
<caption> Defines a table caption 4 5
<center> Not supported. Defines centered text 4  
<cite> Defines a citation 4 5
<code> Defines computer code text 4 5
<col> Defines attributes for table columns  4 5
<colgroup> Defines groups of table columns 4 5
<command> Defines a command button   5
<datagrid> Defines data in a tree-list   5
<datalist> Defines a dropdown list   5
<datatemplate> Defines a data template   5
<dd> Defines a definition description 4 5
<del> Defines deleted text 4 5
<details> Defines details of an element   5
<dialog> Defines a dialog (conversation)   5
<dir> Not supported. Defines a directory list 4  
<div> Defines a section in a document 4 5
<dfn> Defines a definition term 4 5
<dl> Defines a definition list 4 5
<dt> Defines a definition term 4 5
<em> Defines emphasized text  4 5
<embed> Defines external interactive content or plugin   5
<eventsource> Defines a target for events sent by a server   5
<fieldset> Defines a fieldset 4 5
<figure> Defines a group of media content, and their caption   5
<font> Deprecated. Defines text font, size, and color 4  
<footer> Defines a footer for a section or page   5
<form> Defines a form  4 5
<frame> Not supported. Defines a sub window (a frame) 4  
<frameset> Not supported. Defines a set of frames 4  
<h1> to <h6> Defines header 1 to header 6 4 5
<head> Defines information about the document 4 5
<header> Defines a header for a section or page   5
<hr> Defines a horizontal rule 4 5
<html> Defines an html document 4 5
<i> Defines italic text 4 5
<iframe> Defines an inline sub window (frame) 4 5
<img> Defines an image 4 5
<input> Defines an input field 4 5
<ins> Defines inserted text 4 5
<isindex> Not supported. Defines a single-line input field 4  
<kbd> Defines keyboard text 4 5
<label> Defines a label for a form control 4 5
<legend> Defines a title in a fieldset 4 5
<li> Defines a list item 4 5
<link> Defines a resource reference 4 5
<mark> Defines marked text   5
<map> Defines an image map  4 5
<menu> Defines a menu list 4 5
<meta> Defines meta information 4 5
<meter> Defines measurement within a predefined range   5
<nav> Defines navigation links   5
<nest> Defines a nestingpoint in a datatemplate   5
<noframes> Not supported. Defines a noframe section 4  
<noscript> Defines a noscript section 4 5
<object> Defines an embedded object 4 5
<ol> Defines an ordered list 4 5
<optgroup> Defines an option group 4 5
<option> Defines an option in a drop-down list 4 5
<output> Defines some types of output   5
<p> Defines a paragraph 4 5
<param> Defines a parameter for an object 4 5
<pre> Defines preformatted text 4 5
<progress> Defines progress of a task of any kind   5
<q> Defines a short quotation 4 5
<rule> Defines the rules for updating a template   5
<s> Not supported. Defines strikethrough text 4  
<samp> Defines sample computer code 4 5
<script> Defines a script 4 5
<section> Defines a section   5
<select> Defines a selectable list 4 5
<small> Defines small text 4 5
<source> Defines media resources   5
<span> Defines a section in a document 4 5
<strike> Not supported. Defines strikethrough text 4  
<strong> Defines strong text 4 5
<style> Defines a style definition 4 5
<sub> Defines subscripted text 4 5
<sup> Defines superscripted text 4 5
<table> Defines a table 4 5
<tbody> Defines a table body 4 5
<td> Defines a table cell 4 5
<textarea> Defines a text area 4 5
<tfoot> Defines a table footer 4 5
<th> Defines a table header 4 5
<thead> Defines a table header 4 5
<time> Defines a date/time   5
<title> Defines the document title 4 5
<tr> Defines a table row 4 5
<tt> Not supported. Defines teletype text 4  
<u> Not supported. Defines underlined text 4  
<ul> Defines an unordered list 4 5
<var> Defines a variable 4 5
<video> Defines a video   5
<xmp> Not supported. Defines preformatted text 4  

New Elements

The following elements have been introduced for better structure:

<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>
    <video src="ogg"></video>
    <legend>Example</legend>
</figure>

Then there are several other new elements:

<input list="browsers">
    <datalist id="browsers">
        <option value="Safari">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Firefox">
    </datalist>

The input element's type attribute 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.

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:

Absent Elements

The elements in this section are not to be used by authors. User agents will still have to support them and various sections in HTML 5 define how. E.g. the obsolete isindexelement is handled by the parser section.

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

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

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

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.

Attributes

List of attributes

Attribute Value Description 4 5
accesskey character Specifies a keyboard shortcut to access an element 4  
class classname Specifies a classname for an element (used to specify a class in a style sheet) 4 5
contenteditable true
false		 Specifies whether or not a user is allowed to edit the content   5
contextmenu menu_id Specifies the context menu for an element   5
dir ltr
rtl		 Specifies the text direction for the content in an element 4 5
draggable true
false
auto		 Specifies whether or not a user is allowed to drag an element   5
id id Specifies a unique id for an element 4 5
irrelevant true
false		 Specifies whether or not a element is irrelevant. An irrelevant element is not displayed   5
lang language_code Specifies a language code for the content in an element. Language code reference 4 5
ref URL / id Specifies a reference to another document / another part of a document (use only if the template attribute is set)   5
registrationmark reg_mark Specifies a registration mark for an element   5
style style_definition Specifies an inline style for an element 4 5
tabindex number Specifies the tab order of an element 4 5
template URL / id Specifies a reference to another document / another part of the document that should be applied to an element   5
title text Specifies extra information about an element 4 5

New Attributes

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

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:

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 eventsource element and the cross-document messaging API.

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.

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

API’S

HTML 5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

Video API

<video src=””samplevideo.flv” autoplay=”true” controls poster=”front.jpg” height=”150” width=”200”> alternate content </video>

Audio

<audio src=”audio.oga” controls>alternate content</audio>

Note: Ogg Vorbis is a completely open, patent-free, professional audio encoding and streaming technology with all the benefits of Open Source.

MathML and SVG

The HTML syntax of HTML 5 allows for MathML(Mathematical Markup Language) and SVG (Scalable Vector Graphics) elements to be used inside a document. E.g. a very simple document using some of the minimal syntax features could look like:

For SVG:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG test</title>
  </head>
  <body>
    <p>A green Circle:
     <svg><circle r=”50” cy=”10” fill=”green/>”</svg>
    </p>
  </body>
</html>

For mathml

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>MathML test</title>
  </head>
  <body>
    <math>
      <mrow>
        <mi>y</mi>
        <mo>=</mo>
        <msup>
          <mi>x</mi>
          <mn>2</mn>
        </msup>
      </mrow>
    </math>
  </body>
</html>

More complex combinations are also possible. E.g. with the SVG foreignObject element you could nest MathML, HTML, or both inside an SVG fragment that is itself inside HTML

Event

List of events and attributes

Attribute Value Description 4 5
accesskey character Specifies a keyboard shortcut to access an element 4  
class classname Specifies a classname for an element (used to specify a class in a style sheet) 4 5
contenteditable true
false		 Specifies whether or not a user is allowed to edit the content   5
contextmenu menu_id Specifies the context menu for an element   5
dir ltr
rtl		 Specifies the text direction for the content in an element 4 5
draggable true
false
auto		 Specifies whether or not a user is allowed to drag an element   5
id id Specifies a unique id for an element 4 5
irrelevant true
false		 Specifies whether or not a element is irrelevant. An irrelevant element is not displayed   5
lang language_code Specifies a language code for the content in an element. Language code reference 4 5
ref URL / id Specifies a reference to another document / another part of a document (use only if the template attribute is set)   5
registrationmark reg_mark Specifies a registration mark for an element   5
Style style_definition Specifies an inline style for an element 4 5
Tabindex number Specifies the tab order of an element 4 5
Template URL / id Specifies a reference to another document / another part of the document that should be applied to an element   5
Title text Specifies extra information about an element 4 5

 

Error handling

An HTML5 (text/html) browser will be flexible in handling incorrect syntax, in contrast to the XHTML variant of HTML 5 (XHTML5), where such errors must not be ignored. HTML5 is designed so that old HTML 4 browsers can safely ignore new HTML 5 constructs. In contrast to HTML 4, the HTML 5 specification gives detailed rules for lexing and parsing, with the intent that different compliant browsers will produce the same result in the case of incorrect syntax.

Backwards Compatible

HTML 5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS.

User agents, however, will always have to support these older elements and attributes and this is why the specification clearly separates requirements for authors and user agents. This means that authors cannot use the isindex or the plaintext element, but user agents are required to support them in a way that is compatible with how these elements need to behave for compatibility with deployed content.

Since HTML 5 has separate conformance requirements for authors and user agents there is no longer a need for marking features "deprecated".

Sample

Some sample site list

  1. http://html5demos.com/
  2. http://www.youtube.com/html5

 

References

Reference site list