Contents
1 Overview of the New Web Standard
1.2 Time Travel through Historic Events
1.3.2 What Has Become Obsolete?
1.4 Can I Start Using HTML5 Now?
2 Structure and Semantics for Documents
2.1 Header with “header” and “hgroup”
2.3 Footer with “footer” and “nav”
2.4 Sidebar with “aside” and “section”
2.6 Figures with “figure” and “figcaption”
2.7 Text-Level Semantics—More New Tags
2.7.1 The Elements “ruby,” “rt,” and “rp”
2.7.5 Elements with Marginal Changes
3.1.1 The Input Types “tel” and “search”
3.1.2 The Input Types “url” and “email”
3.1.3 Date and Time with “datetime”, “date”, “month”, “week”, “time”, and “datetime-local”
3.1.4 The Input Types “number” and “range”
3.1.6 The New Input Types in Action
3.2 Useful Attributes for Forms
3.2.1 Focusing with “autofocus”
3.2.2 Placeholder Text with “placeholder”
3.2.3 Compulsory Fields with “required”
3.2.4 Even More Attributes for the “input” Element
3.3.1 Displaying Measurements with “meter”
3.3.2 Displaying the Progress of a Task with “progress”
3.3.3 Lists of Options with “datalist”
3.3.4 Cryptographic Keys with “keygen”
3.3.5 Calculations with “output”
3.4 Client-Side Form Validation
3.4.2 The “checkValidity” Function
3.4.3 Error Handling with “setCustomValidity()”
3.4.4 Summary of Validity Checks
3.4.5 Or Perhaps Better Not to Validate? “formnovalidate”
4.2 The “video” Element and Its Attributes
4.4 Tools for Video Conversion
4.5 Which Format for Which Browser?
4.6 Interim Solutions for Older Browsers
4.7 Video and Scripting—A Simple Video Player
4.7.2 Starting and Stopping the Video
4.7.3 Displaying and Setting the Playback Position
4.7.4 Fast Forward and Backward
4.7.5 Selecting Specific Scenes in the Film
4.7.6 Set Volume to High, Low, or Mute
4.7.8 Other Attributes and Methods of the “HTMLMediaElement” Interface
4.7.9 The Long List of Media Events
5.5.5 Outlines, Fills, and Clipping Masks
5.6.4 Drawing and Measuring Text
5.8.1 Working with the “ImageData” Object
5.8.2 Color Manipulation with “getImageData()”, “createImageData()”, and “putImageData()”
5.12 Base64 Encoding with “canvas.toDataURL()”
5.14.1 Animation with Multicolored Spheres
5.14.2 Playing a Video with “drawImage()”
5.15.2 Accessibility in Canvas?
7.1 Introduction to Geolocation
7.2 A First Experiment: Geolocation in the Browser
7.3 Technical Background of Determining Position
7.4 Display of Current Position on OpenStreetMap
7.5 Location Tracking with Google Maps
7.6.2 Important Code Fragments
8 Web Storage and Offline Web Applications
8.2.2 Offline Status and Events
8.4.1 Using the Application: As a Player
8.4.2 Using the Application: As an Administrator
8.4.3 Important Code Fragments
9.2 Example: A Broadcast Server
10.1 Introduction to Web Workers
10.3 Calculate Altitude Profiles with Canvas
10.3.1 Important Code Fragments
11.1.1 The Attributes “itemscope” and “itemprop”
11.1.2 The “itemtype” Attribute
11.1.4 The “itemref” Attribute
12 Finishing Touches: Some Global Attributes
12.1 News for the “class” Attribute
12.2 Defining Custom Attributes with “data-*”
12.4 The “classList” Interface
12.5 Drag and Drop with the “draggable” Attribute
12.5.1 Drag and Drop in Combination with the “FileAPI”