Wer entwickelt HTML5?

W3C

Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der World Wide Web betreffenden Techniken.

WHAT WG

WHAT WG

• besteht unter anderem aus  Mozilla Foundation, Opera Software ASA und Apple Inc
• Spricht vom "Living Standard"
• aus HTML5 wird HTML

HTML5

besteht aus HTML, CSS und JS

Alte Semantik

aus

		    <div id="header">Kopf</div>
		    
		    <div class="navigation">Navigation</div>
		    
		    <div class="content">
		    	<h1>Überschrift</h1>
		    	<h2>Artikel Untertitel</h2>
		    	
		    	<div class="Kapietl">
		    		<h3>Kapitel 1</h3>
		    	</div>
		    </div>
		    
		    <div id="footer">Footer</div>
		    

wird

Neue Semantik

			<header>Kopf</header>
			<nav>Navigation</nav>
			
			<article>
				<hgroup> 
			    <h1>Artikel Überschrift</h1> 
			    <h2>Artikel Untertitel</h2> 
			</hgroup>

			<section>
			    <h1> Kapitel 1</h1>
			    <p>Lorem Ipsum</p>
			</section>
			</article>
			<footer>Footer</footer>

Microdata

• zusätzliche Semantic für Webseiten
• Versuch maschinenlesbare Informationen in HTML-Dokumente zu definieren
• Browser, Browser-Extensions und Suchmaschinen können den Code zb. in vCard konvertieren

<div itemscope itemtype="http://microformats.org/profile/hcard">
	<span itemprop="fn">Max Mustermann</span>
	<img itemprop="photo" src="avatar.png" alt="Avatar" />
</div>
    	

Forms

Neue Input Types

• <input type="search"> for search boxes
• <input type="number"> for spinboxes
• <input type="range"> for sliders
• <input type="color"> for color pickers
• <input type="tel"> for telephone numbers
• <input type="url"> for web addresses

Forms

Neue Input Types

• <input type="email"> for email addresses
• <input type="date"> for calendar date pickers
• <input type="month"> for months
• <input type="week"> for weeks
• <input type="time"> for timestamps
• <input type="datetime"> for precise, absolute date+time stamps
• <input type="datetime-local"> for local dates and times

beschreibende Link-Relationen

<link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/><link rel="icon" href="/favicon.ico"/><link rel="pingback" href="http://myblog.com/xmlrpc.php"/><link rel="prefetch" href="http://myblog.com/main.php"/><a rel="archives" href="http://myblog.com/archives">old posts</a><a rel="external" href="http://notmysite.com">tutorial</a><a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a><a rel="nofollow" href="http://notmysite.com/sample">wannabe</a><a rel="tag" href="http://myblog.com/category/games">games posts</a>

Neue Elemente

Canvas

mit dem Canvas-Element kann über JS gezeichnet werden

Video

• mit dem Video-Element können Videos ohne weiteren Bedarf an Player eingebunden werden
• momentan herrscht noch Uneinigkeit über die zu verwendenden Codecs, möglich sind .mp4, .webm und.ogv
• Fallback: Video for Everybody

Audio

• ähnlich wie beim Video-Element kann hier ohne zusätzlichen Aufwand eine Audiodatei eingebunden werden
• auch hier besteht noch uneinigkeit des zu verwendenden Formats, möglich sind .mp3, .wav und .ogg

  	<audio controls autobuffer>
  		<source src="musik.ogg" />
  		<source src="musik.mp3" />
	</audio>