Semantic HTML5

Semantic HTML 5Terry Ryan | Developer EvangelistTwitter: @tpryan

Who are you?

OVERVIEW

Semantic HTML means your markup describes it’s contentwithout presenting it

Definition• HTML where speciﬁc elements are used• HTML where elements are not misused• HTML with no presentation information

Semantic HTML is a• Not Boolean• Not always objective• A continuum Text

ExampleUnsemantic Semantic <body><body background="css/bg.png"> <div id="header"><font face="Calibri”><center> <h1>The Awesome Blog of Awesome</<table width="800" bgcolor="#FFFFFF" border="10" h1>bordercolor="#FFFFFF"><tr><td><table width="100%" bgcolor="#f0f0f0" Text Text Text <p class="tagline"> Awesome is a State of Mind </p>border="0“> </div> <tr> <td><h1> <font face="Palatino Linotype">The Awesome Blog of Awesome</font> </h1></td> </tr> <tr> <td align="right"><p> <i>Awesome is a State of Mind</i> </p></td> </tr></table>

HTML5 ? What does this have to do with HTML5?

HTML5 adds more <body><header> <h1>The Awesome Blog of Awesome</h1> <p>Awesome is a State of Mind</p></header><nav><ul> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul></nav>

HTML5XHTML

ELEMENTS

HeaderPreviously<div id="header"> <h1>The Awesome Blog of Awesome</h1> <p class="tagline">Awesome is a State of Mind</p></div> Text Text TextHTML 5<header> <hgroup> <h1>The Awesome Blog of Awesome</h1> <h2>Awesome is a State of Mind</h2> </hgroup></header>

<hgroup> ? What’s the <hgroup> all about?

Hgroup<hgroup> <h1></h1> <h2></h2></hgroup>It’s for grouping related headers, that don’t spawn theirown node in the outline

<hgroup> ? <huh>?

Effect of hgroupWithout WithH1 – Awesome Blog of Awesome H1 – Awesome Blog of Awesome H2 - Awesome is a State of Mind H2 - Recent Posts H2 - Recent Posts TextH3 I Made a Post Thingie Text Text H3 I Made a Post Thingie H3 My Thoughts are made manifest H3 My Thoughts are made manifest

<hgroup> ? Still with the <huh>?

Outlines• Outlines seem really important to the people who push semantic HTML 5• Are they really important? • Today: No • Tomorrow: Who knows?• But this is a semantically correct way of reducing classes and extraneous divs

NavPreviously HTML 5<div id="nav"> <nav> <ul> <ul> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">Blog</a></li> <li><a href="">About</a></li> Text Text Text <li><a href="">About</a></li> <li><a href="">Contact</a></li> <li><a href="">Contact</a></li> </ul> </ul></div> </nav>

NavPreviously HTML 5<div class="post”> <article><div class="postheader"> <header> <h3><a href="">I Scream My Thoughts</a></h3> <h1><a href="">I Scream My Thoughts</a></h1> <p class="date">August 10, 2011</p></div> Text Text Text <time>August 10, 2011</time> </header><p>You probably havent heard of them duis</p> <p>You probably havent heard of them duis </p></div> </article>

ArticlePREVIOUSLY<div class="post”><div class="postheader"> <h3><a href="">I Scream My Thoughts</a></h3> <p class="date">August 10, 2011</p></div> Text Text<p>You probably havent heard of them duis</p> Text</div>HTML5<article><header> <h1><a href="">I Scream My Thoughts</a></h1> <time>August 10, 2011</time></header><p>You probably havent heard of them duis </p></article>

a piece ofcontent that can

Section There’s also this thing called “<section>” how does that work?

An <article> is a piece of stand- alone

Blog Post

Comment

A <section> is a collection of related pieces of

Related Entries

<articles>can contain<sections>

Article

ArticleSectionSectionSection

<sections>can contain <articles>

<articles>can contain other <articles>

ArticleSectionSectionSection

ArticleSectionSectionSectionArticleArticle

ContentPreviously HTML 5<div class=”content”> <div class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </div>

Also correctPreviously HTML 5<div class=”content”> <section class=”content”><div class="post”> <article>... ...</div> </article><div class="post”>... Text <article> Text Text ...</div> </article><div class="post”> <article>... ...</div> <article></div> </section>

Umm That’s great, but frankly not that much of a difference. How is this better?

Benefit 1Before HTML 5 </div> </div></div> </article></div> Text </section> Text Text<div id=“footer”> <footer></div> </footer></body> </body>

Benefit 2 Less monkeying with content hierarchies

ArchiMain Post ve

ArchiMain Post ve Artic Artic Artic le le le

ArchiMain Post ve article header h1 Artic Artic Artic le le le

Benefit 3 No longer bound to one header or one nav can have multiple.

New elementswork across modern browsers

What’s yourdeﬁnition ofModern?

Use theHTML 5 Shiv http://code.google.com/p/html5shiv/

ATTRIBUTES

Data<p data-ﬁrstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p>Add “data-” to anything to make your content contain dataUses? •Scritping •Microformats •jQuery Mobile •Perhaps future Search Engine hints.

These nextthings aren’t semantic, just kinda

contenteditable<p contenteditable="true” class="comment">Comment</p>Allows any text to be user editable, not just input and textareas.Uses? •Better CMS systems •Comment previews

spellcheck<p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p>Allows user editable ﬁeld to trigger the browser’s spellcheck interfaceUses? •No one spellchecks anything they post on the web •But you will have the moral high ground to point out on your site they could have.

FORMSelements

HTML5 includes lots ofnew <input>

They aren’tsupported on every browser

All browsers default to showing unknowninput types

Search<input type=“search” name=“search” />Support is spottyBrowser vendors tend to round, add magnifying glass, etc. Chart from - http://wufoo.com/html

Email<input type=“email” name=“email” />Provides validationProvides email keyboard on iOS devices. Chart from - http://wufoo.com/html

URL<input type=“url” name=“url” />Provides validationProvides url keyboard on iOSdevices. Chart from - http://wufoo.com/html

Number<input type=“number” name=“cost” />Provides keypad on iOS and Androiddevices.Provides a stepper on desktopsTakes attributes: Min/Max Step Chart from - http://wufoo.com/html

Tel<input type=“tel” name=“cell” />Provides keypad on iOS and Android devices. Chart from - http://wufoo.com/html

Not wellsupported, but have potential

Range<input type=“range” name=“volume” />Provides a set of valuesThe slider allows you to pick oneNot terribly preciseTakes attributes: Min/Max Step Chart from - http://wufoo.com/html

Date<input type=“date” name=“dob” />Provides validationOn Opera Displays a data pickerOn Safari/Chrome Displays tickerIE Dashes your hopes and dreams the way only IE can Chart from - http://wufoo.com/html

FORMSattributes

Output<output />Semantically correct placeholder for calculated values.Can also be used a label for input type=“slider” Chart from - http://wufoo.com/html

Meter<meter min=“0” max=“20” value=“12”>12cm</meter>Basically a Bar Chart of results Chart from - http://wufoo.com/html

Progress<progress min=“100” value=“20”>20%</progress>Could be used to indicate progressthrough a multistep formCould be programmatically changed toindicate progress of program Chart from - http://wufoo.com/html

PITFALLS

Remember 10 Years ago?

On Tableless designs Don’t use tables for layout, use CSS. Tables are for tabular Zeldman data. They are just one of the tools in your toolkit. Holzschlag SheaIcons by:http://www.ngenworks.com/

What people heard Don’t use tables Tables are for Zeldman tools. Holzschlag SheaIcons by:http://www.ngenworks.com/

I’m not saying Don’t use div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent

A lot of this stuff is in Flux

You arenot requiredto do any of what I just

CONCLUSIONS

Can you use it?

On desktops

The most common browsers have crappy HTML 5 supportSource: https://netaverages.adobe.com

Actually, not so much anymoreSource: https://netaverages.adobe.com

New Elements• Supported on most browsers• If they are not supported, can be enabled using the HTML 5 Shiv

New Attributes• Supported on most browsers• If they are not supported, they have no impact.

New Form Inputs• Support wildly varies• If they are not supported, they have no impact.

New Form Elements• Support wildly varies• Mimic things that have been provided by JavaScript for years

On mobile

Big Question:Why use this stuff??

Used to be about the “Blind Billionaire

It’s Also about the Annoyed Reader

Andincrease theunderstandability of your

For Future Reference• HTML 5 General • http://www.diveintohtml5.net • http://html5doctor.com• HTML5 Semantics • http://www.diveintohtml5.net/semantics.html• HTML 5 Forms • http://wufoo.com/html5 • http://www.diveintohtml5.net/forms.html• HTML Status • http://caniuse.com

Follow up?• Preso will be up at: - http://slideshare.net/tpryan• Feel free to contact me - terry.ryan@adobe.com Text - http://terrenceryan.com - Twitter: @tpryan - github: tpryan

http://www.conseilsmarketing.com	791
http://10.16.21.185	32
http://localhost	22
http://yzhao-mn.linkedin.biz	3
https://twimg0-a.akamaihd.net	2
https://si0.twimg.com	1
http://vrindavijayan.blogspot.in	1
http://sandi8416apr	1

Semantic HTML5

by Terry Ryan on Aug 01, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 853

Statistics

Semantic HTML5 Presentation Transcript