Your SlideShare is downloading. ×
#3 - Sectioning content and outline view
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#3 - Sectioning content and outline view

451
views

Published on

- New elements in HTML5 …

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


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
451
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
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

Transcript

  • 1. Tecniche di animazionedigitale 1
  • 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  • 3. Basic 3
  • 4. AgendaNew elements in HTML5 5 14Sectioning content 22Outline view 27Markup and CSS validation
  • 5. New elements in HTML5
  • 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. <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. <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 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. <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 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. Coffee Break
  • 14. Sectioning content
  • 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. 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. Sectioning elements● article● aside● nav● section 17 Basic / Sectioning content
  • 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. 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 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. Sample <body> <article> <h1>Title</h1> <p>Content</p> </article> </body> 21 Basic / Sectioning content
  • 22. Outline view
  • 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. 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. 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. 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

×