HTML5

Introduction

We'll divide this meetup up into a two parter:

Focus of today will be an intro to HTML5. We'll focus on the semantics.
HTML5 Apps (webstorage, application cache, web workers, websocket, hardware access (drag & drop), geolocation, device orientation, speech input)

1991 - HTML 1994 - HTML2 1996 - CSS1 + Javascript 1997 - HTML4 1998 - CSS2 2000 - XHTML1 2002 - Tableless Web Design 2004 - WhatWG begins 2005 - AJAX 2007 - W3C begins 2009 - HTML5 2011 - HTML5 last call 2014 - HTML5 standard

Doctype

XHTML4 vs HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>

In the head

If you're used to using the XHTML syntax you're head probably looks something like this:

** xHTML **

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
	<link href="css/style.css" type="text/css" rel="stylesheet" />
	<script src="libs/jquery.js" type="text/javascript" ></script>
</head>

** HTML5

<html lang="en">
<head>
	<meta charset="uft=8" />
	<link href="css/style.css" rel="stylesheet" />
	<script src="libs/jquery.js"></script>
</head>

Syntax

It's important to note that you can use most of this today. Browsers will ignore something they don't understand.

Tags

Structural

section

Basically anything.

article

Basically anything.

div vs section vs article

div = generic container, no semantic value

section = general container with semantic meaning, it's used to chunk things into logical groups. It's also used to section content within an article, nav and aside.

article = an independent self contained content on a page.

Look at the pdf flow chart.

aside

Text level

In HTML5 a number of elements that were somewhat of a no-no in XHTML have been brought back and redefinied.

i vs em

The i element is used to represent a span of text that is borrowed or in an alternate voice.

<p>I <i>really</i> love what you've done with your hair.</p>

The em element represents text that has an emphatic stress.

<p>I <em>really</em> love what you've done with your hair.</p>

b vs strong

The strong element represents something that is important, more important than it's surrounding content.

<p>Fill out the form. <strong>Don't click the submit button more than once</strong></p>

The b element visuall distinguishes text apart from it's surrounding content.

<p>I really like <b>cupcakes</b></p>

cite

The cite element is used to represent a mention or reference to a body of work like a book, an article, a magazine.

<p>I was reading through <cite>Git in the Trenches</cite> the other day, and Peter Savage does a great job outining the steps to get GIT setup, and a number of different workfuls that I think are useful</p>

small

The small element is now used to define "fine print".

hr

The hr element now defines a paragraph level thematic break.

figure & figcaption

<figure id="awesome">
	<img src="images/awesome.png" alt="" />
	<figcaption>Awesomenewss</figcaption>
</figure>

time

<time>January 11, 2011 3:00pm</time>

<time datetime="2011-11-01T15:00-00:00">January 11, 2011 3:00pm</time>

<time datetime="2011-11-01T15:00-00:00" pubdate="pubdate">January 11, 2011 3:00pm</time>

mark

It simply is used to mark content, like a highlighter.

Great to use for search results or changes to UI text elements. Demonstrate with Google search results.

hgroup

<hgroup>
	<h1>Page Title</h1>
	<h2>Page Subtitle</h2>
</hgroup>

Groups header elements together.

audio

<audio controls="controls" autobuffer="autobuffer" preload="auto">
	<source src="audio.mp3" />
	<source src="audio.oga" />

	<!-- flash fallback -->
	<object>
		<ul>
			<li><a href="audio.mp3">Download MP3</a></li>
			<li><a href="audio.oga">Download Ogg</a></li>
		</ul>
	</object>
</audio>

video

<video width="800" height="600" poster="/videos/video.png" controls="control" preload="none">
	<source src="/videos/video.m4v" type="video/mp4" />
	<source src="/videos/video.webm" type="video/webm" />
	<source src="/videos/video.ogv" type="video/ogg" />

	<!-- fallback -->
	<img src="/videos/video.png" width="800" height="600" alt="" />
	<ul>
		<li><a href="videos/video.m4v">Download MP4</a></li>
		<li><a href="videos/video.webm">Download Webm</a></li>
		<li><a href="videos/video.ogv">Download OGG</a></li>
	</ul>
</video>

Input attributes

type="email"

type="url"

type="date"

type="number"

type="range"

pattern="d{10}\w{5}"`

10 digits followed by 3 letters

placeholder="Meta text / microcopy"

list & datalist

<input type="text" list="counties" name="county" />
<datalist id="counties">
	<option>Mecklenburg</option>
	<option>Union</option>
</datalist>

ARIA Landmark Roles

`role="application"`

Declares a section that should work as an application (something typically handled with AJAX)

`role="banner"

The primary heading of a site. Typically includes the area with the logo, main heading of a page, search.

`role="complementary"`

A section that can support the primary content but still stand on it's own

`role="contentinfo"`

Meta information such as footnotes, copyrights, links to privacy statements. Content that isn't really part of the presentation.

`role="form"`

A form. Simple.

`role="main"`

The primary content of a page.

`role="navigation"`

A set of links used for navigating a site.

`role="search"`

Search form. You wouldn't use it together with the form role.

`role="button"`

<span role="button">Save</span>

`role="alert"`

<div role="alert">
	<p>Something ate flaming death</p>
</div>

`role="alertdialog"`

<div role="alertdialog">
	<p>Something ate flaming death</p>
	<span role="button">Ok</span>
</div>

Older Browser Support and Polyfills

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

bpainter/html5.md