###Why we need HTML5

####HTML5 Benefit

  • Semantic
  • Full CSS3 support
  • Local storage
  • Local DB
  • Audio,Video
  • 2D/3D graphics
  • SEO

Semantic web is designed to help machines understand more information on the page. It is also friendly to developers as well – you can get rid of div with the long classname everywhere. HTML5 also provide new features to keep data in local storage and local DB, it won’t be covered at this workshop.

###HTML5 Element

  • Doctype
  • Meta declaration
  • Script tag
  • Link tag

It is easier in HTML5 to define head tag or type.

####Doctype

<!DOCTYPE html>

####Meta

<meta charset="UTF-8">

####Script

<script src="script.js"></script>

####Link

<link rel="stylesheet" href="style.css">

###HTML5 Tag section header footer nav main aside article figure/figcaption time

The definition and usages of tag usually can tell by its thematic meanings.

####Section thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element

####Header introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

####Footer similar as Header. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

####Nav links to other pages or to parts within the page

####Main to wrap the main content of the page, usually all content other than header and footer

####Aside tangentially related to the content around the aside element, separate from that content

####Article a complete, or self-contained, composition in a page and that is, in principle, independently distributable or reusable

####Figure/figcaption a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from main flow of the document

<figure>
  <img src="image.jpg">
  <figcaption>my image</figcaption>
</figure>

####Time

<time itemprop="datePublished" datetime="2009-10-09">3 days ago</time>

###Tips

You may find sometimes it is really hard to choose tags, the most common one is div vs section. To distinguish the two, to read the definitions of them is really useful, then remember the following tips.

####div & section

  • div has no semantic meaning, section does
  • div usually is used as a wrapper for styling section help construct a document outline, usually contains a heading

####section & article

  • section forms part of something else, article is its own thing
  • A general rule is that section is appropriate only if the element’s contents would be listed explicitly in the document’s outline

####aside

  • aside within article, aside should be related to that article
  • aside outside article, aside should be specifically related to aside

####header

  • don’t overuse header, if your header element only contains a single heading element, leave out the header

####figure

  • not every image is figure, it is typically referenced as a single unit from the main flow of the document
  • figure can be more than an image

If the tips are not enough, go to these two: