Introduction to HTML5

#text-block-8 { margin-bottom:0px; text-align:left; }

#text-block-11 { margin-bottom:0px; text-align:left; }

1. Laying out a Page with HTML5

Page Structure

Laying out a Page with HTML4 – the

‘old’ way

Laying out a Page with HTML5 Page Simplification

2. HTML5 – How We Got Here

The Problems HTML 4 Addresses The Problems XHTML Addresses The New More Flexible Approach of

HTML5

HTML5 and JavaScript Additional Changes Modernizr

The HTML5 Spec(s)

Current State of Browser Support

3. Sections and Articles

The section Tag

The HTML4 Way The HTML5 Way

Display of HTML5 Structual Elements The article Tag Outlining

4. HTML5 Audio and Video

Supported Media Types The audio Element Audio Formats

Multiple Sources

audio Tag Attributes

Getting and Creating Audio Files The Video Element Accessibility

Scripting Media Elements Dealing with non-supporting

Browsers

Graceful Degradation

#text-block-12 { margin-bottom:0px; text-align:left; }

5. HTML5 Forms

Modernizr

New Input Types

HTML5 New Form Attributes autocomplete novalidate

Some Other New Form Field

Attributes Required

Placeholder Autofocus

Autocomplete Form

Pattern

New Form Elements Datalist

Progress and Meter

6. HTML5 Web Storage

Overview of HTML5 Web

Storage

Web Storage

Browser Support

Local Storage

Session Storage

Prefixing your Keys

Other Storage Methods Web Database Storage Indexed Database API

7. HTML5 Canvas

Getting Started with Canvas Context

Drawing Lines

Multiple Sub-Paths

The Path Drawing Process The fill() Method

Color and Transparency Rectangles

Circles and Arcs Radians

Quadratic and Bézier Curves

Images – Basic / Sprites

Text

8. Integrated APIs Offline Application

API Cache Manifest File

The HTML File

Managing Application Cache with

JavaScript

Drag and Drop API