The html5 outline

791 views
681 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
791
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The html5 outline

  1. 1. The HTML5 OutlineSemantic Markup
  2. 2. GoalUnderstandSemantic Markup & Outline&Share Experiences
  3. 3. Content• IE7 & html5shiv• What is markup?• What is semantic?• What is outline?• HTML Elements• Designers• Tools
  4. 4. IE7 Context
  5. 5. IE7 Context
  6. 6. IE7 Context
  7. 7. IE7 Context
  8. 8. IE7 Context
  9. 9. html5shivhttps://code.google.com/p/html5shiv/
  10. 10. HTML LanguageSome markup languages, such as HTML, havepre-defined presentation semantics, meaningthat their specification prescribes how thestructured data are to be presented;others, such as XML, do not.
  11. 11. What is semantics?Elements, attributes, and attribute values aredefined to have certain meanings.http://dev.w3.org/html5/spec/single-page.html#semantics-0
  12. 12. http://www.yomiuri.co.jp/
  13. 13. What is outline?The outline is a list of one or more potentiallynested sections.http://html5doctor.com/outlines/
  14. 14. Related Elements1.Heading Elements2.Sectioning Elements3.Root Elementshttp://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections
  15. 15. Heading ElementsIt defines the header of a section, whetherexplicitly marked up using sectioning contentelements, or implied by the heading contentitself.http://www.w3.org/html/wg/drafts/html/master/dom.html#heading-content-0
  16. 16. h1h2h3h4h5h6hgroupHeading Elements
  17. 17. It is a container that corresponds to some nodesin the original DOM tree. It can have one headingassociated with it, and can contain any numberof further nested sections.Sectioning Elementshttp://www.w3.org/html/wg/drafts/html/master/dom.html#sectioning-content
  18. 18. Sectioning Elementsarticleasidenavsection
  19. 19. Root ElementsThese elements can have their own outlines, butthe sections and headings inside these elementsdo not contribute to the outlines of theirancestors.http://www.w3.org/html/wg/drafts/html/master/sections.html#sectioning-root
  20. 20. blockquotebodydetailsdialogfieldsetfiguretdRoot Elements
  21. 21. Tools• HTML5 Outliner• WebApp• Chrome extension• Opera extension
  22. 22. Thanks@chicoui@hmammana

×