Technology Research created by Katrina Washington on May 23,2010

WHAT’S ON THE HORIZON?

HTML5

Technology Research created by Katrina Washington on May 23,2010

Introduction to HTML5

In a joint effort between the W3C HTML WG and the WHATWG ( The Web Hypertext Application Technology Working Group) work on HTML5 commenced in 2004. WHATWG is a community of people interested in evolving HTML and was founded by individuals from Apple, the Mozilla Foundation and Opera Software.

HTML5 introduces and enhances a wide range of features including form controls, multimedia, API’s, structure and semantics to give authors more flexibility and interoperability. This will enable more interactive websites and applications.

Technology Research created by Katrina Washington on May 23,2010

Introduction to HTML5 cont… This new version of HTML often called HTML5 or

Web Applications 1.0 closely resembles the current version. There are no namespaces, elements don’t have to be closed, browsers are forgiving of errors, a table is still a table and a p is still a p.

HTML5 has been explicitly designed to degrade gracefully in browsers that don’t support it due to the wide variety of browsers and versions being used today. It offers real benefits to page authors while promising even more to page readers as browsers are slowly upgraded.

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5StructureHTML5 adds new elements to specifically identify each of the

common constructs: Section- anything that has its own heading such as a part or

chapter in a book or a section in a chapter. Header- not the same as the “head” element but the page header

shown on the page Footer- the page footer where the fine print goes; ( the signature

in a e-mail message) Nav- a collection of links to other pages Article- an independent entry in a blog, magazine, compendium,

and so forth

Divs are no longer needed. The meaning of different sections can be inferred from standard names. This is especially important for audio, cell phone, and other non-standard browsers.

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5 cont….Block Semantic ElementsAlong with the structural elements HTML5

adds some purely semantic block-level elements. Aside- represents a note, tip, sidebar, pullquote, a

parenthetical remark or something that is just outside the main flow of the narrative.

Figure- represents a block-level image, along with a caption, but is not limited to pictures. The figure element may be used to caption audio, video, iframe, object, and “embed” elements.

Dialog- represents a conversation between several people

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5 cont.. Inline Semantic ElementsHTML4 currently has five different inline elements to represent subtle

different variations of code: var, code, kbd, tt and samp. However, it doesn’t have any way to indicate such basic qualities as time or numbers. HTML5 aims to rectify this with several new inline elements. Mark or m element- represents text that is “marked” somehow but not

necessarily emphasized. An example would be highlighted text in a book. Time- represents a specific moment in history. The time element helps

browsers and others recognize times in HTML pages. Meter- represents a numeric value in a specified range. Each meter element

can have up to six attributes offering information about the amount in a more machine-recognizable form: Value Min Low High Max Optimum

Each should contain a decimal indicating the relevant range.

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5 cont… Progress- represents the state of an ongoing

process. Ex.(this progress control says that a download is 33% complete)

<p>Downloaded:

<progress value=“1534602” max=“4603807”>33%</progress></p>

Value- represents the current state of the operation

Max- represents the total amount toward which the progress is moving

In the example above the element indicates that 1,534,602 bytes out of a total 4,603,807 bytes have been downloaded. You can display indefinite progress bars by omitting the “max” attribute.

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5 cont…Embedded mediaVideo on the web is booming, but it’s almost all proprietary. Markup

that works for embedding video content in one browser doesn’t work in the next browser. A new “video” element has been proposed which allows the embedding of arbitrary video formats.

A complementary “audio” element is also proposed.<audio src=“spacemusic.mp3”

Autoplay=“autoplay” loop=“20000” />

Ex. (you might attach background music to a web page like this)

 The “autoplay” attribute tells the browser to begin playing as soon

as the page is loaded without waiting for an explicit user request. It will loop 20,000 times before shutting off. (Or until the user either goes to another page or closes the window.)

These elements aren’t supported by legacy browsers and can be inaccessible to blind and deaf users. The audio and video elements may contain additional markup describing the content of the audio and video.

Technology Research created by Katrina Washington on May 23,2010

What’s New in HTML5 cont…InteractivityHTML5 introduces several new elements focused on more

interactive experiences for web pages. Details- represents further information that may not be shown by

default. “Details” element can have an “open” attribute. When this occurs the details will be initially shown to the reader.

Datagrid- serves the role of a grid control. It is intended for use with trees, lists, and tables that can be updated by both users and scripts. A datagrid gets its initial data from its contents: a table, select, or other group of HTML elements.

Menu and command- the menu element has actually been present since version 2. It was deprecated in HTML4 but is being brought back in HTML5. A “menu” containing “command” elements, each of which causes an immediate action. Commands can be turned in to check boxes with a checked=”checked” attribute. You can also turn checkboxes into radiobuttons using the “radiogroup” attribute.

Label- gives a title for the menu

 

Technology Research created by Katrina Washington on May 23,2010

ConclusionHTML 5 is part of the future of the web.

HTML 5 will improve interoperability and reduce development costs by making precise rules on how to handle HTML elements. The web is constantly evolving with new and innovative websites being created every day. The boundaries of HTML are being pushed in every direction. HTML5 is still in development which will likely continue for several years, but it’s great to know what’s on the horizon.

Technology Research created by Katrina Washington on May 23,2010

Sources and ResourcesSources

Wikipedia- http://en.wikipedia.org/wiki/HTML5New Elements in HTML5-

http://www.ibm.com/developerworks/library/xhtml5Alist Apart: Articles: A Preview of HTML5-

http://www.alistapart.com/articles/previewof html5

ResourcesWikipedia- http://en.wikipedia.org/wiki/HTML5WHATWG (The Web Hypertext Application Technology

Working Group) - http://www.whatwg.org/W3C- http://dev.w3.org/html5/html-author/W3schools.com-

http://www.w3schools.com/html5/html5_reference.asp