Overview & Updates

HTML 5 refers to the latest version of HTML, which includes:
- new HTML elements and attributes
- full CSS3 support
- video and audio elements
- 2D/3D graphics
- local storage
- local SQL database

Updated HTML elements

New HTML5 doctype:
<!doctype html>

Prevent IE8 using IE7 Compatibility View
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

New meta declaration:
<meta charset="UTF-8">

New script tag (don’t need script type="text/javascript":
<script src="file.js"></script>

New link tag for css (don’t need type="text/css":
<link rel="stylesheet" href="file.css">

Existing HTML5 tag updates

i, b, em, and strong tags have new semantic meanings:
- i and b used to mean italic and bold
- i tag now represents text in an "alternate voice" or "mood"
- b tag represents text that is "stylistically offset"
- em and strong used to mean emphasis and strong emphasis
- em now means "stress emphasis"
- strong now means "strong importance"

HTML5 Elements

- generic document or application section
- div has no semantic mean, but section used for grouping together thematically related content
- is all of the content related?

- group of introductory or navigational aids
- can include more than one header on a page
- usually appears at the top of a document or section, but its defined by its contents rather than its position

- a footer for its nearest ancestor sectioning content or sectioning root element
- not dependent on its position (like the header), but should describe the content its contained within
- can be a footer to a section or the entire document

- tangentially related to the content surrounding it
- expands on the content surrounding it without directly relating to the content surrounding it
- within in article, aside content should relate to the article
- when used outside the article element, aside content should be specifically related to the site as a whole
- something akin to a sidebar containing entire site content

- section linking to other pages pages or parts within that page: a section with navigation links
- intended for major navigation

- independently distributable content (for example in syndication)
- "self-contained" content: would you syndicate the content in an rss feed?
- for example, a blog post, article, comments

- the main content of the body of a document or application
- content that directly relates to or expands pun the central topic of the document
- only include one main element, and don’t place it within the article, aside, footer, header or nav

- a self-contained unit of content, if removed from the flow of the document, would not affect the document’s meaning
- for example, an image within an article
- figcaption represents a caption for its parent figure

- time on a 24 hour clock, or GMT clock  - for example, date of publish
- can add datetime attribute

HTML5 Forms

  <label for="the-id">Label</label>
  <input type="checkbox" id="the-id"</input>
  <textarea id="id"></textarea>
  <input type="submit" value="Click to Submit">

<label for="the-id" relates to <input id="the-id"

Input types include:
- text, checkbox, radio, file, password

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

In CSS (no ., square brackets):

input[type=text] {  

New input types

If a browser doesn’t support an input type, it defaults to text.  These give function benefits on mobile browsers and in other settings.
<input type="[type]" />
- search
- email
- url
- tel
- number (a string input)
- range
- date (a string input)
- month
- week
- time
- datetime
- datetime-local (has no timezone information associated with it)
- color (a string input)

New form elements

Datalist: provides autocomplete suggestions for an input set by option values
- a set of option elements that represent predefined options for other controls.

List and id need to be the same to link up:

<input type="text" list="browsers" />  
<datalist id="browsers">  
  <option value="Option 1">
  <option value="Option 2">  

- keygen
- output

New form attributes

Placeholder: message shown in the input that is hidden when typing, then returns
<input type="text" placeholder="Enter your email..." />
Autofocus: automatically focuses an input when the page is rendered
<input type="text" autofocus />
Required: error message if input left blank
<input type="text" required />
Pattern: accepts regular JavaScript expression that can be used to validate a form field to match the pattern
<input type="text" pattern="[0-9]{3}" />

- autocomplete
- list
- multiple
- novalidate
- formnovalidate
- form
- formaction
- formenctype
- formmethod
- formtarget