The HTML5 OutlineSemantic Markup

Goal

Understand

Semantic Markup & Outline

&

Share Experiences

Content

• IE7 & html5shiv• What is markup?• What is semantic?• What is outline?• HTML Elements• Designers• Tools

IE7 Context

IE7 Context

IE7 Context

IE7 Context

IE7 Context

html5shiv

https://code.google.com/p/html5shiv/

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/

What is outline?

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

http://html5doctor.com/outlines/

Related Elements

1.Heading Elements

2.Sectioning Elements

3.Root Elements

http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections

Heading Elements

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

itself.

http://www.w3.org/html/wg/drafts/html/master/dom.html#heading-content-0

h1 h2 h3 h4 h5 h6

hgroup

Heading 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.

Sectioning Elements

http://www.w3.org/html/wg/drafts/html/master/dom.html#sectioning-content

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.

http://www.w3.org/html/wg/drafts/html/master/sections.html#sectioning-root

blockquote body

details dialog

fieldset figure

td

Root Elements

Tools

• HTML5 Outliner

• WebApp

• Chrome extension

• Opera extension

Thanks

@chicoui@hmammana