0
Semantic Markup   Creating Outline
@hmammana
GoalUnderstand Semantic Markup & Outline
Content•   What is markup?•   What is semantic?•   Kinds of contents•   What is outline?•   HTML Elements•   WAI-ARIA•   M...
What is markup?             A markup language is a modern system for               annotating a document in a way that is ...
HTML LanguageSome markup languages, such as HTML, havepre-defined presentation semantics, meaning that their specification p...
What is semantics?           Elements, attributes, and attribute values are                defined to have certain meanings...
http://www.yomiuri.co.jp/
Kinds of content           • Metadata content           • Flow content           • Sectioning content           • Heading ...
Kinds of contenthttp://dev.w3.org/html5/spec/single-page.html#kinds-of-content
Exercise                                                 math, svg, a, abbr, address, area,                               ...
Useful daily outline
What is outline?            The outline is a list of one or more potentially                           nested sections.htt...
Section Elements• Outline related HTML elements • Heading Elements • Sectioning Elements • Root Elements
Heading Elements  It defines the header of a section, whetherexplicitly marked up using sectioning content elements, or imp...
Headings & Sections
Heading Elements       h1       h2       h3       h4       h5       h6     hgroup
Sectioning Elements It is a container that corresponds to some nodesin the original DOM tree. It can have one heading  ass...
Headings & Sections
Sectioning Elements       article        aside         nav       section
Root ElementsThese elements can have their own outlines, butthe sections and headings inside these elements    do not cont...
Root Elements   blockquote      body     details      dialog     fieldset      figure        td
Section Usage Summary
The <aside> usagehttp://dev.w3.org/html5/spec/single-page.html#usage-summary-0
WAI-ARIA           It defines a way to make Web content and Web             applications more accessible to people with    ...
Components• Roles• States• Properties
http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html
Checkbox
Exercisehttp://www.w3.org/TR/wai-aria/roles#role_definitionshttp://www.w3.org/TR/wai-aria/states_and_properties#global_states
Microdata            Microdata is a specification used to nest        semantics within existing content on web pages.      ...
Designers must           • design with accessibility in mind.           • design without content is decoration.           ...
Tools• HTML5 Outliner • WebApp • Chrome extension • Opera extension
Thanks @chicoui
Semantic markup -  Creating Outline
Semantic markup -  Creating Outline
Semantic markup -  Creating Outline
Semantic markup -  Creating Outline
Upcoming SlideShare
Loading in...5
×

Semantic markup - Creating Outline

730

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.

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

No Downloads
Views
Total Views
730
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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.http://en.wikipedia.org/wiki/Markup_language
  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.http://dev.w3.org/html5/spec/single-page.html#semantics-0
  8. 8. http://www.yomiuri.co.jp/
  9. 9. Kinds of content • Metadata content • Flow content • Sectioning content • Heading content • Phrasing content • Embedded content • Interactive contenthttp://dev.w3.org/html5/spec/single-page.html#kinds-of-content
  10. 10. Kinds of contenthttp://dev.w3.org/html5/spec/single-page.html#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, wbrhttp://www.w3.org/TR/html-markup/elements.html
  12. 12. Useful daily outline
  13. 13. What is outline? The outline is a list of one or more potentially nested sections.http://html5doctor.com/outlines/
  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> usagehttp://dev.w3.org/html5/spec/single-page.html#usage-summary-0
  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.http://www.w3.org/WAI/intro/aria.php
  26. 26. Components• Roles• States• Properties
  27. 27. http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html
  28. 28. Checkbox
  29. 29. Exercisehttp://www.w3.org/TR/wai-aria/roles#role_definitionshttp://www.w3.org/TR/wai-aria/states_and_properties#global_states
  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.http://en.wikipedia.org/wiki/Microdata_(HTML)
  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.http://www.ixdstudio.com/blog/8-things-every-ui-designer-should-know/
  32. 32. Tools• HTML5 Outliner • WebApp • Chrome extension • Opera extension
  33. 33. Thanks @chicoui
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×