-
Tantek Çelik
-
HTML5 basics
- new DOCTYPE:
<!DOCTYPE html>
- short enough to type
- SGML heritage dumped
-
HTML4 elements/attributes dropped/obsoleted
- Goal: simplification
- Redundant or broken elements removed
- acronym - use abbr instead
- applet - use object instead
- dir - use ul instead
- frame, frameset, noframes - redesign instead
-
HTML4 elements/attributes dropped/obsoleted
- Goal: simplification
- Obsolete/presentational elements/attributes removed
- plaintext, isindex
- basefont, big, center, font, s, strike, tt, u
- align, alink, vlink, etc.
- HTML5 explicitly requires more CSS
- Similar to HTML4/XHTML1 strict
-
A few attributes to assist transition
- Goal: enable faster transition
- border on img must be 0 if present
- language on script must be "JavaScript"
- name on a and img dropped - use id instead
-
Problem attributes dropped
- some problematic, others controversial
- rev - oft misunderstood/misused
- longdesc - often harms accessibility
- profile - nascent microformats/RDFa use
- useless/unused invisible metadata
- version on html
- scheme on meta
-
HTML4 elements changed - update usage
- simplifications!
<meta charset="UTF-8">- was:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- minor improvements/tweaks
- new sizes attribute on <link> - use with rel="icon"
- strong now represents importance rather than emphasis
-
HTML4 elements changed - restrictions
-
HTML5 changes - greater consistency
<a> more flexible, e.g. link headings- media attribute added to
a, area like link
- e.g.
<a href="http://m.twitter.com/" rel="alternate" media="handheld"> visit mobile site </a>
- hreflang and rel added to
area like a
- potential for use of rel for microformats
- class, dir, id, lang, style, tabindex, title apply to all elements.
-
HTML4 black sheep acknowledged
- features that "worked" cross-browser
- but not in spec or were mistakenly deprecated
<embed> for plugins- target attribute on
<base>, <a>, <area>
- list numbering
value attribute on <li>start attribute on <ol>- related: new
reverse attribute on <ol>
-
HTML5/HTML4 differences, new validator
-
HTML5 basics
- Exercises: DOCTYPE and conversion
-
New HTML5 semantics
- From presentational to vague semantics
<b> stylistically offset span of text<i> taxonomic designation, a technical term<small> small print (side comments, legal)<hr> paragraph level thematic break
-
New HTML5 semantics
<section> (now scopes <address> and headings)<header><footer><nav><article><aside><time datetime>
-
New HTML5 semantics
- From XHTML heritage (1.1, 2)
<ruby>, <rt> and <rp>
- No, rt is not for marking up Twitter retweets
- for Japanese, Hiragana expansions of Kanji
-
New HTML5 semantics
- Exercise 3: update a blog post with HTML5
-
New HTML5 semantics
- more new semantics
<hgroup> - multilevel headings<figure> with
<dt> + <dd>: captions on images
-
New HTML5 semantics
- Exercise 4: movie poster with better semantics
-
Native media
<svg> - vector graphics <canvas> - drawing with scripts
<audio> - like img for sound <video> - use src
-
Native media challenges
- SVG in HTML not well implemented
- canvas requires good design for fallback
- audio and video format differences
-
Native media
- Solution to format differences
<source> - with src attribute - Browser uses first it can handle
- Then remaining contents if necessary
-
Native media
- Exercises 5 and 6: audio and video
-
More Cutting Edge features
<progress> - for indicating task progress <meter> - displaying a range
-
More Cutting Edge features
- Exercises 7 and 8: progress and meter
-
Bleeding edge features
- tons of new form input types
- microdata
- web storage
-
HTML5 resources
-
HTML5 resources
-
Colophon