0
HTML5– Semantics<br />Štěpán Bechynský, @stepanb<br />Developer Evangelist<br />Microsoft, Czech Republic<br />
What is HTML5?<br />HTML5 is future of the web development<br />HTML5 is future platform for some consumer applications<br...
Back to roots<br />Current semantics elements<br /><h1>, <h2>, <strong>, …<br />But what is <div>? <br />Source: Introduci...
Small statistics<br />Source: http://devfiles.myopera.com/articles/572/idlist-url.htm<br />
Semantics element of HTML5<br />Source: Introducing HTML5<br />
Selection of HTML5 semantics elements<br />section<br />nav<br />article<br />aside<br />hgroup<br />header<br />footer<br...
Thearticle element<br />The article element represents a self-contained composition in a document, page, application, or s...
Microdata<br />Add more semantics to elements<br />Supported by search engines<br />Bing, Google, Yahoo<br />Dictionaries ...
Custom data attributes<br />Custom data typically used by application<br />Syntax: data-my-key<br />Example of usages – jQ...
HTML5.cz<br />Shromažďuje české zdroje<br />Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“<br />
Upcoming SlideShare
Loading in...5
×

HTML5 (Štěpán Bechynský)

1,644

Published on

Chcete vědět víc? Mnoho dalších prezentací, videí z konferencí, fotografií i jiných dokumentů je k dispozici v institucionálním repozitáři NTK: http://repozitar.techlib.cz

Would you like to know more? Find presentations, reports, conference videos, photos and much more in our institutional repository at: http://repozitar.techlib.cz/?ln=en

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
1,644
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://lists.w3.org/Archives/Public/public-html/2011May/0162.html
  • Open en.wikipedia.orgShowstructureofmainpageOpen facebook.comShowstructureofmainpageOpen twitter.comShowstructureofmainpage – itisHTML5oreilly.comShowstructureofmainpageThere are repeatedidslikecontent, page, footer,…
  • Itcanbe very usefullforscreenreaders
  • Every element has descriptionhow-to use it.
  • Open http://dev.w3.org/html5/spec/sections.htmlShow specificationforeach elementDemoOpenWebmatrixCreatenewsitefromtemplate – StarterSiteOpen it in Visual Studio 2010 SP1 with ASP.NET Web Pages supportAddsemanticselementsAddpicturewithfigure and figcaptionDisputeaboutit, specialheader and nav on the top
  • Show Dictionaries on http://www.schema.org/
  • http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
  • Transcript of "HTML5 (Štěpán Bechynský)"

    1. 1. HTML5– Semantics<br />Štěpán Bechynský, @stepanb<br />Developer Evangelist<br />Microsoft, Czech Republic<br />
    2. 2. What is HTML5?<br />HTML5 is future of the web development<br />HTML5 is future platform for some consumer applications<br />HTML5 is future platform for connected devices (smartphones, tablets)<br />Web Performance Working Group<br />HTML5 is multiplatform<br />HTML5 is markup or set of more technologies<br />HTML5 is not final <br />HTML5 Markup Last Call started on 24th of May 2011<br />http://lists.w3.org/Archives/Public/public-html/2011May/0162.html<br />
    3. 3. Back to roots<br />Current semantics elements<br /><h1>, <h2>, <strong>, …<br />But what is <div>? <br />Source: Introducing HTML5<br />
    4. 4. Small statistics<br />Source: http://devfiles.myopera.com/articles/572/idlist-url.htm<br />
    5. 5. Semantics element of HTML5<br />Source: Introducing HTML5<br />
    6. 6. Selection of HTML5 semantics elements<br />section<br />nav<br />article<br />aside<br />hgroup<br />header<br />footer<br />figure<br />figcaption<br />mark<br />
    7. 7. Thearticle element<br />The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.<br />When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.<br />Zdroj: http://dev.w3.org/html5/spec/sections.html#the-article-element<br />
    8. 8. Microdata<br />Add more semantics to elements<br />Supported by search engines<br />Bing, Google, Yahoo<br />Dictionaries on http://www.schema.org/<br />Attributes<br />itemscope<br />itemtype<br />itemprop<br />itemref<br />itemid<br />
    9. 9. Custom data attributes<br />Custom data typically used by application<br />Syntax: data-my-key<br />Example of usages – jQuery Mobile<br /><div data-role="page"><br /> <div data-role="content"><br /> …<br /> </div><br /></div><br />
    10. 10. HTML5.cz<br />Shromažďuje české zdroje<br />Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×