1.1 HTML 5 Differences and Compatibility
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.
HTML suffers from divitis (or div soup). HTML5 adds elements to better indicate use
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
min, max, step, maxlength, multiple, pattern - other input constraints for built-in validation
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="…">
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.
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.
<!--[if lt IE 9]>
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
Converting to HTML 5
In Dreamweaver CS5.5, click File > Convert >
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
Other HTML 5 tutorials
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.
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.
Get the geographical position of a user, which can be used to display results in a map.
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.
Cache a web application and its data for better performance and offline use.
HTML5 adds many event attributes for windows, forms, keyboard, mouse and media.
1.3 Other Resources
- HTML 5 living standard
http://www.w3.org/TR/2011/WD-html5-20110525/ - HTML 5 working draft