This document discusses HTML5 semantic markup, outlining the concepts of markup, semantics, and outline structures. It details various HTML elements such as heading elements and sectioning elements, along with their roles and relationships in organizing content. Additionally, it provides links to tools and resources for further exploration of HTML5 outlining and compatibility with older browsers like IE7.

1. The HTML5 Outline
Semantic Markup

2. Goal
Understand
Semantic Markup & Outline
&
Share Experiences

3. Content
• IE7 & html5shiv
• What is markup?
• What is semantic?
• What is outline?
• HTML Elements
• Designers
• Tools

4. IE7 Context

5. IE7 Context

6. IE7 Context

7. IE7 Context

8. IE7 Context

9. html5shiv
https://code.google.com/p/html5shiv/

10. 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.

11. 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

12. http://www.yomiuri.co.jp/

14. What is outline?
The outline is a list of one or more potentially
nested sections.
http://html5doctor.com/outlines/

15. 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

16. 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

17. h1
h2
h3
h4
h5
h6
hgroup
Heading Elements

18. 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

19. Sectioning Elements
article
aside
nav
section

20. 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

21. blockquote
body
details
dialog
fieldset
figure
td
Root Elements

22. Tools
• HTML5 Outliner
• WebApp
• Chrome extension
• Opera extension

23. Thanks
@chicoui
@hmammana