HTML 5

1.1 HTML 5 Differences and Compatibility

http://dev.w3.org/html5/html4-differences/

HTML versions

HTML 4 is an old version of HTML that permits compatibility with old web pages.
XML is more general than HTML and often used by applications to transport and store data.
XHTML is a stricter, cleaner version of HTML 4 that complies with XML syntax.
It is supported by all major browsers and provides better cross-browser consistency.
HTML 5 provides new tags and attributes, better semantics for SEO, accessibility, modular design and coding, and new features for multimedia, data and applications.
It is recommended for any new pages you create, unless you have specific compatibility reasons for using XHTML or HTML 4.

New elements

HTML suffers from divitis (or div soup). HTML5 adds elements to better indicate use of content.
header and footer - begins and ends a document, article or section
nav - holds navigation links, often in a list
article - content that can stand on its own.
section - a division in an article or document.
aside - related to the page content.
hgroup - groups headings (h1-h6) which can appear in headers, footers, articles and sections
figure - self-contained content, such an illustration, diagram or photo, but can be text.

New form field attributes

form - allows you to put form elements anywhere in a page, even outside the form tag
url, email, number, search - new input types that help validate user entry (IE7-8 treat as text)
autofocus - puts the focus of the cursor on the element (useful on login and search pages)
autocapitalize - uppercase the first letters in proper nouns like names and locations
autocorrect - correct in text areas and other free-form inputs
autocomplete - display a drop-down list of matching options from previously entered values
placeholder - text that displays until the user enters a value
required - forces user to enter a value without needing JavaScript or server-side validation
min, max, step, maxlength, multiple, pattern - other input constraints for built-in validation

H5F - JavaScript library to provide HTML 5 form support for non-supportive browsers.

Character sets

XHTML: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
HTML5: <meta charset="utf-8"> - utf-8 is now the most used on the web and is recommended
http://www.joelonsoftware.com/articles/Unicode.html - technical overview

Deprecated or obsolete elements and attributes

Use CSS instead of formatting elements and attributes.
font, center, big; align, bgcolor, cellpadding/cellspacing, hspace/vspace
You can omit type attributes from stylesheet and script tags.
<link rel="stylesheet" type="text/css" href="…">
<script type="text/javascript" src="…"></script>
Avoid frames and framesets because of usability issues, but iframes are still acceptable.

Support for older browsers

Most recent versions of popular browsers support most HTML 5 and CSS 3 features.
Test on Internet Explorer 7-9, Mozilla Firefox, Apple Safari, Google Chrome and maybe Opera.
Check Google Analytics to determine what browsers and versions your users are using.

html5shiv (also called htmlshim) is a JavaScript file that allows Internet Explorer versions 6-8 to minimally understand HTML 5 tags. It should be included in the head section of the document.
In Dreamweaver CS5.5, html5shiv is included only in the two HTML 5 templates.

Browser support for HTML 5 and CSS 3 features

http://www.caniuse.com/ - compare browsers
http://www.findmebyip.com/litmus - compare browsers
http://www.findmebyip.com/ - test your browser
http://www.css3.info/modules/selector-compat/ - CSS3 selectors
http://tools.css3.info/selectors-test/test.html - test your browser
http://browserlab.adobe.com/ - log in with free Adobe ID to test a URL in different browsers
http://speckyboy.com/2010/09/12/css3-compatabilty-tools-resources-and-references-for-internet-explorer/
http://www.inmotionhosting.com/infographics/html5-cheat-sheet/

Converting to HTML 5

In Dreamweaver CS5.5, click File > Convert > HTML 5.
This fixes some tags, including DOCTYPE, html, meta charset, and some other tags.
Closing slashes are removed in empty tags (img, link, br).
(But XHTML5 allows the strict validation of XHTML and the new features of HTML5.)
Manually change many div tags to header, footer, article, section, etc.
Remove tags from CSS id selectors if needed. e.g. change div# navigation to #navigation

Use HTML for semantics, CSS for presentation

Use tags as they are intended, for SEO, clean code, fast page loads and easy maintenance.
To change the visual design of a site, you should not have to change the content of each page.
Use h1-h6 for headings, li for list items, p for paragraphs. Use tables for tabular data, not layout.
Put presentation in external stylesheets. Avoid inline CSS. Use class and id attributes sparingly.

Dreamweaver tutorials by Adobe

http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-feature-overview/
http://tv.adobe.com/show/classroom-basic-site-layout-and-navigation-in-dreamweaver-cs5/
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-for-html5-and-css3-part-1/
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-for-html5-and-css3-part-2/
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/enhanced-html5-capabilities-in-cs55/

1.2 HTML 5 New Media Features

http://w3schools.com/html/html5_intro.asp - tutorials with interactive examples
http://html5demos.com/ - demos of some features (view source of each; some are very complex)
http://ie.microsoft.com/testdrive/Views/SiteMap/ - Internet Explorer 10 new features demos, including HTML 5

Scalable Vector Graphics (SVG)

Draw SEO-friendly, vector-based graphics using XML which can be resized and animated.

Canvas

Use JavaScript to draw graphics in a rectangular canvas area.

Audio and Video

Use simplified, cross-browser tags to present audio and video in multiple formats.
Use MP3, WAV and Ogg formats for audio and MP4, WebM and Ogg for video.

Drag and drop

Move any element to a different place in the page. Scripting is needed to save changes.

Geolocation

Get the geographical position of a user, which can be used to display results in a map.

Web storage

Store data in the browser, for a browser session or until deleted (local storage).
Compared with cookies, web storage is faster, more secure and can store more data more easily.

Application cache

Cache a web application and its data for better performance and offline use.

Event handling

HTML5 adds many event attributes for windows, forms, keyboard, mouse and media.
http://www.w3schools.com/tags/ref_eventattributes.asp

1.3 Other Resources

http://www.whatwg.org/specs/web-apps/current-work/multipage/ - HTML 5 living standard
http://www.w3.org/TR/2011/WD-html5-20110525/ - HTML 5 working draft

Information Technology, Science and Education

for a Better World