Semantic markup - Creating Outline


Published on

This presentation was given to the desingers team at MercadoLibre. The outline is working different between HTML4 & HTML5. Understanding the different ways of giving semantics to the content is the goal.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Semantic markup - Creating Outline

  1. 1. Semantic Markup Creating Outline
  2. 2. @hmammana
  3. 3. GoalUnderstand Semantic Markup & Outline
  4. 4. Content• What is markup?• What is semantic?• Kinds of contents• What is outline?• HTML Elements• WAI-ARIA• Microdata• Designers• Tools
  5. 5. What is markup? A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text.
  6. 6. HTML LanguageSome markup languages, such as HTML, havepre-defined presentation semantics, meaning that their specification prescribes how the structured data are to be presented; others, such as XML, do not.
  7. 7. What is semantics? Elements, attributes, and attribute values are defined to have certain meanings.
  8. 8.
  9. 9. Kinds of content • Metadata content • Flow content • Sectioning content • Heading content • Phrasing content • Embedded content • Interactive content
  10. 10. Kinds of content
  11. 11. Exercise math, svg, a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr
  12. 12. Useful daily outline
  13. 13. What is outline? The outline is a list of one or more potentially nested sections.
  14. 14. Section Elements• Outline related HTML elements • Heading Elements • Sectioning Elements • Root Elements
  15. 15. Heading Elements It defines the header of a section, whetherexplicitly marked up using sectioning content elements, or implied by the heading content itself.
  16. 16. Headings & Sections
  17. 17. Heading Elements h1 h2 h3 h4 h5 h6 hgroup
  18. 18. Sectioning Elements It is a container that corresponds to some nodesin the original DOM tree. It can have one heading associated with it, and can contain any number of further nested sections.
  19. 19. Headings & Sections
  20. 20. Sectioning Elements article aside nav section
  21. 21. Root ElementsThese elements can have their own outlines, butthe sections and headings inside these elements do not contribute to the outlines of their ancestors.
  22. 22. Root Elements blockquote body details dialog fieldset figure td
  23. 23. Section Usage Summary
  24. 24. The <aside> usage
  25. 25. WAI-ARIA It defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
  26. 26. Components• Roles• States• Properties
  27. 27.
  28. 28. Checkbox
  29. 29. Exercise
  30. 30. Microdata Microdata is a specification used to nest semantics within existing content on web pages. Search engines, web crawlers, and browsers can extract and process it to provide a richer browsing experience for users.
  31. 31. Designers must • design with accessibility in mind. • design without content is decoration. • know the context and cultural background. • label clear and unambiguous. • bring all the information needed.
  32. 32. Tools• HTML5 Outliner • WebApp • Chrome extension • Opera extension
  33. 33. Thanks @chicoui