actsheet10-slideshow

HTML5

Technology Research created by Katrina Washington on May 23,2010

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.


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.


StructureHTML5 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 forthDivs 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.


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


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.


Progress- represents that 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 that 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.


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. Ex. (you might attach background music to a web page like this)<audio src=“spacemusic.mp3”

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

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.


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


HTML 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.


SourcesWikipedia- 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.aspTechnology Research created by Katrina Washington on May 23,2010

http://en.wikipedia.org/wiki/HTML5

actsheet10-slideshow

Documents