The html5 outline
-
Upload
hernan-mammana -
Category
Technology
-
view
413 -
download
0
description
Transcript of The html5 outline
![Page 1: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/1.jpg)
The HTML5 OutlineSemantic Markup
![Page 2: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/2.jpg)
Goal
Understand
Semantic Markup & Outline
&
Share Experiences
![Page 3: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/3.jpg)
Content
• IE7 & html5shiv• What is markup?• What is semantic?• What is outline?• HTML Elements• Designers• Tools
![Page 4: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/4.jpg)
IE7 Context
![Page 5: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/5.jpg)
IE7 Context
![Page 6: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/6.jpg)
IE7 Context
![Page 7: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/7.jpg)
IE7 Context
![Page 8: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/8.jpg)
IE7 Context
![Page 9: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/9.jpg)
html5shiv
https://code.google.com/p/html5shiv/
![Page 10: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/10.jpg)
HTML Language
Some markup languages, such as HTML, have pre-defined presentation semantics, meaning
that their specification prescribes how the structured data are to be presented;
others, such as XML, do not.
![Page 11: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/11.jpg)
What is semantics?
Elements, attributes, and attribute values are defined to have certain meanings.
http://dev.w3.org/html5/spec/single-page.html#semantics-0
![Page 13: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/13.jpg)
![Page 14: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/14.jpg)
What is outline?
The outline is a list of one or more potentially nested sections.
http://html5doctor.com/outlines/
![Page 15: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/15.jpg)
Related Elements
1.Heading Elements
2.Sectioning Elements
3.Root Elements
http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections
![Page 16: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/16.jpg)
Heading Elements
It defines the header of a section, whether explicitly marked up using sectioning content elements, or implied by the heading content
itself.
http://www.w3.org/html/wg/drafts/html/master/dom.html#heading-content-0
![Page 17: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/17.jpg)
h1 h2 h3 h4 h5 h6
hgroup
Heading Elements
![Page 18: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/18.jpg)
It is a container that corresponds to some nodes in the original DOM tree. It can have one heading associated with it, and can contain any number
of further nested sections.
Sectioning Elements
http://www.w3.org/html/wg/drafts/html/master/dom.html#sectioning-content
![Page 19: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/19.jpg)
Sectioning Elements
article aside nav
section
![Page 20: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/20.jpg)
Root Elements
These elements can have their own outlines, but the sections and headings inside these elements
do not contribute to the outlines of their ancestors.
http://www.w3.org/html/wg/drafts/html/master/sections.html#sectioning-root
![Page 21: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/21.jpg)
blockquote body
details dialog
fieldset figure
td
Root Elements
![Page 22: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/22.jpg)
Tools
• HTML5 Outliner
• WebApp
• Chrome extension
• Opera extension
![Page 23: The html5 outline](https://reader036.fdocuments.net/reader036/viewer/2022081403/554a2cb4b4c90520578b4e4e/html5/thumbnails/23.jpg)
Thanks
@chicoui@hmammana