HTML 5 is really a combination of Technologies

HTML, CSS and JavaScript. When all three of these technologies work together in a web browser then you have an HTML5 application.

Activity: Watch this Video: What is HTML5 in 1m32sec

What is HTML5
source:
Source:

HTML is the Hypertext Markup Language (HTML) specification which has been around in various forms since approximately 1991. HTML is a tag based language that defines the meaning and placement of elements of a web page.

HTML5 is the latest evolution of the standard that defines HTML. As of February 2012, the current version of HTML is 4.01. HTML5 is simply the newest version of HTML. HTML5 has actually been under development since 2004, however it began to get more attention in 2010 when Apple released a statement discussing how Adobe's Flash will no longer be required to play video and other content from the web.

HTML5 contains powerful capabilities for Web-based applications with more powerful interaction, video support, graphics, more styling effects, and a full set of APIs

  • HTML5 adapts to any device, whether desktop, mobile, tablet, or television.
  • HTML5 is an open platform developed under royalty free licensing terms.

People use the term HTML5 in two ways:

  1. To refer to a set of technologiesthat together form the future Open Web Platform. These technologies include HTML5 specification, CSS3, SVG, MathML, Geolocation, XmlHttpRequest, Context 2D, Web Fonts (WOFF) and others. The boundary of this set of technologies is informal and changes over time.
  2. To refer to the HTML5 specification only

HTML5 technologies, classified into several groups based on their function.

•Semantics: allowing you to describe more precisely what your content is.

•Connectivity: allowing you to communicate with the server in new and innovative ways.

•Offline & Storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.

•Multimedia: making video and audio first-class citizens in the Open Web.

•2D/3D Graphics & Effects: allowing a much more divisive range of presentation options.

•Performance & Integration: providing greater speed optimization and better usage of computer hardware.

•Device Access: allowing for the usage of various input and output devices.

•Styling: letting authors write more sophisticated themes.

Cascading Style Sheets (CSS).
Cascading Style Sheets, or more specifically CSS version 3 (a.k.a CSS3), provide the ability to apply styling to HTML elements. An example of styling would be to change the color of an HTML <button> from grey to green,as well as defining where on a web page it will be visible such as the top left corner.

JavaScript.
JavaScript, which is really the meat behind HTML 5, is a type of programming language that lets developersimplement actionswithina web page. An example of an “action” would be when a web page visitor clicks a button that loads a picture. So, HTML defines the <button>, CSS styles the button, and JavaScript handles the action behind the scenes by retrieving the picture and then telling the browser how to display it for the end user.

Source:

JavaScript and the DOM

The DOM (Document Object Modal)is a method of representing and getting access to the web page HTML elements eg form, button or a div tag. By using Javascript we can get access to information about and manipulate all the elementsand attributes on a HTML page.

  • Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.

  • Attributes

Tags can also have attributes, which are extra bits of information. They look something like <tag attribute="value">Margarine</tag>.

  • Elements

Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Rumple Stiltskin</title>' is a title element.

Example
Javascriptworks with the DOM andallows us to put text in between the DIV Element id called display.

document.getElementById(display).innerHTML = "Display Breakfast MENU for Saturday "

More about … Document Object Model, or DOM

The way that document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.

  • Window object: Top of the hierarchy. It is the outmost element of the object hierarchy.
  • Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page.
  • Form object: Everything enclosed in the <form>...</form> tags sets the form object.
  • Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of few important objects:

What's new in HTML5:

Video

The video API is at a mature state right now, making it easy to incorporate video into your applications.

WebRTC

There are two parts to the WebRTC API, the ability to give the browser access to your camera and microphone and the possibility to connect to another person or application in a peer-to-peer type way. Watch out Skype!

Canvas

The Canvas API is very mature and allows you to create vector-based graphics from JavaScript. This opens up a whole host of opportunities from graphing to games.

WebGL

WebGL builds on the technology behind Canvas to provide a low-level 3D interface. In many cases the API taps into your computer’s GPU for native-speed rendering and animation of 3D scenes.

Push Technologies

The web was originally based on a request model – the user would request content via the browser and only then would that content be delivered. That model has been extended now with two technologies, Web Sockets which allow the bi-directional communication and Server-sent events which are pushed from server to client. All this means that web-based collaborative applications and multiplayer games are now are a reality.

Offline

Another area where browsers are currently being improved is in their ability to allow web-applications to run while the device is not connected to the internet.

You can store and manipulate data locally by using Web Storage, IndexDB/WebSQL and File APIs. You can also cache data locally and so control what part of your web application the user need download when they are online.

Geolocation

The Geolocation API allows you to determine a users physical location, which can be useful not just for mapping applications but in general situations where you want to customize the user’s experience based on their whereabouts.

Advantages of using HTML5: (From a Developer's perspective) :

  • Code Maintenance becomes easier.

In HTML5 we have new structural elements to create page template, the final result will be a cleaner and more organized code.

  • Local Data Storage:

HTML5 Supports local data storage on the client side. Data can be accessed by the web application locally even when the client is disconnected for a short span.

  • Can be made as a Mobile App:

HTML5 Runs efficiently on any given mobile platform be it iOS, Android or Symbian. Sites like Facebook, Google Voice etc run HTML5 based app on iPhone.

Best Of All: (From a User's Perspective)

All major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer 9) continue to add new HTML5 features to their latest versions.

  • Improved User Experience
  • No need to download added plugins.
  • More innovative apps with better features.

What is the WHATWG?

The Web Hypertext Application Technology Working Group (WHATWG) 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 organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

Resources

  • Everything you need to know about CSS3
  • CSS Generator (v good)
  • HTML5 Boilerplate helps you buildfast, robust, and adaptable web apps or sites.
  • Intro Tutorial to CSS ( v good)
  • HTML5 Page Structure- video
  • THE HTML5 TEST – HOW WELL DOES YOUR BROWSER SUPPORT HTML5?
  • What is HTML5? Written By: Brad Markle
  • HTML5: Hype, Substance and Scrutiny
  • Web Design trends 2013

EXAMPLE WEB PAGE Using HTML5 + CSS + Javascript
source:

Simple Web Page / HTML5 SYTRUCTURE
HTML5 CODE+ Link to Javascript
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>An example html5 document</title>
</head>
<body>
<header>
<h1>Title</h1>
<!--[if IE]>
<script src="
<![endif]-->
</header>
<aside>
<p>illustration</p>
</aside>
<section>
<article>
<header>
<h2>Title</h2>
<p>content</p>
</header>
<p>content</p>
</article>
</section>
<footer>
<p>content</p>
</footer>
</body>
</html>
EXAMPLE OF CSS
<style type="text/css">
aside{
float: left;
width: 470px;
min-height: 480px;
background: url(../images/aside-bg.png) center top no-repeat;
margin: 0 0 20px 0; }
section{
float: right;
width: 428px;
padding-left: 20px;
margin: 0 0 20px 0px;
border-left: 2px dotted #b2a497; }
</style>

Windows Browsers

Summary - Firefox has the best HTML5 Accessibility Support Score

HTML5 Accessibility Support Score

  • 40/100
  • 86/100
  • 45/100
  • 18/100
  • 18/100

Mac Browsers

Summary - Safari has the best HTML5 Accessibility Support Score

HTML5 Accessibility Support Score

  • 42/100
  • 27/100
  • 14/100
  • 72/100

1

Intro HTML5January 20, 13