F13 – HTML5
Dagens agenda
• HTML5
• Struktur
• Outline
• Nya element
• APIr
• Microdata/RDF/Microformats
WHAT Working Group?
Initiativ, 2004, startat av Apple, Mozilla och Opera
WHATWG adapterades 2007 av W3C och rekommendationen drivs nu av dem med editors från Apple och Google.
HTML5
SVG
Geolocation Web Storage Web Workers
Struktur
audio video
Nya och omarbetade
taggar canvas
CSS3 Web Sockets
Offline Web applications
Drag and drop API
Webforms
Specifikationen
http://dev.w3.org/html5/spec-author-view/
WHATWGs HTML
http://www.whatwg.org/specs/web-apps/current-work/multipage/
W3C HTML5 Web Authors Spec
Webbläsarstöd
http://caniuse.com
http://findmebyip.com/
HTML-struktur
<div> #top
<div>
#extra
<div>
#navigation
<div>
#content
<div> #footer
<div> .post
<div> .post
<div> .post
HTML5-struktur
<header>
<aside>
<nav>
<div>
#content
<footer>
<article>
<article>
<article>
<section><section>
Header
<header>
Headerelementet beskriver en sektions huvud.
Alltså inte bara sidans huvud!
Nav
<nav>
Nav beskriver en sektion på sidan som länkar till andra sidor eller till delar på sidan.
Används inte till alla länkar men till den huvudsakliga navigationen på sidan.
Article
<article>
Artikel syftar på delar på sidan som kan "leva" utan resten av sidan och som med andra ord kan
återpubliceras för sig själv någon annanstans.
Bloggposter, nyhetsartiklar etc.
Section
<section>
En generisk sektion/del av sidan, oftast med en rubrik.
Typiskt kapitel.
Rubriker skapar nya sektioner.
Om du behöver dela upp något bara för att stila om det, använd
<div> istället.
Aside
<aside>
Sektion innehållande information som är relaterad till innehållet kring sektionen.
Typiskt: reklam, tag-clouds,
Footer
<footer>
Fot till den sektion det tillhör.
Behöver inte ligga sista i sektionen.
Men hur stila med CSS?
Inga problem:
#header {
float: left;
margin: 0 auto 10px auto;
}
header {
float: left;
margin: 0 auto 10px auto;
}
<div id="header"> <header>
Blockelement
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
display: block;
}
Se till att de nya taggarna presenteras som blockelement i alla webbläsare, även webbläsare som inte stödjer taggarna.
Använder du exempelvis Meyers reset CSS eller html5boilerplate så görs detta där.
IE-fix
Detta fix behövs för IE8 och lägre.
IE9 har stöd för de nya taggarna
<script>
document.createElement("header");
document.createElement("hgroup");
document.createElement("footer");
document.createElement("article");
document.createElement("section");
document.createElement("nav");
document.createElement("aside");
document.createElement("address");
</script>
Javascriptet läggs i <head>-taggen:
Om du använder javascriptbiblioteket modernizr så görs detta där.
HTML5boilerplate använder modernizr.
HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia aliquet auctor. Morbi lacinia ultricies
condimentum. Donec ut nisi at tellus aliquet adipiscing a vitae velit. Nunc mauris est, blandit ac consectetur at, mollis quis nunc. Ut at ante sit amet nisl volutpat cursus. Praesent feugiat turpis eget orci semper fringilla porta augue hendrerit. Proin interdum, turpis eget semper congue, purus metus dapibus nibh, vitae semper sapien tellus accumsan sapien. Morbi feugiat ultricies risus.
inline block
div h1-h6 p
ul, ol, dl ...
img a b, i
strong, em ...
HTML5
Metadata content
Flow content
Sectioning content
Heading content
Phrasing content
Embedded content
Interactive content
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
base command link meta noscript script style title
Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band"
information.
"
Taggar
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
De flesta element som vi återfinner i body- taggen.
Specifikationen talar inte om hur dessa ska presenteras, block eller inline
a abbr address area article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style sub sup svg table textarea time u ul var video wbr text
Taggar
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
div skapar inte en ny sektion!
article, aside, nav, section Taggar
(h1-h6 skapar även sektioner)
Outline
gsnedders.html5.org/outliner/
<!doctype html>
<title>Outline</title>
<h1>Huvudrubrik</h1>
<nav>
<h2>Navigation</h2>
</nav>
<section>
<h1>Underrubrik 1</h1>
</section>
<section>
<h2>Underrubrik 2</h2>
</section>
<h1>Rubrik 2</h1>
1. Huvudrubrik 1. Navigation 2. Underrubrik 1 3. Underrubtik 2 2. Rubrik 2
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
Definierar en rubrik till en sektion.
h1 h2 h3 h4 h5 h6 hgroup Taggar
hgroup
hgroup grupperar rubriker utan att skapa sektioner för varje rubriknivå.
<hgroup>
<h1>Webbprogrammerare</h1>
<h2>För dig som letar utbildning inom webbprogrammering och webbutveckling</h2>
</hgroup>
h1 blir
sektionsrubriken
Endast h-taggar får finnas i hgroup.
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
a abbr area audio b bdi bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr text
Taggar
Dokumentets text. Kan oftast bara innehålla andra phrasing content objekt.
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
audio canvas embed iframe img math object svg video
Taggar
Bäddar in andra resurser i dokumentet.
HTML5
Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
a audio button details embed iframe img input keygen label menu object select textarea
video Taggar
Element som kan interagera med användaren.
(Video, audio etc. om kontroller finns)
Nya element
<figure>
<figcaption>
<figure>
<img src="bild.png" alt="Bild på en bild" />
<figcaption>Denna bild beskriver hur en bild kan se ut.</figcaption>
</figure>
Behöver inte vara bilder, kan vara tabeller, illustrationer, grafik etc.
Time
<time>
24 timmars tid eller ett datum.
Apple kommer att hålla ett event <time datetime="2011-10-04">i början av oktober</time> då man troligtvis kommer att presentera en ny telefon.
Slashat kommer att live-sända från klockan <time>18:00</time>.
Javascript
Drag and drop API
Offline web applications
manifest-file för att styra cachen.
Audio/Video
Se föreläsning: 05 - Media
Canvas
Se föreläsning: 05 - Media
Formulär
Se föreläsning: 06 – A table form
Relaterade tekniker
Följande tekniker är inte en del av HTML5 men nämns ofta i samband med HTML5.
CSS3
Geolocation
Web Storage
Session storage
Local storage
Web Sockets
Web workers
En semantisk webb
En webb inte bara för människor utan också maskiner.
RDFa
Microdata Microformat
Web 3.0?
Microdata
Utökning av HTML5 specifikationen.
Använder "itemscope", "itemtype" och
"itemprop"
http://dev.w3.org/html5/md/
Microformats
Äldre och välspridd teknik.
Baserar sig på HTML utan tillägg.
hCard
http://microformats.org/
http://html5boilerplate.com
