HTML5 semantics
109
Welcome back!
-
Upload
justin-halsall -
Category
Technology
-
view
3.246 -
download
0
description
Resources http://html5doctor.com http://html5demos.com HTML5 resets http://html5doctor.com/html-5-reset-stylesheet/ http://sencss.kilianvalkhof.com
Transcript of HTML5 semantics
Welcome back!
Justin HalsallCTO, betribes
Justin HalsallCTO, betribes
Passions
Tablesnested fail
web standards
web stuff?!
web stuff?!
wtf?
wtf? thats cool!
web standards
web standards
web standards
Railscool!
RailsRails is
AWESOME!
XHTML 2.0don’t hold your breath
backwards compatibleand required all documents to be served as XML
this buwdy aint gonna fly...
its to fat... he he
WHATWGWeb Hypertext Application Technology Working Group
HTML5W3C + WHATWG
Doctypeyou know that long thing you always have to look up
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
Charsetmeta, bla bla bla utf-8!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="screen.css">
<script type="text/javascript" src="konamicode.js"></script>
<link rel="stylesheet" href="screen.css">
<script src="konamicode.js"></script>
Block level <a>Wait, that didn’t used to be valid...
<a href="http://thedailymo.com"> <h2>The Daily Mo</h2> <p>An awesome Movember viral app.</p></a>
Cleanup time...
frame, frameset,noframes
frame, frameset,noframesNO MORE
acronym was dropped for abbr
acronym was dropped for abbr
font, big, center& strike
font, big, center& strikeNO MORE
Semanticswhat do I care?
AccessibilityNot just for the blind anymore
SEOGoogle is your biggest blind user
RepurposingYour web app is your api
UsabilitySurprisingly enough
related
related
related
related
unrelated
happyNew elements!
Structure elements “heeeeead, body, section, footer...”
<header>great for intros, navigation etc.
<section>it’s all in the name
<nav>“lets go!”“where to?”“check the nav elements”
<article> useful for... articles?!
<article> useful for... articles?!
<aside>sidenotes
<footer> metadata related to parent
<footer> metadata related to parent
<hgroup>grouping headings together
<hgroup> <h1>...</h1> <h2>...</h2></hgroup>
HTML Outline
HTML4
<div><h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </div><div><h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <div><h2>Diet</h2></div><h1>Mongolian gerbils</h1></div>
HTML4
<h1>Forest elephants</h1> ...<h2>Habitat</h2> ...<h2>Diet</h2>...<h1>Mongolian gerbils</h1>
HTML4
1. Forest elephants
1.1. Habitat
1.2. Diet
2. Mongolian gerbils
<h1>Forest elephants</h1> ...<h2>Habitat</h2> ...<h2>Diet</h2>...<h1>Mongolian gerbils</h1>
HTML5
<section><h1>Forest elephants</h1> <p>In this section, we discuss the lesser known forest elephants. ...this section continues... </section><section><h2>Habitat</h2> <p>Forest elephants do not live in trees but among them. ...this subsection continues... <section><h1>Diet</h1></section><h2>Mongolian gerbils</h2></section>
HTML5
<section><h1>Forest elephants</h1> </section><section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2></section>
HTML5
1. Forest elephants
2. Habitat
2.1. Diet
3. Mongolian gerbils <section> <h1>Forest elephants</h1> </section><section> <h2>Habitat</h2> <section> <h1>Diet</h1> </section> <h2>Mongolian gerbils</h2></section>
sub headings not interesting in outline
h1h2
sub headings not interesting in outline
h1h2
HTML5
1. Soocial
1.1. Hassle free contact syncing
1.1.1. Pricing
<section> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> <section> <h1>Pricing</h1> </section> ...</section>
HTML5
<section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ...</section>
HTML5
<section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ...</section>
HTML5
1. Soocial
1.1. Pricing
<section> <hgroup> <h1>Soocial</h1> <h2>Hassle Free contact syncing</h2> </hgroup> <section> <h1>Pricing</h1> </section> ...</section>
<figure> & <figcaption>
images, graphs etc.
<figure> & <figcaption>
images, graphs etc.
<time><time datetime="2010-11-01">8 days, 8 hrs and 5 min from now</time>
<time><time datetime="2010-11-01">8 days, 8 hrs and 5 min from now</time>
data- Attributes
<a class="movie" href="http://movienotify.com/kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1">Kick-Ass (2010)</a>
<a class="movie" href="http://movienotify.com/kick-ass[2010]" data-name="Kick-Ass" data-year="2010" data-imdb-rating="8.1">Kick-Ass (2010)</a>
<div id='trailer' class='loading'data-src="<%= movie_trailers_path @movie, :json %>"> loading...</div>
<div id='trailer' class='loading'data-src="<%= movie_trailers_path @movie, :json %>"> loading...</div>
HTML5 shiv: http://remysharp.com/2009/01/07/html5-enabling-script/
<script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); ...</script>
Questions?•Twitter: @juice10
•Screenshots:
•movienotify.com
•thedailymo.com
•blog: juice10.com
•pet project: tvnotify.com
•We (Betribes.com) are looking for cool new colleagues. Maybe you?
•E-mail: [email protected]
[passion fruit] http://www.flickr.com/photos/stefanvds/3260955737/[tables] http://www.flickr.com/photos/cav666/3562455727/
[ipad stand] http://www.flickr.com/photos/4nton/4577185176/in/photostream/[web] http://www.flickr.com/photos/foxypar4/2124673642/
[shark] http://www.flickr.com/photos/oskay/265899766/in/photostream/[sedgeway] http://www.flickr.com/photos/oskay/265899988/sizes/o/in/photostream/
[smily hand] http://www.flickr.com/photos/dotbenjamin/2765083201/[rails] http://www.flickr.com/photos/library_of_congress/2178402745/
[html5 fist] http://www.flickr.com/photos/justinsomnia/513636061/[skelleton] http://www.flickr.com/photos/powerhouse_museum/2980051095/
[chicken] http://www.flickr.com/photos/uw_digital_images/4476181225/[cleaner] http://www.flickr.com/photos/library_of_congress/
[fireworks] http://www.flickr.com/photos/bestrated1/341866875/[google founders] http://www.wired.com/science/discoveries/news/2007/09/
dayintech_0907
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.net/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.fdocuments.net/doc/165x107/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
