8. New Features
•
Semantic elements and attributes
•
Support for audio and video
•
Reduce the need of 3rd party plugins
•
Detailed algorithms for parsing errors
•
Built in APIs to help web application
9. .”
“
HTML5 is a brand
– Michael Mahemoff, Software as She Developed
14. Section tag
<section></section>
“The section element represent a generic section of a
document or application. A section, in this context, is a
thematic groups of content, typically with a heading…”
<section> tag is not a replacement for <div> tag
15. Article tag
<article></article>
“The article element represents a self-contained
composition in a document, page, application, or site
and that is intended to be independently distributable
or reusable, in syndication
e.g: a blog entry, newspaper article, forum post, blog
comments or any other independent item of content
16. aside tag
<aside></aside>
Represents a section of a page that consists of content
that is tangentially related to the content around the
aside element, and which could be considered separate
from that content.
e.g: sidebar content, polls, quotes, relation navigations
18. header tag
<header></header>
Represents a a group of introductory or navigational
aids. A header element is intended to usually contain the
section’s heading (an h1 - h6 element or an hgroup
element), but this not required. The header element can
also be used to wrap a section’s table of contents, a
search form or any relevant logos.”
Note: a document can contain multiple headers
20. Hgroup tag
<hgroup></hgroup>
Represents the heading of a section. This element is
used to group a set of h1-h6 elements when the heading
has multiple levels, such as subheadings, alternative
titles, or tag lines.
21. footer tag
<footer></footer>
“Represents a footer for it’s nearest ancestor sectioning
content or sectioning root element. Typically contains
information about its section such as who wrote it, links
to related documents, copyright data, and the like”
Note: a document can contain multiple footers
23. Nav tag
<nav></nav>
“Represents a section of a page that links to other pages
or to parts within the page: a section with navigation
links.”
Note: only to be used in major navigation block.
44. Box model
margin
padding
The CSS box model describes the rectangular boxes that
are generated for elements in the document tree and laid
out according to the visual formatting model.
600px
700px
demo
62. “
I don’t want to take styles effects for granted[…] It
makes me think just that little bit harder about the
semantics of my document. With the reset in place, I
don’t pick strong because the design call for
boldfacing. Instead, I pick the right element whether
it’s strong or em or b or h3 or whatever - and then
style it as needed
– Eric Meyer, Reset Reasoning
