HTML5 - Just the basics
11 likes15,794 views
HTML5 is intended as a replacement for HTML4 and XHTML. It is based on usage data and developed through cooperation between the W3C and browser makers. An HTML5 page uses the <!DOCTYPE html> declaration and introduces several new semantic elements like <header>, <nav>, <article>, <aside>, and <footer> to help describe different parts of a page. It also includes new form input types and specialized elements for things like canvas, video, geolocation, and offline web apps.
HTML5 - Just the basics
- 1. HTML5 Just the basics please.
- 2. You not too late
- 3. Replacement for HTML4 and XHTML
- 4. Bickering Browser Support 2004 2005 2006 2007 2008 2009 2010 2011 Cooperation IE9
- 5. Philosophy
- 6. • Based on usage • Cooperation with browser makers • Remove presentation elements • Build in scripting elements
- 7. Creating an HTML5 Page
- 9. Sample.html <!DOCTYPE html> HTML 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
- 12. Sample.html <!DOCTYPE html> HTML 4 <html lang="en"> <html lang="en" xml:lang="en" xmlns="http:// www.w3.org/1999/xhtml">
- 14. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
- 15. Sample.html <!DOCTYPE html> <html lang="en"> HTML 4 <head> <meta http-equiv="Content-Type" content="text/ html; charset=utf-8" /> <meta charset="utf-8" />
- 16. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
- 17. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
- 18. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> HTML 4 <link href=”/style/structure.css” rel=”stylesheet” type=”text/css” />
- 19. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” />
- 20. Sample.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel=”stylesheet” href=”style-original.css” /> </head>
- 21. New Elements
- 22. <section> a thematic grouping of content, typically with a heading
- 23. <nav> Contains core navigation items for a site or page
- 24. <article> A self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
- 25. <aside> Content that is related to but not essential to it’s parent content
- 26. <hgroup> Grouping of h1 - h6 elements
- 27. <header> Contains content at the top of a section, typically a heading tag
- 28. <footer> Take a wild guess
- 29. <time> Indicates a date/time in the content
- 31. <header>
- 32. <article>
- 33. <nav>
- 34. <footer>
- 37. <footer> <nav>
- 38. Forms
- 40. Range Date, Month, Week, datetime Search Color picker