The html5 outline
Upcoming SlideShare
Loading in...5
×
 

The html5 outline

on

  • 500 views

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

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.

Statistics

Views

Total Views
500
Views on SlideShare
500
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The html5 outline The html5 outline Presentation Transcript

  • The HTML5 OutlineSemantic Markup
  • GoalUnderstandSemantic Markup & Outline&Share Experiences
  • Content• IE7 & html5shiv• What is markup?• What is semantic?• What is outline?• HTML Elements• Designers• Tools
  • IE7 Context
  • IE7 Context
  • IE7 Context
  • IE7 Context
  • IE7 Context
  • html5shivhttps://code.google.com/p/html5shiv/
  • 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.
  • What is semantics?Elements, attributes, and attribute values aredefined to have certain meanings.http://dev.w3.org/html5/spec/single-page.html#semantics-0
  • http://www.yomiuri.co.jp/
  • What is outline?The outline is a list of one or more potentiallynested sections.http://html5doctor.com/outlines/
  • Related Elements1.Heading Elements2.Sectioning Elements3.Root Elementshttp://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections
  • 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
  • h1h2h3h4h5h6hgroupHeading Elements
  • 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
  • Sectioning Elementsarticleasidenavsection
  • 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
  • blockquotebodydetailsdialogfieldsetfiguretdRoot Elements
  • Tools• HTML5 Outliner• WebApp• Chrome extension• Opera extension
  • Thanks@chicoui@hmammana