Successfully reported this slideshow.
Tecniche di animazionedigitale 1
Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accade...
Basic 3
AgendaNew elements in HTML5       5                            14Sectioning content                            22Outline v...
New elements in HTML5
IntroductionHow were the element names decided upon?  https://developers.google.com/webmasters/state-of-the-web/2005/class...
<details> <summary>The details element represents a disclosure widget from whichthe user can obtain additional information...
<details> <summary> http://jsfiddle.net/MicheleBertoli/5QRUz                         8   Basic / New elements in HTML5
<details> <summary>               9   Basic / New elements in HTML5
<figure> <figcaption>The figure element represents a unit of content, optionally with acaption, that is self-contained, th...
<figure> <figcaption>  <figure>    <img src="/macaque.jpg" alt="Macaque in the trees">    <figcaption>  A cheeky macaque, ...
<time>The time element represents its contents, along with amachine-readable form of those contents in the datetimeattribu...
Coffee Break
Sectioning content
Sectioning models● Text-level semantics — what were previously inline tags● Grouping content — block level elements like p...
IntroductionSectioning content is used to divide an HTML document intosections. Each section of the document would general...
Sectioning elements●   article●   aside●   nav●   section                17   Basic / Sectioning content
Implicit sectioningBecause the HTML5 Sectioning Elements arent mandatory todefine an outline, to keep compatibility with t...
Sample  <section>   <h1>Forest elephants</h1>     <p>In    this   section,   we   discuss         the          lesser   kn...
Untitled documentsIf no heading is at the root level of the document (i.e. notinside sectioning content), then the documen...
Sample  <body>      <article>          <h1>Title</h1>          <p>Content</p>      </article>  </body>                    ...
Outline view
IntroductionThe document outline is the structure of a document, generated bythe document’s headings, form titles, table t...
Tools https://addons.opera.com/en/extensions/details/html5-outliner/?display=en http://gsnedders.html5.org/outliner http:/...
Twentyten            25   Basic / Outline view
Twentyeleven               26   Basic / Outline view
Markup and CSS  validation
IntroductionThe Markup Validation Service is a validator by the World Wide WebConsortium (W3C) that allows Internet users ...
Why validate?●   Validation as a debugging tool●   Validation as a future-proof quality check●   Validation eases maintena...
Markup Validation Service http://validator.w3.org                           30   Basic / Outline view
CSS Validation Service  http://jigsaw.w3.org/css-validator                               31   Basic / Outline view
Thank you
Upcoming SlideShare
Loading in …5
×

#3 - Sectioning content and outline view

902 views

Published on

- New elements in HTML5
- Sectioning content
- Outline view
- Markup and CSS validation

  • Be the first to comment

#3 - Sectioning content and outline view

  1. 1. Tecniche di animazionedigitale 1
  2. 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  3. 3. Basic 3
  4. 4. AgendaNew elements in HTML5 5 14Sectioning content 22Outline view 27Markup and CSS validation
  5. 5. New elements in HTML5
  6. 6. IntroductionHow were the element names decided upon? https://developers.google.com/webmasters/state-of-the-web/2005/classes 6 Basic / New elements in HTML5
  7. 7. <details> <summary>The details element represents a disclosure widget from whichthe user can obtain additional information or controls.The summary element represents a summary, caption, orlegend for the rest of the contents of the summary elementsparent details element, if any. 7 Basic / New elements in HTML5
  8. 8. <details> <summary> http://jsfiddle.net/MicheleBertoli/5QRUz 8 Basic / New elements in HTML5
  9. 9. <details> <summary> 9 Basic / New elements in HTML5
  10. 10. <figure> <figcaption>The figure element represents a unit of content, optionally with acaption, that is self-contained, that is typically referenced as asingle unit from the main flow of the document, and that can bemoved away from the main flow of the document without affectingthe document’s meaning.The figcaption element represents a caption or legend for a figure. 10 Basic / New elements in HTML5
  11. 11. <figure> <figcaption> <figure> <img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption> A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a> </figcaption> </figure> 11 Basic / New elements in HTML5
  12. 12. <time>The time element represents its contents, along with amachine-readable form of those contents in the datetimeattribute.The kind of content is limited to various kinds of dates, times,time-zone offsets, and durations. <time>2011-11-12</time> 12 Basic / New elements in HTML5
  13. 13. Coffee Break
  14. 14. Sectioning content
  15. 15. Sectioning models● Text-level semantics — what were previously inline tags● Grouping content — block level elements like paragraphs, lists, and divs● Forms — everything inside form tags● Embedded content — images, video, audio, and canvas● Sectioning content — the new structural tags 15 Basic / Sectioning content
  16. 16. IntroductionSectioning content is used to divide an HTML document intosections. Each section of the document would generally haveits own header, and possibly footer, as well as content. 16 Basic / Sectioning content
  17. 17. Sectioning elements● article● aside● nav● section 17 Basic / Sectioning content
  18. 18. Implicit sectioningBecause the HTML5 Sectioning Elements arent mandatory todefine an outline, to keep compatibility with the existing webdominated by HTML4, there is a way to define sections withoutthem. This is called implicit sectioning. 18 Basic / Sectioning content
  19. 19. Sample <section> <h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... <h3 class="implicit subsection">Habitat</h3> <p>Forest elephants do not live in trees but among them. ...this subsection continues... </section> 19 Basic / Sectioning content
  20. 20. Untitled documentsIf no heading is at the root level of the document (i.e. notinside sectioning content), then the document itself will beuntitled. 20 Basic / Sectioning content
  21. 21. Sample <body> <article> <h1>Title</h1> <p>Content</p> </article> </body> 21 Basic / Sectioning content
  22. 22. Outline view
  23. 23. IntroductionThe document outline is the structure of a document, generated bythe document’s headings, form titles, table titles, and any otherappropriate landmarks to map out the document.The document outlining algorithm is a mechanism for producingoutline summaries of Web pages based on how they are markedup. 23 Basic / Outline view
  24. 24. Tools https://addons.opera.com/en/extensions/details/html5-outliner/?display=en http://gsnedders.html5.org/outliner http://code.google.com/p/h5o 24 Basic / Outline view
  25. 25. Twentyten 25 Basic / Outline view
  26. 26. Twentyeleven 26 Basic / Outline view
  27. 27. Markup and CSS validation
  28. 28. IntroductionThe Markup Validation Service is a validator by the World Wide WebConsortium (W3C) that allows Internet users to check HTML andXHTML documents for well-formed markup. 28 Basic / Markup and CSS validation
  29. 29. Why validate?● Validation as a debugging tool● Validation as a future-proof quality check● Validation eases maintenance● Validation helps teach good practices● Validation is a sign of professionalism 29 Basic / Markup and CSS validation
  30. 30. Markup Validation Service http://validator.w3.org 30 Basic / Outline view
  31. 31. CSS Validation Service http://jigsaw.w3.org/css-validator 31 Basic / Outline view
  32. 32. Thank you

×