HTML5

The educational technology and digital learning wiki
Jump to navigation Jump to search

<pageby nominor="false" comments="false"/>

Introduction

HTML5 (or HTML 5) is a new HTML version initiated by a (invitation only) group called Web Hypertext Application Technology Working Group (WHATWG). It inludes people from various vendors that were unhappy with the evolution of HTML (i.e. XHTML 2 and DOM3). So in the beginning there was strife, but since 2007 the WHATWG project is endorsed by the W3c under the name HTML5. It is very likely that that it will become an official recommendation. For now, the current draft is an official W3C working draft.

Inititally, the project was quite ambitious and geared a lot towards a framework for web applications, including multimedia. Since there were vendor oppositions, it now (oct/2009) looks like something that could be called "application-enhanced HTML/XHTML". In the abstract of the 2009 draft specification you can read: “his specification evolves HTML and its related APIs to ease the authoring of Web-based applications. Additions include context menus, a direct-mode graphics canvas, a full duplex client-server communication channel, more semantics, audio and video, various features for offline Web applications, sandboxed iframes, and scoped styling. Heavy emphasis is placed on keeping the language backwards compatible with existing legacy user agents and on keeping user agents backwards compatible with existing legacy documents.”

I suspect that the final standard will be in modularized format, i.e. vendors may or may implement some for starters. Also, since the group includes major browser vendors, some HTML 5 features already are implement in current browsers. - Daniel K. Schneider 10:56, 2 October 2009 (UTC).

Feature overview

Interestingly, the specification (draft) is written in a different way. Upfront the emphasis is not on tags, but on the DOM API defined with the Web IDL (language independant) interface definition language. In other words, DOM is used as the very basis for defining the HTML5 language.

XHTML, SVG and MthML support

It seems that there will be a "real" XHTML version, i.e. one that can be served as XML and there would allow to include an other XML language like SVG, MathML, XSLT, etc.

However, according to the "diff" document at W3C, it is possible to include MathML and SVG just like this: 

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>


New header

HTML 5 is not longer defined in SGML, there there won't be a doctype. Also the charset definition is simpler: 

<!doctype html>
<meta charset="UTF-8">

Content elements - support for real text markup

HTML5 adopted some of the dead XHTML 2 spirit. Authors now can use the following content elements to structure a text. Quotations are taken from Draft Standard — 2 October 2009

article:

The article element “represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

Articles can be nested.

section:

“The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.”

Note: section should not be used randomly to markup blocks of elements (although "web designers" will certainly do it...). The div tag is made for that.

nav

“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.”

aside

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”

figure

“The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.”

The canvas element

This element allows to draw with JavaScript. It is already implemented in several browsers, and some web sites use it to demo little games for example.

“The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as XBL. When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element. The contents of the canvas element, if any, are the element's fallback content.” ([1], retrieved 10:56, 2 October 2009 (UTC))

What this basically means is that:

  • Dynamic canvas contents are made with JavaScript code.
  • Each canvas should have a a static fallback element that can be printed (for example)

Media elements - Audio and Video

Media elements are part of so-called embedded content (and that also includes changed definitions of the "old" figure, img, iframe, embed, object, param, map and aread).

The DOM API for those elements is fairly long and includes

All media elements implement the following attributes:

  • src, the source
  • autobuffer,
  • autoplay,
  • loop,
  • controls

audio:

“An audio element represents a sound or audio stream. Content may be provided inside the audio element. User agents should not show this content to the user; it is intended for older Web browsers which do not support audio, so that legacy audio plugins can be tried, or to show text to the users of these older browsers informing them of how to access the audio contents.” ([2], retrieved 10:56, 2 October 2009 (UTC))

video

“A video element is used for playing videos or movies. Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plugins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents.” ([3], retrieved 10:56, 2 October 2009 (UTC))

Media specific child elements:

  • source can be a child of any media element. It allows authors to specify multiple media resources for media elements. It does not represent anything on its own.
  • paramdefines parameters for plugins invoked by object elements. It does not represent anything on its own.

More input types

HTML5 did not include XForms (too complicated for vendors?). Instead they defined a list of new types:

The type attribute now also includes tel, url, email, datatiem, date, month, week, time, datetiem-local, number, range, and color.

Currrent implementations

Some stuff works fairly well in Firefox

Documentation

  • HTML5 Draft Standard A multipage version that is easier on your browser, dated 30 September 2009 , retrieved 10:56, 2 October 2009 (UTC).
  • HTML5 Draft Standard, Whatwg Working Group, (this is long HTML page), dated 2 October 2009, retrieved 10:56, 2 October 2009 (UTC).

Links

Overviews
Manuals
Vendor specific
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=HTML5&oldid=23820"