Semantic MarkupCreating Outline

@hmammana

Goal

Understand Semantic Markup & Outline

Content

• What is markup?• What is semantic?• Kinds of contents• What is outline?• HTML Elements• WAI-ARIA• Microdata• Designers• Tools

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

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.

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

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

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

Kinds of content

http://dev.w3.org/html5/spec/single-page.html#kinds-of-content

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

Exercise

Useful daily outline

What is outline?

The outline is a list of one or more potentially nested sections.

http://html5doctor.com/outlines/

Section Elements

• Outline related HTML elements

• Heading Elements

• Sectioning Elements

• Root Elements

Heading Elements

It defines the header of a section, whether explicitly marked up using sectioning content elements, or implied by the heading content

itself.

Headings & Sections

Heading Elements

h1 h2 h3 h4 h5 h6

hgroup

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.

Headings & Sections

Sectioning Elements

article aside nav

section

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.

Root Elements

blockquote body

details dialog

fieldset figure

td

Section Usage Summary

The <aside> usage

http://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 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

Components

• Roles

• States

• Properties

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

Checkbox

http://www.w3.org/TR/wai-aria/roles#role_definitionshttp://www.w3.org/TR/wai-aria/states_and_properties#global_states

Exercise

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)

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/

Tools

• HTML5 Outliner

• WebApp

• Chrome extension

• Opera extension

Thanks@chicoui