#3 - Sectioning content and outline view
2 likes953 views
This document discusses techniques for digital animation. It covers new elements in HTML5 like <details> and <summary> which represent disclosure widgets. It also discusses sectioning content elements like <article>, <aside>, <nav>, and <section> that are used to divide HTML documents into sections. The document explains the document outlining algorithm and shows examples of outline views of web pages. It also promotes validating HTML and CSS to check for well-formed markup and as a debugging and quality control tool.
#3 - Sectioning content and outline view
- 2. Tecniche di animazione digitale 1 Michele Bertoli Founder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
- 3. Basic 3
- 4. Agenda New elements in HTML5 5 14 Sectioning content 22 Outline view 27 Markup and CSS validation
- 5. New elements in HTML5
- 6. Introduction How were the element names decided upon? https://developers.google.com/webmasters/state-of-the-web/2005/classes 6 Basic / New elements in HTML5
- 7. <details> <summary> The details element represents a disclosure widget from which the user can obtain additional information or controls. The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any. 7 Basic / New elements in HTML5
- 8. <details> <summary> http://jsfiddle.net/MicheleBertoli/5QRUz 8 Basic / New elements in HTML5
- 9. <details> <summary> 9 Basic / New elements in HTML5
- 10. <figure> <figcaption> The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning. The figcaption element represents a caption or legend for a figure. 10 Basic / New elements in HTML5
- 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. <time> The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. 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. Coffee Break
- 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. Introduction Sectioning content is used to divide an HTML document into sections. Each section of the document would generally have it's own header, and possibly footer, as well as content. 16 Basic / Sectioning content
- 17. Sectioning elements ● article ● aside ● nav ● section 17 Basic / Sectioning content
- 18. Implicit sectioning Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning. 18 Basic / Sectioning content
- 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. Untitled documents If no heading is at the root level of the document (i.e. not inside sectioning content), then the document itself will be untitled. 20 Basic / Sectioning content
- 21. Sample <body> <article> <h1>Title</h1> <p>Content</p> </article> </body> 21 Basic / Sectioning content
- 22. Outline view
- 23. Introduction The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document. The document outlining algorithm is a mechanism for producing outline summaries of Web pages based on how they are marked up. 23 Basic / Outline view
- 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. Twentyten 25 Basic / Outline view
- 26. Twentyeleven 26 Basic / Outline view
- 27. Markup and CSS validation
- 28. Introduction The Markup Validation Service is a validator by the World Wide Web Consortium (W3C) that allows Internet users to check HTML and XHTML documents for well-formed markup. 28 Basic / Markup and CSS validation
- 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. Markup Validation Service http://validator.w3.org 30 Basic / Outline view
- 31. CSS Validation Service http://jigsaw.w3.org/css-validator 31 Basic / Outline view
- 32. Thank you