Semantic markup - Creating Outline

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

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Semantic Markup Creating Outline
  • 2. @hmammana
  • 3. GoalUnderstand Semantic Markup & Outline
  • 4. Content• What is markup?• What is semantic?• Kinds of contents• What is outline?• HTML Elements• WAI-ARIA• Microdata• Designers• Tools
  • 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. 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. What is semantics? Elements, attributes, and attribute values are defined to have certain meanings.
  • 8.
  • 9. Kinds of content • Metadata content • Flow content • Sectioning content • Heading content • Phrasing content • Embedded content • Interactive content
  • 10. Kinds of content
  • 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. Useful daily outline
  • 13. What is outline? The outline is a list of one or more potentially nested sections.
  • 14. Section Elements• Outline related HTML elements • Heading Elements • Sectioning Elements • Root Elements
  • 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. Headings & Sections
  • 17. Heading Elements h1 h2 h3 h4 h5 h6 hgroup
  • 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. Headings & Sections
  • 20. Sectioning Elements article aside nav section
  • 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. Root Elements blockquote body details dialog fieldset figure td
  • 23. Section Usage Summary
  • 24. The <aside> usage
  • 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. Components• Roles• States• Properties
  • 27.
  • 28. Checkbox
  • 29. Exercise
  • 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. 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. Tools• HTML5 Outliner • WebApp • Chrome extension • Opera extension
  • 33. Thanks @chicoui