Why we need HTML5
- Full CSS3 support
- Local storage
- Local DB
- 2D/3D graphics
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.
- Meta declaration
- Script tag
- Link tag
It is easier in HTML5 to define head tag or type.
<link rel="stylesheet" href="style.css">
The definition and usages of tag usually can tell by its thematic meanings.
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
introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
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.
links to other pages or to parts within the page
to wrap the main content of the page, usually all content other than header and footer
tangentially related to the content around the aside element, separate from that content
a complete, or self-contained, composition in a page and that is, in principle, independently distributable or reusable
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 itemprop="datePublished" datetime="2009-10-09">3 days ago</time>
You may find sometimes it is really hard to choose tags, the most common one is
section. To distinguish the two, to read the definitions of them
is really useful, then remember the following tips.
div & section
divhas no semantic meaning,
divusually is used as a wrapper for styling
sectionhelp construct a document outline, usually contains a heading
section & article
sectionforms part of something else,
articleis its own thing
- A general rule is that
sectionis appropriate only if the element’s contents would be listed explicitly in the document’s outline
asideshould be related to that
asideshould be specifically related to
- don’t overuse
header, if your
headerelement only contains a single heading element, leave out the
- not every image is
figure, it is typically referenced as a single unit from the main flow of the document
figurecan be more than an image
If the tips are not enough, go to these two: