-
Tantek Çelik
-
HTML5 basics
- new DOCTYPE:
- 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
- Similar to HTML4/XHTML1 strict
- HTML5 explicitly requires more CSS
- Obsolete/presentational elements/attributes removed
- plaintext, isindex
- basefont, big, center, font, s, strike, tt, u
- align, alink, vlink, etc.
-
A few attributes to assist transition
- Goal: enable faster transition
<img> border must be 0 if present<script> language must be "JavaScript" if present<a>,<img> name dropped - use id instead
-
Problem attributes dropped
- some problematic, others controversial
rev - oft misunderstood/misusedlongdesc - often harms accessibilityprofile - nascent microformats/RDFa use- useless/unused invisible metadata
<html> version<meta> scheme
-
HTML4 elements changed - update usage
- simplifications!
- from:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- to:
- minor improvements/tweaks
- <link> new
sizes attribute - use with rel="icon"
<strong> now represents importance rather than emphasis
-
HTML4 elements changed - restrictions
-
HTML5 changes - greater consistency
<a> more flexible, e.g. hyperlink headings<a>, <area> new media attribute like link- e.g.
<a href="http://m.twitter.com/" rel="alternate" media="handheld"> visit mobile site </a>
<area> hreflang and rel added like <a>- potential additional use of
rel for microformats
class, dir, id, lang, style, tabindex, title
-
HTML4 black sheep acknowledged
- features that "worked" cross-browser
- but not in spec or were mistakenly deprecated
<iframe> for nested HTML<embed> for plugins<base>, <a>, <area> target attribute- list numbering
<li> value attribute<ol> start attribute- related:
<ol> new reverse attribute
-
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
- numerous new form
<input> types
-
Bleeding edge features
- Exercise: new input types
- microdata
- web storage
-
HTML5 resources
-
HTML5 resources
-
Colophon