Tantek Çelik
Introduction
Introductions
- Say your name
- Favorite HTML5 feature (or want)
- Three words to describe yourself
What we're covering today
- HTML5 Basics
- Upgrading from HTML4/XHTML to HTML5
- HTML5 Semantics
- Native Multimedia
- New HTML5 forms capabilities
- Web APIs and the evolution of HTML5
HTML5 Basics
Hands-On HTML5 Basics: Conventions
- blue hyperlinks to more info, examples, demos
code is monospacebold italic gray for old codeorange dotted underlined transitional codebold fuchsia for new or recommended code
HTML5 Basics: Adoption Strategy
- Start with basics
- Upgrade your HTML4/XHTML
- Add new HTML5 features as needed
- Experiment and keep up
HTML5 Basics: DOCTYPE
- Old SGML heritage DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - New DOCTYPE
<!DOCTYPE html>
HTML5 Basics: meta charset
- Old meta http-equiv charset
<meta http-equiv="content-type" content="text/html; charset=utf-8"> - Simpler meta charset
<meta charset="utf-8">
HTML5 Basics: First HTML5 Document
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> World Wide Web </p>
Exercises 1-2: HTML5 Basics
Exercise 3: New HTML5 Document
Upgrading from HTML4/XHTML
Upgrading from HTML4/XHTML
- Remove presentational markup
- Remove failed features
- Maintain compatibility
- Update obsolete markup
Upgrade: Remove Presentation
<plaintext>→ use<pre>instead<basefont> <big> <font> <tt>→ use CSSfont<s> <strike> <u>→text-decoration<center>align→text-alignandmargin:autolink, alink, vlink→ pseudo-classes andcolor
Upgrade: Remove Failed Features
<img longdesc>- use a visible description or link<frameset> <frame>- breaks linking, history, accessibility
- redesign, with
<iframe>if necessary
<html version>- no practical effect
Upgrade: Remove Failed Features
<meta scheme>- avoid invisible metadata- add microformats to visible content
revattribute - oft misunderstood.- use
relmicroformats instead
- use
Upgrade: Maintain Compatibility
<script type="text/javascript"><a href="..."><img border="0"></a>
Upgrade: XHTML Compatibility
- Self-close empty HTML4 tags, e.g.
<br/> <embed/> <hr/> <img/> <input/> <link/> <meta/>
- Always use quoted attribute values
<img src=photo1.jpg>→<img src="photo1.jpg" />
- Explicit tags for a consistent DOM
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ... </title> </head> <body> ... </body> </html><table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table>
Exercise 4: XHTML compatibility
Upgrade: Replace Obsolete Markup
<acronym>→ use<abbr>instead<applet>→<object><dir>→<ul><a name="a1"></a>→<div id="a1"> ... </div><img name="i1">→<img id="i1" />
Upgrade: Refinements to HTML4 elements
<em>- nest to indicate stronger emphasis<strong>- importance rather than emphasis
Upgrade: HTML4 elements now semantic
<small>- small print, disclaimer, caveat, copyright<i>- alternate voice/mood. technical term, idiom<b>- stylistically offset. keyword, product, lead<br>- line break, e.g. in poems, addresses<hr>- paragraph level thematic break
Upgrade: black sheep acknowledged
- Features that “worked” cross-browser
- But not in spec or were mistakenly deprecated
<iframe>for nested HTML<embed>for plugins<base target>, <a target>, <area target>
Upgrade: list numbering acknowledged
<li value><ol start><ol>,<ul>may have zero items<ol reversed>New!
Warning: HTML5 and <cite>
<cite>- HTML4 allowed speaker names- HTML5 only allows “title of a work”, disallows people
- Recommendation: use
<cite>+ hCard for speakers:<q cite="#ak"> The best way to predict the future is to invent it. </q> — <cite class="vcard" id="ak"> <span class="fn"> Alan Kay </span> </cite>
Questionable HTML5 restriction: <cite>
- Millions of real world web pages use cite for speakers
- Add your voice:
Upgrade: hyperlinks around blocks
<a>can now surround blocks, e.g. post headings<a rel="bookmark" href="..."><h2>title of a blog post, linked to its permalink</h2></a>
Upgrade: global attributes
class, dir, id, lang, style, tabindex, title- apply to all elements.
- simple example:
<html>,<title>elements
Upgrade: <a> <area> media
<a media>, <area media>just like<link media><a media="handheld" href="http://m.twitter.com" rel="alternate"> mobile site </a><a media="print" href="http://example.com/article-print" rel="alternate"> print version </a>
<area hreflang rel>like<a hreflang rel>- Potential additional use of
relfor microformats
- Potential additional use of
Upgrading from HTML4/XHTML - Summary
- Use CSS instead of presentational markup
- Drop
rev,longdesc,frame,version,scheme - Use compatibility attributes only as needed
- Update with
idattribute,<abbr>,<object>,<ul>
Upgrading from HTML4/XHTML - Summary
- New details:
<em> <strong> - Now semantic:
<small> <i> <b> <br> <hr> - Ok:
<iframe> <embed> <li value> <ol start> target - Workaround:
<cite>+ hCard for speakers
Upgrading from HTML4/XHTML - Summary
- Hyperlinks can now surround blocks
- Universal attributes:
class dir id lang style tabindex title - Consistent link attributes:
media rel hreflang
Exercise 5: HTML5 Upgrade Sensible
Upgrade: Validate HTML5
- New validator: validator.nu
- Use the new validator favelet (from favelets.com)
- W3C validator now also supports HTML5
- Verify all your changes are still valid
- Make any necessary fixes and revalidate
Upgrade: Validate HTML5
- Congratulations!
- You've updated your existing markup to HTML5
- Review dev.w3.org/html5/html4-differences for more
- You're ready to learn new HTML5 features
HTML5 semantics
HTML5 semantics
- From XHTML 1.1: Ruby
- Based on studying existing class names
- Standardized page structure
- Articles and heading groups
- Figures, marks, and dates
HTML5 semantics: Ruby
- Nothing to do with the programming language
<ruby>- annotated East Asian text<rt>- Ruby Text annotation- Not Twitter retweets
<rp>- Ruby Parenthesis for non-supporting browsers
HTML5 semantics: Ruby Example
- Ruby markup for Japanese with hiragana reading
... <ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby> ... - Sample fallback (non-Ruby) rendering
... 漢 (かん) 字 (じ) ...
HTML5 semantics: Ruby Example
- Ruby markup for Japanese with hiragana reading
... <ruby> 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> 字 <rp>(</rp><rt>じ</rt><rp>)</rp> </ruby> ... - Sample Ruby rendering
HTML5 semantics: Ruby
- Very useful for East Asian typography
- Works in IE & WebKit browsers today, graceful in others
- Mozilla / Gecko 2.0 support expected. Opera will follow.
- Recommendation
- Use it!
HTML5 semantics: page structure
<section>- thematic grouping of content<header>- intro/nav/headings<nav>- navigation links<footer>- info about section, author, copyright
HTML5 semantics: articles, heading groups
<article>- self-contained post, entry, news, comment- also a special type of
<section>
- also a special type of
<aside>- tangential content, side comments<hgroup>- related multilevel headings
Exercise 6: New Semantics: post
HTML5 semantics: bulletproofing
- New tags stylable in all modern browsers...
- except Internet Explorer 8 and earlier
- Bulletproof Web Design by Dan Cederholm
- Bulletproof AJAX by Jeremy Keith
- Introducing a Bulletproof HTML5 technique:
- Use a nested div with semantic class name, e.g.:
<article><div class="article">...</div></article>....article { /* article styling here */ }
- Use a nested div with semantic class name, e.g.:
HTML5 semantics: bulletproofing
- Add more classes (microformats) to nested div:
<article><div class="article hentry">...</div><article> - Some new tags disallow nested divs
- Use a containing div in those cases:
<div class="hgroup">
<hgroup>...</hgroup></div>
HTML5 semantics: figures, marks, dates
<figure> <figcaption>images, captions/descriptions<mark>highlighted run of text, e.g. searched terms<time datetime>precise dates and date-times- known limitations: wiki.whatwg.org/wiki/Time_element
New HTML5 semantics summary
<ruby>incorporated from XHTML 1.1- Common:
<section> <header> <nav> <footer> - Articles:
<article> <aside> <hgroup> - Figures and marks:
<figure> <figcaption> <mark> <time>for dates - beware of limitations
Exercise 7: New Semantics: poster
Native Multimedia
Multimedia: native vector graphics
<svg>- W3C's vector graphics markup- example: external images on Wikipedia
<canvas>- drawing with javascript
HTML5 vector graphics challenges
- SVG in HTML not well implemented, promised in FF4/IE9
- Canvas:
- Modern browser support (except IE8 and below)
- Requires good design for fallback content
- Accessibility techniques still being developed
- Recommendation:
- decorative images and experiments only for now
Exercise 8: Modify a canvas example
HTML5 multimedia: audio and video
<audio src></audio>- like img for sound<video src></video>- alternative to video plugins- numerous sites using HTML5 video today
- video + canvas demo
- try archive.org open source movies (e.g. BarCampSF)
HTML5 audio and video challenges
- Audio and video format differences
- WebKit + IE9 support H.264 - “free” through 2015
- Chrome, Firefox, Opera support Ogg - open with IP doubts
- Chrome, Firefox, and Opera also support VP8
- Keep up with the WebM Project
HTML5 audio and video source
- Use
<source src>- to publish both H.264 and Ogg<video controls> <source src="http://example.com/vid.mp4"> <source src="http://example.com/vid.ogv"> <embed src="http://example.com/vid.swf"> </video> - Browser uses first format it can handle
- Use fallback
<embed>for non-HTML5 browsers
HTML5 audio and video summary
<audio src> <video src>- Publish multiple formats inside
<source src> - Provide alternate text content or embed inside
Exercises 9-10: audio & video
New HTML5 forms capabilities
New HTML5 forms capabilities
- New inputs
- Output and details
- Meter and progress
New HTML5 form inputs
New HTML5 date time inputs
New HTML5 form inputs summary
- Lots of new
<input type="..."> - Some partial support of new inputs
- Try them in Opera to get an idea
- Strange behaviors
- Undefined restylability
- Ok fallback textbox behavior
- Note: unpredictable future page UI changes
Exercise 11: new inputs
New HTML5 output and details
<output>- result of a calculation<details>- expandable content<summary>- label for details- example: list of grouped items
New HTML5 meter and progress
<meter>- % or measurement within a range- ratings, countdowns, fundraising donations (examples)
- use % or fraction inline, or
min max valueattributes
<progress max value>- task completion- uploading, online checkout, filling out a multipage form
New HTML5 meter and progress
- Recent Safari progress:
- Unclear how to restyle, customize
Exercises 12-13: progress & meter
New HTML5 user interface attributes
autofocusattribute - upon page loadplaceholderattribute - suggestionsrequiredattribute - for form submission
Web APIs and the evolution of HTML5
HTML5 and related Web APIs
- For intermediate or advanced experiments:
Web App Experiments are Drafts
- All working drafts (or editor's drafts)
Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways.
- All of these Web APIs could change.
- If you want to depend on them, you must keep up
Keep up with HTML5 evolution
- Read spec updates and HTML5 blogs
- Jump in and participate in evolving HTML5
- Read and edit wiki.whatwg.org
- Join and chat with #whatwg on irc.freenode.net
- The W3C wants your input, join the HTML Working Group.
More HTML5 resources
- HTML: The Markup Language and the HTML5 Now Wiki
- See also the book Introducing HTML5
- Follow blogs
- HTML5 Superfriends statement and feedback
Conclusion
Conclusion: HTML5 Now
- Get started today
- Update your pages with HTML5 changes
- Enhance with new semantics, graphics, media
- Validate, Fix, Repeat and Publish your HTML5 site!
- Follow updates, Give feedback, Help move the Web forward