Html5 nl

Wilfred Nas
Front end developer

anwb, ing, agis, vst-pn, essent...

wnas.nl
@wnas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>

<title></title>

<meta http-equiv="Content-Type"
content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="UTF-8">

<title>HTML 5</title>
</head>
<body>

<p>foo</p>
</body>
</html>

<div id=header>

<div id=nav>

<ul>

<li><a href=foo.html>foo</a></li>

...

</ul>

</div>

<div class=headers>

<h1>header</h1>

<p>tagline</p>

</div>
</div>

<header>

<nav>

<ul>

<li><a href=foo.html>foo</a></li>

...

</ul>

</nav>

<hgroup>

<h1>header</h1>

<h2>tagline</h2>

</hgroup>
</header>

New
article meter
aside nav
audio output
canvas progress
details section
figcaption summary
figure time
footer video
header
hgroup
mark

Semantiek
Hoe duidelijker, hoe beter je te begrijpen bent.

<header>

<hgroup>

<h1>header</h1>

<h2>tagline</h2>

</hgroup>
</header>
<section>

<article>

<hgroup>

<h1>header</h1>

<time>2011-06-08</time>

</hgroup>

<p>fooooo</p>

<section>

<h1>header</h1>

<p>baaaaaar</p>

<footer>copy</footer>

</section>

<aside>

<time>22.00</time>

</aside>

</article>
</section>

<article>
“Like an article of clothing, not a newspaper article.” (@brucel)

Maar wat doen we met
oudere browsers? ( kuch IE )

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section
{ display:block; }

“wel of geen aanhalingstekens?”

class=foo

class=foo bar
class=”foo bar”

use “quotes” and lowercase.

Form elementen
Dingen die je al lang wilde...

// build an input to test for html5 attr.
var i = document.createElement('input');
// see if placeholder is supported
if ( !('placeholder' in i) ) {

//provide placeholder support
}

search
tel time
url datetime-
email local
datetime number
date range
month color
week

autocomplete height and
novalidate width
autofocus list
form min
form overrides max

formaction, step

formenctype, multiple

formmethod, pattern

(regexp)
formnovalidate, placeholder

formtarget required

<input

type=email

required>

(alle browsers)

<input

type=email

required>

(indien niet ondersteund)

<input

type=email

required>

(alle browsers, met javascript)

http://wnas.nl/html5-safe-usage-2

http://diveintohtml5.org/video.html

Html5 nl

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Html5 nl

Similar to Html5 nl (20)

Recently uploaded

Recently uploaded (20)

Html5 nl

Editor's Notes