Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 SemanticsBruce Lawson,Fronteers, 6 October 2011Video and transcript available athttp://fronteers.nl/congres/2011/ses...
You too can be abedwetting ant-fucker
http://www.eod.com/devil/archive/web_standards.html
hair-splitting [ˈhɛəˌsplɪtɪŋ]                    (noun)      the making of petty distinctions                     (adj)occ...
miereneuker
hare-splitter
30 new elements
Some presentational elements are gone       <center> <font> <big>    Also align on <img> <table> etc         background on...
Some presentational elements redefined to            have semantics       http://www.w3.org/TR/html5-diff/#changed-elements
The u element represents a span of text with an unarticulated, though explicitly rendered, non-textualannotation, such as ...
Sexy new woo! semantics<video> <audio> <canvas>    <source> <track>
Semantics for 118n
<ruby> 日本 </ruby>
<ruby> 日本<rt> にほん </rt>     </ruby>
<ruby> 日本   <rp>(</rp><rt> にほん </rt>   <rp>)</rp>     </ruby>
http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less
<bdi>
<p>Aroma - 3 reviews</p><p>RTL LETTERS - 5 reviews</p>
<p>Aroma - 3 reviews</p><p><bdi>RTL LETTERS</bdi> - 5 reviews</p>        rishida.net/blog/?p=564, follow @r12a
<time>
<time datetime=2011-10-06>Today</time> <time datetime=2011-10-06T13:40Z01.00>Now</time>     <time datetime=2011-11-13>My b...
<figure>
HTML3 <FIG><FIG SRC="nicodamus.jpeg"> <CAPTION>Ground dweller: <I>Nicodamus bicolor</I> builds silk snares</CAPTION> <P>A ...
HTML5 <figure><figure><img src=bruce-remy.png><figcaption>Bruce and Remy welcome questions<small>Photo &copy; Bruces mum</...
<details>
<details><summary>Click here!</summary><p>This will be revealed</p></details>
Structural semantics
Top 20 class names   1. footer                                       11. button   2. menu                                 ...
Top 20 id names    1. footer                                        11. search   2. content                               ...
<header> and <footer> or similar elements are almost certainly going to be defined at some point, along with <content> (fo...
<content> ?
Note: there isnt a one-to-one correspondence with              role= banner / <header>,             role=contentinfo / <fo...
Biscuit and Chica photograph by Brittany Shaw. All rights reserved. Used with permission
Sectioning content<section>, <article>, <nav>, <aside>
<article>  <h1>Ant fucking for beginners</h1>  <p>Rule One: never fuck an elephant. It is     not a type of ant and will n...
<header>  <h1>Exciting blog</h1></header><section>  <h2>Todays articles</h2> <article>... </article> <article>... </articl...
In HTML5, these are all equivalent<h1>Todays top stories</h1><article>  <h3>Dog bites man</h3>  ...<article>
<h3>Todays top stories</h3><article>  <h6>Dog bites man</h6>  ...<article>
<h6>Todays top stories</h6><article>  <h2>Dog bites man</h2>  ...<article>
“Sections may contain headings of any rank, but authorsare strongly encouraged to either use only h1 elements, orto use el...
Whats the difference between <section>             and <article>?
<section> divides something into parts     <article> is a discrete entity
Are the new semantics specified enough?
"The header element represents a group of      introductory or navigational aids.""A footer typically contains information...
As <CITE>Harry S. Truman</CITE> said…    More information can be found in      <CITE>[ISO-0000]</CITE>
The Golden Rule:
The Golden Rule:There is no Golden Rule
Are semantics teleological?Belief in or the perception of purposeful development toward an end
Do we have the right semantics?
"HTML6 is project of novations, allowing to write broken line from any to any  HTML-element, to refer to place without att...
HTML3The BANNER element is used for corporate logos, navigation aids, disclaimers and other information which shouldnt be ...
<time><person><location>
Do we need a <login> element? A <share> element?
<picture> <source src=small.png media="max-width: 380px"> <source src=medium.png media="max-width: 800px"> <source src=vec...
Do semantics matter, anyway?
<DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0unselectable="on" closure_hashCode_l16mgm="182" act="">    <DIV cl...
Write whatever the fuck you want with some WAI-ARIA sugar on top  is in some scenarios the only thing what works right now...
<SPAN id=:rg class=toxOdd role=link tabIndex=0    closure_hashCode_l16mgm="177">            Create a filter</SPAN>
Pretty much everyone in the Web community agrees that “semantics areyummy, and will get you cookies”, and that’s probably ...
<body></body>
www.jackosborne.co.uk
Bruce Lawson     @brucelbrucel@opera.com
ThanksRichard Ishida for <bdi> screenshotsDaniel Davis for <ruby> screenshots Michael Vacik for sexy ant cartoon
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
HTML3The BANNER element is used
Upcoming SlideShare
Loading in …5
×

Published on

HTML3The BANNER element is used for corporate logos, navigation aids, disclaimers and other information which shouldnt be scrolled with the rest of the document. It provides an alternative to using the LINK element in the document head to reference an externally defined banner. The NOTE element is designed for use as admonishments such as notes, cautions or warnings, as commonly used in technical documentation. The <PERSON> element is used for names of people to allow these to be extracted automatically by indexing programs.

Published in: Technology, Design

×