180

Sergey’s

HTML5 & CSS3

Quick Reference

By Sergey Mavrody, MFA Belisso Corporation 2009-2010

Table of Contents 1. Intro to HTML5 ...............................................9 Overview ..........................................................................9 About this book ............................................................... 9 What is HTML? ................................................................ 10 Major HTML versions ...................................................... 10 HTML5 ............................................................................ 10 XHTML5 ........................................................................... 11 CSS3 ................................................................................ 11 Why use HTML5? ........................................................... 11 Who this book is for ....................................................... 12

2. HTML Syntax ................................................15 HTML document ............................................................15 Basics .............................................................................. 15 Elements and Tags ........................................................ 15 Tag nesting .................................................................... 15 Void Elements ................................................................ 16 Attributes ..................................................................... 16 Boolean attribute .......................................................... 16

XHTML5 ...........................................................................17 Polyglot HTML document ............................................. 17 XHTML5 defined ............................................................ 17

Document Type and Structure....................................18 MIME Type ...................................................................... 18 Common MIME Types................................................... 19 Document Object Model (DOM) ............................... 20 Semantic page structure ............................................. 20

3

Syntax Summary ............................................................21 General Syntax Rules .................................................... 21 (X)HTML5 void tag syntax ............................................. 22 HTML5 elements with optional tags ............................ 22

Browser Compatibility Scripting...................................26 HTML5 compatibility detection ................................... 26 HTML5 enabling scripts ................................................. 26

3. HTML5 Elements ..........................................29 General Definitions .......................................................29 Chapter Legend & Conventions ................................ 29

Summary of HTML5 Elements .......................................29 HTML5 Forms aka Web Forms 2.0 ................................63 HTML5 types and attributes ........................... 63 HTML5 element ............................................. 65 element type/attribute matrix ...................... 66

HTML5 Browser Compatibility ......................................67 Elements ......................................................................... 67

4. Global Attributes and Events ....................69 Global Attributes ...........................................................69 Summary ........................................................................ 69

Global Events ................................................................71 HTML Event Handler Attributes .................................... 71 Window .......................................................................... 71 Form ................................................................................ 72 Keyboard ....................................................................... 73 Mouse ............................................................................. 73 Media ............................................................................. 74

5. CSS3 .............................................................77 CSS Basics ......................................................................77 Anatomy of a CSS Rule ................................................ 77 Typical CSS property locations .................................... 78 About CSS Properties .................................................... 78 CSS Cascading Priority ................................................. 79

4

Selector Types ............................................................... 80 CSS Box Model .............................................................. 81

CSS Properties................................................................82 Section definitions & conventions ............................... 82 Property model definitions & display conventions .... 82 Background ................................................................... 83 Border ............................................................................. 86 Border Effects ................................................................ 88 Font ................................................................................. 91 Box Model ...................................................................... 92 Marquee ........................................................................ 95 Text Formatting .............................................................. 96 Color .............................................................................100 Multi-column and Grid layout ...................................101 Flexible Box Layout......................................................103 Speech .........................................................................106 Table .............................................................................108 Auto Numbering and Lists ..........................................109 Animation and Transitions * .......................................110 Outline ..........................................................................112 2D and 3D Transforms .................................................113 CSS ‘Transform’ property functions ..........................114 Generated Content ...................................................115 Line Box ........................................................................117 Ruby..............................................................................122 Hyperlink Presentation ................................................123 Paged Media ..............................................................124 User Interface (UI) .......................................................127 Pseudo-Classes ...........................................................130 Pseudo-Elements .........................................................133 CSS At-Rules .................................................................134

CSS3 Browser Compatibility ......................................135

6. HTML5 APIs ................................................137 Canvas vs. SVG ...........................................................137 Differences and advantages ...................................137

5

Canvas .........................................................................138 About Canvas .............................................................138 Basic HTML document with Canvas element..........138 Moving canvas script into a function .......................139 Basic Canvas methods and properties ....................139 Canvas methods in action: drawing .......................141

Scalable Vector Graphic (SVG)................................142 Basic HTML document with inline SVG .....................143 Ways of creating SVG in HTML Document...............143 SVG Shapes .................................................................145

Audio and Video ........................................................145 Embedding audio and video....................................145 Video attributes...........................................................146 Handling media playback and load state ..............147

Web Workers (WW) .....................................................148 Parent HTML file ...........................................................148 WebWorker.js code ...................................................149

Web Sockets ................................................................150 WebSocket methods ..................................................150 WebSocket attributes .................................................150 WebSocket events ......................................................150 WebSocket example ..................................................151

Microdata and Semantic Web ................................151 Microdata basics ........................................................152 Global microdata attributes......................................152 Property types .............................................................153 Geolocation ................................................................154 Example of capturing location information ............154 Four Geolocation API objects ...................................156 1. Geolocation object................................................156 2. Position object .........................................................158 3. PositionOptions object ..........................................158 4. PositionError object .................................................159

Web Storage ...............................................................159 Two types of web storage APIs .................................159 Local vs. Session storage ............................................159

6

Setting storage values ................................................160 Storage API properties and methods .......................161

Drag and Drop ............................................................162 Simple Drag and Drop example ...............................162 DnD interfaces.............................................................163

Other Web Application APIs......................................165 Contacts API................................................................165 Programmable HTTP Caching and Serving .............165 Media Capture API .....................................................166

Browser Compatibility.................................................168 Web applications........................................................168 Audio and video codecs...........................................169

7. Appendix ..................................................171 HTML4 color keywords ................................................171 X11 color keywords .....................................................171 HTML special characters ............................................175 Properties which can be animated..........................176 Online Resources ........................................................176 HTML5 and CSS3 desktop applications tools ...........177 Acknowledgements ...................................................178

8. Index ................................................. 181-194

7

HTML document > Basics

2. HTML Syntax HTML document Basics Generally, HTML document represents a standalone HTML file. ■ HTML document is a code assembled of elements and text. ■ Elements are basic HTML building blocks, represented by HTML tags. ■ Elements form a hierarchical nested structure.

Elements and Tags Each element is denoted by an opening tag, in this example: , and a corresponding closing tag . In some cases a closing tag is not required.

HTML5 Reference

Overview

The well-known acronym HTML stands for HyperText Markup Language.

The difference between an element and a tag is that an element is a conceptual representation of HTML tag, which can also include its attributes and child tags.

Tag nesting ■ Tag is denoted by the less than () inequality signs. ■ Nested tag pairs have to be completely within each other, without overlapping with another pair.

The wrong nesting The correct nesting

15

Chapter 2. HTML Syntax

Void Elements Void element has only an opening tag and therefore it can not have any content. A terminating slash may optionally be inserted at the end of the element’s tag, immediately before the closing greater-than sign. For a non-void element the terminating slash is illegal.




Attributes An element in this example: input can have multiple attributes type, autofocus, name.



■ An attribute is a property of an element. ■ Attributes are placed inside the opening tag. ■ The tag name and attribute are both separated by white space. ■ An attribute is assembled with a name type and a value text, separated by the equal (=) sign. ■ No duplicate attributes allowed within a tag. ■ HTML5 attribute value can remain un-quoted if it doesn’t contain spaces, quotation marks or inequality signs type=text. Otherwise, an attribute value has to be quoted using either single or double quotes ’first name’.

Boolean attribute A boolean attribute is a property that represents either a false or true value. ■ The absence of a boolean attribute implies a value of “false”.



■ The presence of a boolean attribute implies that the value of the attribute is “true”. ■ Boolean attribute may take the name of the attribute itself as a value . ■ In a polyglot HTML/XHTML document, a boolean attribute with a true value is coded with a quoted value that matches the attribute name .



■ In a non-polyglot HTML document the value can be excluded .

16

XHTML5 > Polyglot HTML document

XHTML5 Polyglot HTML document A polyglot HTML document is a document that is valid in both HTML and XHTML. ■ A polyglot HTML document obeys both HTML and XHTML syntax rules by using a common subset of both the HTML and XHTML syntax. ■ A polyglot document can serve as either HTML or XHTML, depending on browser support and MIME type. ■ The choice of HTML vs. Polyglot syntax is dependent upon the project objectives, browser support, and other factors.



XHTML5 defined A polyglot HTML5 code essentially becomes an XHTML5 document if it is served with the XML MIME type [application/xhtml+xml]. In a nutshell the HTML5 polyglot document is: ■ HTML5 DOCTYPE/namespace. HTML5 no longer needs to refer to a Document Type Definition since HTML5 is no longer formally based on SGML. However, the DOCTYPE is needed for backward compatibility. ■ XHTML well-formed syntax A polyglot document can serve as either HTML or XHTML, depending on browser support and MIME type. A polyglot HTML5 code essentially becomes an XHTML5 document if it is served with the XML MIME type: application/xhtml+xml . In a nutshell the XHTML5 document is: ■ XML declaration is not required if the default UTF-8 encoding is used. ■ HTML DOCTYPE: The declaration is optional, but it may be used if the document is intended to be a polyglot document that may be served as both HTML or XHTML. ■ XHTML well-formed syntax ■ XML MIME type: application/xhtml+xml. This MIME declaration is not visible in the source code, but it appears in the HTTP Content-Type header when it’s configured on the server. Of course, the XML MIME type is not yet supported by the current version Internet Explorer though IE can render XHTML documents. ■ Default XHTML namespace: ■ Secondary SVG, MathML, Xlink, etc. namespace: To me, this is like a test: if you don’t have a need for these namespaces in your document, then using XHTML is overkill. But, essentially, the choice between HTML5 and XHTML5 boils down to the choice of a media type.

17

Chapter 2. HTML Syntax

Document Object Model (DOM) A web browser creates a model of HTML document represented by a tree of objects, such elements, attributes, and text. This model is called Document Object Model, DOM. DOM objects could be manipulated by JavaScript. An object instance of a hierarchical DOM tree called a node.



In this example button action invokes JavaScript, finding the object ID of the Overview container and hiding the DIV container.

Semantic page structure (X)HTML5 offers new elements forming semantic structure of a web page. Element

Typical Content

Typical Parent

and

Child Elements

title, logo, banner, Introductory Body, Section, Article information

Nav, Section



Primary navigation menu

Body

Section, Nav

Generic page section

Body

Article, Header, Footer, Aside, Nav

Story, subsection, blog post,

Body, Section

Section, Header, Footer