Html5 intro

HTML5 IntroductionYnon Perek

Wednesday, January 30, 13

Agenda

HTML History

HTML5 Rules

New Features

Browser Support

HTML5 Page Structure


In The Beginning

While working at CERN in the 90s, Berners-Lee develops WWW

1991 The first web site (CERN’s info page)

1994 Berners-Lee founded the W3C

http://www.flickr.com/photos/tanaka/3212373419/




1991 HTML1

Described in a document called “HTML Tags”

Included 20 elements

Influenced by SGML


1995 HTML2

One year after Netscape was founded

Forms

Tables

Image Maps

http://www.flickr.com/photos/kalleboo/2214787531/




1997 HTML3.2

Standardizing browser wars

Dropping Netscape’s blink and MS marquee

On the right: Blue - IE Light green - Netscape

http://en.wikipedia.org/wiki/File:Browser_Wars.svg




1999 HTML4Browser war was over. MS won

Many new elements, including iframe, label, legend, object

Deprecated: applet, center, font, menu, strike

http://www.flickr.com/photos/daniello/422213306/




After The Browser Wars

W3C starts to work on XHTML, MathML, SVG and others XML based technologies

HTML is considered “finished”


HTML4Suitable for web sites, not web applications


2004 WHATWG

The Web Hypetertext Application Technology Working Group came to life in 2004 to bring life into HTML

It was founded by Apple, Mozilla and Opera

Published a proposal for Web Applications 1.0 spec, which has later evolved into HTML5


2009 HTML5

No more XHTML

Many new elements

Web Application Oriented


State of HTML5

Still In Draft

Candidate Recommendations stage during 2012

W3C Recommendation deadline: 2022

However, many parts of the recommendations are fully functional today


Web Tech History1991 HTML

1995 HTML2

1996 CSS1 + JavaScript

1997 HTML3.2

1998 CSS2

1999 HTML4

2000 XHTML1

2002 Tableless Web Design

2005 Ajax

2009 HTML5


HTML5 Vision


Paving The Cow PathThe WHATWG took the time to understand what everyone does, analyzed good practices and standardized them

This leads to evolution and not revolution


Utility Over PurityHTML5 is overwhelmingly practical, allowing many code that used to be invalid and making developers lives easier

Less code, less headaches, more fun.


Content & PresentationHTML5 deprecates many old presentational elements in favor of CSS.

Enhancements in CSS3 selectors enable better separation between content and presentation


Plugin Free ParadigmProvide native APIs for everything that used to required a proprietary plugin

Flash is no longer mandatory


Paving The Cow Path

Utility over Purity

Separation of Content and Presentation

Plugin Free

HTML5 Vision


Q & A

http://www.flickr.com/photos/92163630@N00/95509221/




The Rules


Doctype

Remove old clutter from the doctype declaration

For an HTML5 page, use:<!DOCTYPE html>

MIME Type: text/html


Character Encoding

Remove old clutter from encoding definitions

Use:<meta charset=”UTF-8”>

Note no need to close meta tags

Can also use the old syntax


Tag Fun

No need to close void elements

both <br /> and <br> are valid

HTML Validator: http://validator.w3.org/


http://validator.w3.org/

http://validator.w3.org/

HTML5 New Features

New Syntactic Elements

New Semantic Elements

New APIs


HTML5 Semantics

WHATWG analyzed and learned the uses of <div> elements in many web sites

They have found a few common usages

HTML5 includes specialized elements for these common usages

Can still use a <div>


Semantic Elementsheader: header content

footer: footer content

section: a section of articles

article: articles are arranged inside sections

aside: related content

nav: navigational element


New APIsWeb Storage

Web SQL

Application Cache

Web Workers

Web Sockets

Desktop Notifications

Drag & Drop

File System API

Geolocation

Device Orientation

Forms

Audio & Video

Canvas

Web GL

History API

And More...


HTML PolyfillsReplacement library for older browsersMake a smooth switch to HTML5

http://www.flickr.com/photos/tuba/2424237036/




HTML5 Tools

HTML5 Boilerplate. A base HTML5 template with backward compatibility and feature detection

Modernizr. A feature detection js library

Polyfills:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills


https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills




Demo: HTML Boilerplate

Page Structure

Best practices

Feature Detection


HTML5 IDEs

WebStorm

Komodo Edit

Eclipse / Visual Studio

gVim

Aptana Studio


HTML5 Lab

Build a home page for your resume in HTML5 with no styling

Describe your job history, hobbies and education

Use the boilerplate and semantic elements

Bonus: Add some CSS Styling


Documents

Html5 intro