Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.


HTML5

Prof. Cesare Pautasso
http://www.pautasso.info
cesare.pautasso@usi.ch
@pautasso

Presentation/Content

Separating Content from Presentation helps:

XHTML

HTML5

XML Rules

  1. All element tags and attribute names written in lowercase (XML is case sensitive)
  2. Always close every opened element tag
    <tag>...</tag>
    <tag/>
  3. All elements must be properly nested
    <ul><li><b></b></li><li><p></p></li></ul>
  4. Only one root element per document
    <html><body></body></html>
  5. Attribute values must be quoted
    <a href="http://www.usi.ch">...</a>
  6. id attribute replaces the name attribute
    <div id="navigation">...</div>

XHTML Tree

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>My Homepage</title>
  </head>
  <body>
     <h1>My Title</h1>
     <p>Some paragraph</p>
     <!–- Comment -->
  </body>
</html>

HTML5 Tree

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>My Homepage</title>
  </head>
  <body>
     <h1>My Title</h1>
     <p>Some paragraph</p>
     <!–- Comment -->
  </body>
</html>

XHTML Structure

HTML5 Structure

No longer HTML

  • acronym
  • applet
  • basefont
  • bgsound
  • big
  • blink
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

New in HTML5

  • article
  • aside
  • audio
  • canvas
  • command
  • datagrid
  • datalist
  • details
  • dialog
  • event-source
  • figure
  • footer
  • header
  • legend
  • mark (m)
  • meter
  • nav
  • output
  • progress
  • source
  • time
  • video

HTML5 Microformats

http://html5doctor.com/microformats/

HTML5 Multimedia

http://www.html5rocks.com/en/tutorials/video/basics/

HTML5 Forms

HTML5 UI

0 %

References

Use a spacebar or arrow keys to navigate