Blog Archives

Latest Posts

Monthly

Categories

August 27, 2009 - Comments Off on Liveblogging the New York Web Standards Meetup—Getting started with HTML5

Liveblogging the New York Web Standards Meetup—Getting started with HTML5

Mike Taylor (Tunecore.com) will give a brief overview of (the current state of) HTML5, focusing primarily on browser support, new elements and their corresponding semantics and getting CSS to play along. He will also review how the front-end team at TuneCore is implementing these new features into a production site today.

---

What is HTML5?

And why should I care?

HTML5 is the next version of HTML; primarily aimed at web applications. Began as the Web Applications Spec in a W3C Working Group.

Why going back to HTML, why not continuing XHTML? We're not; HTML5 is both HTML and XHTML. Can write it either way you prefer.

  • New semantic elements
  • Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)
  • Rich embedded content (<audio>, <video>, <canvas>)

Mike personally finds the web forms 2.0 the most exciting. Opera 10 is the only who currently supports web forms 2.0.

In this talk, primarily going to cover new semantic elements.

Timeframe

2022? October 2009?

Latter date is the for end of the spec. 2022 is for implementation.

When can I use HTML5? Today! (sorta)

IE (all of 'em): Can't style DOM elements it doesn't recognize. Workaround is to use JavaScript to create DOM element so IE recognizes and can style it.

Remy Sharp HTML5 shiv script on Google Code: works automagically.

Camino, FF2: behave like IE, only the DOM-trick doesn't work. Server-side solution. http://remysharp.com/2009/04/14/html5-and-firefox2/

Doctype

<!DOCTYPE html> This is it for HTML5. Will all be in standards-mode.

CSS

See HTML5Doctor.com for full reset stylesheet.

HTML5

<hgroup> element represents the heading of a section.

There's an outline algorithm, and use the <hgroup> to hide things from the outline.

The <nav> element represents a section of a page that links to other pages or to parts within the page. The primary navigation.

Can now wrap an anchor element around a block-level element. So an entire div element can be wrapped as a link/sprite.

<section>
     <header>
          <article>
          <article>
          <article>

<section> element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.

Rule of thumb: if you're not going to have a header for a section, it's probably not a section.

Within <section><header>, the heading scope changes. Should start back with h1.

<section id="blog">
     <header>
          <h1>Title</h1>
     </header>
     <article>
          <h2>Title</h2>
          <p>Lorem ipsum</p>
     </article>
     <article>
          <h2>Title</h2>
          <p>Lorem ipsum</p>
     </article>
</section>

<time> element for marking up time. <time datetime="2009-08-01">8/01/2009</time>

<aside> represents a section of a page that consists of content that is tangentially related to the content around the <aside> element, and which could be considered …

<footer> element represents a footer for its nearest ancestor …

<address> element represents the contact information for its nearest article or body element ancestor. [This is old HTML practice; surprised to still see it in HTML5]

Validation

Resources

#whatwg (irc.freenode.org)

You have to read the spec

Comments/questions

Question about the increase in markup.
Mike: There is an increase in markup, but this is the cost of the semantic web.

A discussion about the future of Flash and the implications of HTML5's video and audio elements.

Outline not currently implemented, not visualized, but might have use for accessibility or the ability to view in browser. Generate a TOC on the fly.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

Comments are closed.