HTML 5

HTML 5 History

HTML5 is a markup language, has been come into existence around January 2008. The two measure organization is involving in developing of HTML5 since its initiating time. One is W3C (World Wide Web Consortium) and theanother one is WHATWG (Web Hypertext Application Technology Working Group). 

According to these organizations, they have

been working on the HTML5 since initial time. So HTML5 language is still under development. There is more about to come yet in HTML5. 

During the development of HTML5, It was announced that the HTML5 will reach the W3C recommendation till at the end of 2010. 

But the last call

didn’t matched till the target date. Now according to W3C the HTML5 will reach its full recommendation last by 2014.

Where according to WHATWG the last call for HTML5 Specification was in

October 2009. Then suddenly the amazing changes in decision the WHATWG

started to work on unversioned development of HTML, and with abounding

its HTML5 Project. Later in January 2011, it renamed the HTML5 Stander

to HTML5.

On 18 January 2011, the W3C introduce a logo to

represent the HTML5 interest. While presenting its logo

to publicly, W3C announced that, the logo can be used for

general purpose.

what is HTML 5

HTML5 is the newest version of Hyper Text MarkupLanguage. The first web browser introduced in 1993 and name was MOSAIC. The development of MOSAIC was at the NCSA (National Center of Supercomputing Applications). 

Later it was discontinued to development on 7th of January 1997. Still the people were using the nonstandard version of HTML.

The standard version came into existence in 1995, when HTML 2.0 was announced.

Later after two years HTML 3.0 and after two years HTML 4.01 was announced. And still we are using the milestone of HTML 4.01.

The first Draft of HTML5 Was announced in January 2008. And amazingly

HTML5 has a broad browser support. Though the HTML5 is still under developing

phase.

 And a lot of organizations is working and planning on the development of HTML5. 

We can’t expect the HTML5 may be the future of Web 

Designing, but we can say that this is the present of

Web designing. Before development of HTML5,

 we were in compulsion to work on Photoshop and Flash application, but with the development of HTML5, these affords has been reduced. Many more long script code can be done with a simple tagging. As we can use <details> HTML5 and CSS3 Tutorial 9 Copyright © 2013 html5andcss3.org

and <summary> tag for show and hide function of java Script.

We need not

to put a long affords to code this thing. Apart from this features we can use

the 3D image with <canvas>, the special designed paragraph with <article>

and many more.

NEW ELEMENT

1- <aside> Defines content aside from the page content

2- <audio> Defines sound content

3- <bdi> Isolates a part of text that might be formatted in a different direction from other text outside it

4- <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

5- <command> Defines a command button that a user can invoke

6- <datalist> Specifies a list of pre-defined options for input controls

7- <defines> article an article

8- <details> Defines additional details that the user can view or hide

9- <embed> Defines a container for an external application or interactive content (a plug-in)

10- <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

11- <figcaption> Defines a caption for a <figure> element

12- <footer> Defines a footer for a document or section

13- <header> Defines a header for a document or section

14- <hgroup> Groups a set of <h1> to <h6> elements when a heading has multip lelevels

15- <keygen> Defines a key-pair generator field (for forms)

16- <mark> Defines marked/highlighted text

17- <meter> Defines a scalar measurement within a known range (a gauge)

18- <nav> Defines navigation links

19- <output> Defines the result of a calculation

20- <progress> Represents the progress of a task

21- <ruby> Defines a ruby annotation (for East Asian typography)

22- <rt>Defines an explanation/pronunciation of characters (for East Asian typography)

23- <rp> Defines what to show in browsers that do not support ruby annotations

24- <section> Defines a section in a document

25- <source> Defines multiple media resources for <video> and <audio>

26- <summary> Defines a visible heading for a <details> element

27- <track> Defines text tracks for <video> and <audio>

28- <time> Defines a date/time

29- <video> Defines a video or movie

30- <wbr> Defines a possible line-break

article

<article> .... </article>

An ARTICLE Tag is such an element of HTML5, which can be used to write the article. If a user wants to write a part of the website in different style and looking in different manner, the ARTICLE Tag can be used there to represent it in a different way. The ARTICLE Tag is used to define the independent content in a note. The ARTICLE Tag is very useful when you write an article, a blog or a forum post and e.t.c. ARTICLE Tag of HTML5 can contain any of element which is require to create the proper content, either it may be the Para tag, span tag or it may be header, footer section.

aside

<aside> .... </aside>

An ASIDE Element is used to define the text surrounded by its familiar content.

ASIDE Element has its individual importance to creating some index related to the topic. Mainly ASIDE Tag is used in sidebar of a page, whenever user clicks on the index, it redirects the user on the related content. ASIDE Element also can be used to represent some block quote content in an article.

audio

<audio> .... </audio>

With the development of HTML5, AUDIO Element has been introduced for playing the audio

file in the browser with full user control support. Yet, before the development of HTML5

AUDIO Element, we were unable to play a audio file without using the third party browsers

plug-in as flash player or quick time. Now the AUDIO Element can be used instead of installing

a browser plug-in. The AUIDO Element contains an extra child element is called SOURCE,

which is used to call the exact media file which we want to be played in the browser. The AUDIO

Element can also contains it’s properties for controlling the AUDIO File.

bdi

<bdi> .... </bdi>

The BDI Element stand for Bi-Directional Isolation Element, which is one of the best feature of HTML5, specially when someone wants to display atext in the Bi-direction way around the remaining text. Whenever we write the aroma, Hebrew or Urdu fonts, it shows from the opposite side of the general fonts. So browser behavior directly change for that particular text.

To use of BDI is exactly has been implemented for better performance of those texts, that’s can be read easily by the user.

canvas

<canvas> .... </canvas>

The another solution of graphical representation has been introduced with the develpment of HTML5 as CANVAS Element. The CANVAS Element is incomplete without writing the JavaScript along with.

So the CANVAS Element always followed by JavaScript also. The use of CANVAS Element has

been built specially for graphical representation. A lot more affords has been reduced to use external plug-in like Photoshop and another Graphic Softwares. Still there is lot more can’t be done with canvas but as creating the normal frame and graph it is sufficient. The another Element for graphical

representation is SVG also. We will learn it in latter chapter and will try to do a snap differences between these elements also.

command

<command> .... </command>

COMMAND Element is basically used for commanding code of HTML5. As if we want to save a file, open a file or anything else that shows the command function, will be prompted with COMMAND Element. It can be used for radio buttons, checkboxes and command button to invoke the particular function. COMMAND Element is not supported by any of the browsers yet. This Element is still under development. The COMMAND Element can be used inside the MENU Element or outside anywhere in the BODY Element

datalist

<datalist> .... </datalist>

DATALIST Element is basically use for auto completion of the form. The complete list is put in the option box, and when the user double click the input field the option is dragged down. This is best feature if user doesn’t know what to fill in the input box.

embed

<embed> .... </embed>

EMBED Element is another media element, which is used to call a media file in browser. A browser pluging may be require to play the media files. 

EMBED Element is specially used for calling a flash movie.

figure

<figure> .... </figure>

FIGURE Element is used to call an image file inside the fixed container.

FIGURE Element has its fix container properties which is relevant to the remaining text. Whenever a programmer call an external image file inside the FIGURE Element, It automatically adjust the paragraph text and figure alignment.

figcaption

<figcaption> .... </figcaption>

FIGCAPTION Element is used to put an additional information about the image. As if we have describe about the image, we don’t need to define an another paragraph to define the description. It may slightly complex also to use another paragraph and style it with the displayed image. So with FIGCAPTION Element, we can exactly put a description and it will automatically

adjust its surrounding style according the image.

footer

<footer> .... </footer>

FOOTER Element is used define the FOOTER area of the page. A FOOTER

Element can contain the copyright information, terms and uses, author’s

information, developers and e.t.c. A FOOTER Element may content many of

other elements also.

header

<header> .... </header>

The HEADER Element is commonly used for defining the header for a particular document or section. The HEADER Element also can be used for introductory content of a container and may be also used for navigational links.

You may have multiple HEADER Element in a single document. The HEADER

Element can’t be used within the footer, address and another header element.

hgroup

<hgroup> .... </hgroup>

The HGROUP Element is commonly used for wrapping the <h1> to <h6> element. The HGROUP Element is best useful when, someone wants to put a header and sub header or we can say multiple header in the document. The complete Element is wrapped inside the HGROUP Element.

key

<keygen name=”key”>

The KEYGEN Element is commonly used for generating the keypair in the

form. Whenever user hit the submit button, the KEYGEN Element creates two

key pair, first one is Public Key and another one is Private Key. Private key is

encrypted and stored in local key database and the public key is sent with the

form data to server. The KEYGEN Element is most useful when user wants to

generate the unique key for a particular form.