Uploaded 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 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,551
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. HTML5– Semantics
    Štěpán Bechynský, @stepanb
    Developer Evangelist
    Microsoft, Czech Republic
  • 2. What is HTML5?
    HTML5 is future of the web development
    HTML5 is future platform for some consumer applications
    HTML5 is future platform for connected devices (smartphones, tablets)
    Web Performance Working Group
    HTML5 is multiplatform
    HTML5 is markup or set of more technologies
    HTML5 is not final
    HTML5 Markup Last Call started on 24th of May 2011
    http://lists.w3.org/Archives/Public/public-html/2011May/0162.html
  • 3. Back to roots
    Current semantics elements
    <h1>, <h2>, <strong>, …
    But what is <div>?
    Source: Introducing HTML5
  • 4. Small statistics
    Source: http://devfiles.myopera.com/articles/572/idlist-url.htm
  • 5. Semantics element of HTML5
    Source: Introducing HTML5
  • 6. Selection of HTML5 semantics elements
    section
    nav
    article
    aside
    hgroup
    header
    footer
    figure
    figcaption
    mark
  • 7. Thearticle element
    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.
    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.
    Zdroj: http://dev.w3.org/html5/spec/sections.html#the-article-element
  • 8. Microdata
    Add more semantics to elements
    Supported by search engines
    Bing, Google, Yahoo
    Dictionaries on http://www.schema.org/
    Attributes
    itemscope
    itemtype
    itemprop
    itemref
    itemid
  • 9. Custom data attributes
    Custom data typically used by application
    Syntax: data-my-key
    Example of usages – jQuery Mobile
    <div data-role="page">
    <div data-role="content">

    </div>
    </div>
  • 10. HTML5.cz
    Shromažďuje české zdroje
    Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“