bpainter/html5.md

## html5.md

      
    Raw
  

              html5.md
            
          
    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
Related content


<aside>
	<!-- related content -->
</aside>


header
Titles

footer
Supplementary info.

nav

	
		Home
		News
		Contact
	
	
		Login
		Sign up
	

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>

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

or
<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
Examples