HTML5 - Trade Press Media Group
advertisement
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/
