Semantic markup - Creating Outline
1 like1,108 views
This document discusses semantic markup and outlines. It defines markup languages as systems for annotating documents in a way that is distinguishable from text. Semantic markup uses elements, attributes, and values that have specific predefined meanings. An outline is a list of potentially nested sections. Key HTML elements for outlines include headings (h1-h6) and sectioning elements (article, aside, nav, section). WAI-ARIA adds semantics for accessibility, while Microdata embeds semantics within existing content. Designers must consider accessibility and provide all needed context when labeling elements. Tools like HTML5 Outliner can help with outlines.
Semantic markup - Creating Outline
- 1. Semantic Markup Creating Outline
- 2. @hmammana
- 3. Goal Understand 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. http://en.wikipedia.org/wiki/Markup_language
- 6. HTML Language Some markup languages, such as HTML, have pre-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. http://dev.w3.org/html5/spec/single-page.html#semantics-0
- 10. Kinds of content • Metadata content • Flow content • Sectioning content • Heading content • Phrasing content • Embedded content • Interactive content http://dev.w3.org/html5/spec/single-page.html#kinds-of-content
- 12. 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 http://www.w3.org/TR/html-markup/elements.html
- 15. What is outline? The outline is a list of one or more potentially nested sections. http://html5doctor.com/outlines/
- 16. Section Elements • Outline related HTML elements • Heading Elements • Sectioning Elements • Root Elements
- 17. Heading Elements It defines the header of a section, whether explicitly marked up using sectioning content elements, or implied by the heading content itself.
- 19. Heading Elements h1 h2 h3 h4 h5 h6 hgroup
- 20. Sectioning Elements It is a container that corresponds to some nodes in the original DOM tree. It can have one heading associated with it, and can contain any number of further nested sections.
- 22. Sectioning Elements article aside nav section
- 23. Root Elements These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.
- 24. Root Elements blockquote body details dialog fieldset figure td
- 27. 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
- 28. Components • Roles • States • Properties
- 30. Checkbox
- 32. 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)
- 35. 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/
- 36. Tools • HTML5 Outliner • WebApp • Chrome extension • Opera extension
- 37. Thanks @chicoui