MercadoLibre is every day less requested with the IE7 browser. So in a few months we are going to leave giving support for that specific browser. Now, with a little previous analysis we are able to use the html5shiv tool. I used this slides to explain, share and reflect about how is and works the new HTML5 outline. This was based on http://www.slideshare.net/hmammana/semantic-markup-creating-outline.

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