HTML5

Prof. Cesare Pautasso
http://www.pautasso.info
[email protected]
@pautasso

Presentation/Content

Separating Content from Presentation helps:

Reuse Style Sheets
- one style for the entire website (easier to maintain)
- spare bandwidth (css can be cached)
Different styles for the same content
- multi-channel delivery (Web browser, printer, mobile phone, screen reader)
- user personalization (choose themes)

XHTML

EXtensible HyperText Markup Language (W3C Standard, 2000)
Combines:
- XML (Strict Syntax)
- HTML (existing tags for Web pages)
It will gradually replace HTML (legacy)
Works well together with CSS

HTML5

HyperText Markup Language (W3C Standard, HTML4, 1999, HTML5, ?)
Cross-browser support for Web applications:
- Document Markup (clean Web pages)
- Multimedia (SVG, native Video/Audio without Flash)
- Web Applications (Context Menus, DataGrid, Canvas, Offline storage, Progress Bars, Drag and Drop, Worker Threads, Web Forms)
- Communication (Web Sockets, Cross Document Messaging)
- Microformats (Time, Meter)

XML Rules

All element tags and attribute names written in lowercase (XML is case sensitive)
Always close every opened element tag
```
<tag>...</tag>
<tag/>
```

All elements must be properly nested

<ul><li><b></b></li><li><p></p></li></ul>

Only one root element per document
```
<html><body></body></html>
```
Attribute values must be quoted
```
<a href="http://www.usi.ch">...</a>
```
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 Multimedia

Sound

<audio src="/sound/boom.mp3" controls="true">
  <a href="/sound/boom.mp3">Listen</a>
</audio>

Movies

<video src="/video/movie.mov" controls="true">
  <p>Your browser does not support the video tag. 
     Get a better browser</p>
</video>

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

HTML5 Forms

Input Validation

<input type="color"/>
<input type="number"/>
<input type="email"/>
<input type="tel"/>

New Input Controls

<input type="text" placeholder="Hint"/>
<input type="range" min="0" max="50" value="0"/>

HTML5 UI

Progress Bar

<progress value="0" max="100">0 %</progress>

0 %

References

Robert W. Sebesta, Programming the World Wide Web, Addison-Wesley, 2013
Mark Pilgrim, Dive into HTML5, http://diveintohtml5.info/
HTML5Rocks, http://www.html5rocks.com
Mozilla, HTML5 Guide