HTML5
An Evolutionary
About HTML5
 Most of HTML 4.01 has survived in HTML5
 Not supported by all browsers, but can start using the
structure now
 Ready by 2012
HTML5 = Simplified
 Short and sweet
<!DOCTYPE html>
<meta charset=“UTF-8”>
<script src=“file.js”></script>
<link rel=“stylesheet” href=“file.css”>
HTML5 = Anything Goes…
 XHTML 1.0 enforced XML syntax. All tags written
lowercase, attributes quoted, elements must have
closing tags.
 With HTML5, it’s entirely up to you. You can be casual
with the syntax. Uppercase, lowercase, quoted,
unquoted, self-closing or not.
HTML5 - Obsolete Tags
 Here are some obsolete tags in HTML5:
frame, frameset, noframes, acronym, font, big, center,
strike, cellspacing, cellpadding, valign…
 If you use an obsolete element or attribute, browsers
will render everything fine
 HTML5 aims to be backwards compatible with existing
content
HTML5 – Link This!
 The a element has always been an inline element. A
headline and a paragraph would need multiple a
elements
<h2><a href=“/about”>About</a></h2>
<p><a href=“/about”>Find out more</a></p>
 In HTML5, you can wrap multiple elements in a single a
element
<a href=“about”>
<h2>About</h2>
<p>Find out more</p>
</a>
HTML5 – Audio
 The audio element, browsers will skip over the first
source element and play the next file…
<audio controls>
<source src=“wayne.ogg” type=“audio/ogg”>
<source src=“wayne.mp3” type=“audio/mpeg”>
</audio>
HTML5 – Video
 <video controls width=“360” height=“240”
poster=“placeholder.jpg”>
<source src="pr6.ogv" type='video/ogg;
codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4;
codecs="avc1.42E01E, mp4a.40.2"’>
<object type>FLASH….</object
</video>
HTML5 – Stucture
 Header – container for a group of introductory or
navigational aids
 Nav – Site-wide nav
 Section – Groups related content
 Article –
 Aside – A chunk of content considered separate from the
main content
 Footer – Contains information about its containing
element…who wrote it, copyright info, links to related
content, etc.
HTML5 - Resources
 http://www.c2gps.com/blog/2010/08/20/html5-overview5-dollar-friday-at-c2/