semantic markup - creating outline
DESCRIPTION
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.TRANSCRIPT
![Page 1: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/1.jpg)
Semantic MarkupCreating Outline
![Page 2: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/2.jpg)
@hmammana
![Page 3: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/3.jpg)
Goal
Understand Semantic Markup & Outline
![Page 4: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/4.jpg)
Content
• What is markup?• What is semantic?• Kinds of contents• What is outline?• HTML Elements• WAI-ARIA• Microdata• Designers• Tools
![Page 5: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/5.jpg)
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
![Page 6: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/6.jpg)
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.
![Page 7: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/7.jpg)
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
![Page 9: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/9.jpg)
![Page 10: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/10.jpg)
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
![Page 11: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/11.jpg)
Kinds of content
http://dev.w3.org/html5/spec/single-page.html#kinds-of-content
![Page 12: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/12.jpg)
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
![Page 13: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/13.jpg)
![Page 14: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/14.jpg)
Useful daily outline
![Page 15: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/15.jpg)
What is outline?
The outline is a list of one or more potentially nested sections.
http://html5doctor.com/outlines/
![Page 16: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/16.jpg)
Section Elements
• Outline related HTML elements
• Heading Elements
• Sectioning Elements
• Root Elements
![Page 17: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/17.jpg)
Heading Elements
It defines the header of a section, whether explicitly marked up using sectioning content elements, or implied by the heading content
itself.
![Page 18: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/18.jpg)
Headings & Sections
![Page 19: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/19.jpg)
Heading Elements
h1 h2 h3 h4 h5 h6
hgroup
![Page 20: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/20.jpg)
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.
![Page 21: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/21.jpg)
Headings & Sections
![Page 22: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/22.jpg)
Sectioning Elements
article aside nav
section
![Page 23: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/23.jpg)
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.
![Page 24: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/24.jpg)
Root Elements
blockquote body
details dialog
fieldset figure
td
![Page 25: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/25.jpg)
Section Usage Summary
![Page 26: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/26.jpg)
The <aside> usage
http://dev.w3.org/html5/spec/single-page.html#usage-summary-0
![Page 27: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/27.jpg)
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
![Page 28: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/28.jpg)
Components
• Roles
• States
• Properties
![Page 29: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/29.jpg)
http://www.paciellogroup.com/blog/misc/ARIA/togglebutton.html
![Page 30: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/30.jpg)
Checkbox
![Page 31: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/31.jpg)
http://www.w3.org/TR/wai-aria/roles#role_definitionshttp://www.w3.org/TR/wai-aria/states_and_properties#global_states
Exercise
![Page 32: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/32.jpg)
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)
![Page 33: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/33.jpg)
![Page 34: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/34.jpg)
![Page 35: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/35.jpg)
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/
![Page 36: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/36.jpg)
Tools
• HTML5 Outliner
• WebApp
• Chrome extension
• Opera extension
![Page 37: Semantic markup - Creating Outline](https://reader036.vdocument.in/reader036/viewer/2022081502/554a2c0fb4c90526578b4eb6/html5/thumbnails/37.jpg)
Thanks@chicoui