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.

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

8. http://www.yomiuri.co.jp/

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

11. Kinds of 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

14. Useful daily outline

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.

18. Headings & Sections

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.

21. Headings & 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

25. Section Usage Summary

26. The <aside> usage
http://dev.w3.org/html5/spec/single-page.html#usage-summary-0

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

29. http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html

30. Checkbox

31. Exercise
http://www.w3.org/TR/wai-aria/roles#role_definitions
http://www.w3.org/TR/wai-aria/states_and_properties#global_states

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