You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
Oct. 7, 2011•0 likes
16 likes
Be the first to like this
Show More
•20,455 views
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Design
What new semantics does HTML5 bring us? Why? Are they enough? What more could we do with? Do semantics matter any more (tl;dr:) yes.
Video and transcript at http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson
You too can be a bedwetting antfucker: Bruce Lawson, Opera, Fronteers 2011
HTML5 Semantics
Bruce Lawson,
Fronteers, 6 October 2011
Video and transcript available at
http://fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson
Links and other resources at
http://my.opera.com/ODIN/blog/bruces-fronteers-presentation-html5-semantics
Some presentational elements are gone
<center> <font> <big>
Also align on <img> <table> etc
background on <body>
bgcolor on <table> etc
www.w3.org/TR/html5-diff/#absent-elements
The u element represents a span of text with an
unarticulated, though explicitly rendered, non-textual
annotation, such as labeling the text as being a proper
name in Chinese text (a Chinese proper name mark), or
labeling the text as being misspelt.
Sexy new woo! semantics
<video> <audio> <canvas>
<source> <track>
HTML3 <FIG>
<FIG SRC="nicodamus.jpeg">
<CAPTION>Ground dweller: <I>Nicodamus bicolor</I>
builds silk snares</CAPTION>
<P>A small hairy spider light fleshy red in color with a
brown abdomen.
<CREDIT>J. A. L. Cooke/OSF</CREDIT>
</FIG>
Top 20 class names
1. footer 11. button
2. menu 12. main
3. style1 13. style3
4. msonormal 14. small
5. text 15. nav
6. content 16. clear
7. title 17. search
8. style2 18. style4
9. header 19. logo
10. copyright 20. body
http://devfiles.myopera.com/articles/572/classlist-url.htm
Top 20 id names
1. footer 11. search
2. content 12. nav
3. header 13. wrapper
4. logo 14. top
5. container 15. table2
6. main 16. layer2
7. table1 17. sidebar
8. menu 18. image1
9. layer1 19. banner
10. autonumber1 20. navigation
http://devfiles.myopera.com/articles/572/idlist-url.htm
<header> and <footer> or similar elements are almost certainly going
to be defined at some point, along with <content> (for the main body of
the page), <entry> or <post> or <article> to refer to a unit of text
bigger than a section but smaller than a page, <sidebar> to mean a, well,
side bar, <note> to mean a note... and so forth. Suggestions welcome.
We'll probably keep it to a minimum though. The idea is just to relieve
the most common pseudo-semantic uses of <div>.
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2004-August/002114.html
<article>
<h1>Ant fucking for beginners</h1>
<p>Rule One: never fuck an elephant. It is
not a type of ant and will not welcome
your advances.</p>
<article>
“Sections may contain headings of any rank, but authors
are strongly encouraged to either use only h1 elements, or
to use elements of the appropriate rank for the section's
nesting level.” http://www.w3.org/TR/html5/sections.html#headings-and-sections
<h1>Today's top stories</h1>
<article>
<h1>Dog bites man</h1>
...
<article>
"The header element represents a group of
introductory or navigational aids."
"A footer typically contains information about its
section such as who wrote it, links to related
documents, copyright data, and the like".
As <CITE>Harry S. Truman</CITE> said…
More information can be found in
<CITE>[ISO-0000]</CITE>
"HTML6 is project of novations, allowing to write broken line from any to any
HTML-element, to refer to place without attribute "id" and "name", to display
table 3x100 of DBMS as table 10x10 of browser, to display hyper-cube as table,
to hide and show HTML-elements... HTML6 enters new elements, which send
data like form, but automatically: to browse column of database and to browse
tree of database. And many others."
Dmitry Turin, HTML 6.8.3
http://html6.by.ru/
HTML3
The BANNER element is used for corporate logos, navigation aids, disclaimers and other
information which shouldn't 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.
Write whatever the fuck you want with some WAI-ARIA sugar on top
is in some scenarios the only thing what works right now. I do not
believe that means we should just let it run its course. The real
solution to making a button implemented using five div elements and
some scripting accessible is not WAI-ARIA. It is to drastically improve
the styling capabilities of <input type="button">.
<cite>Anne van Kesteren</cite>
http://annevankesteren.nl/2010/04/clean-markup-plea
Pretty much everyone in the Web community agrees that “semantics are
yummy, and will get you cookies”, and that’s probably true. But once you
start digging a little bit further, it becomes clear that very few people can
actually articulate a reason why.
So before we all go another round on this, I have to ask: what’s it you
wanna do with them darn semantics?
http://www.alistapart.com/comments/semanticsinhtml5?page=2#12