ict.ken.be

Delivering solid user friendly software solutions since the dawn of time.

HTML5 Overview

Categories: HTML

HTML5

Html5 replaces html4 + xhtml1 + dom2.

What is not html5: css3 transitions, web sockets, geolocation, svg, css3 @font-face, messaging api.

Html5 introduces new elements: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time, video.

Html5 introduces WebForms 2.0: datepickers, numeric steppers, email-search-url fields, put/delete.

Html5 extends api: audio, video, offline apps, editable, drag&drop, history, protocols.

<!DOCTYPE HTML> -> needed cause otherwise will goto quirks
<meta charset="UTF-8" />

<header>multiple headers allowed</header>
<nav>use only for major navigation, eg. not needed for footer link group</nav>
<section>regions with distinct titles</section>
<hgroup>grouping h-tags that belong together, eg. subtitle</hgroup>
<h1>restarting header numbering is encouraged</h1>
<footer>for nearest section</footer>
<article>independently distributable</article>
<aside>inside the tag it relates to</aside>

<figure>group visual content</figure>
<video src="my-movie.mp4" width="320" height="240"></video>
<audio></audio>
<embed></embed>
<canvas>use for report graphics and games, watch out with accessibility friendliness</canvas>

<meter>progress bar if min and max is known</meter>
<progress>progress bar if length of action unknown</progress>
<time></time>
<details>used for tabs and accordions</details>
<command>things that can be invoked by user</command>
<menu>list of commands</menu>

<label for="theAddy">the label</label>
<input name="theAddy" type="email" id="email" tabindex="30" autocomplete="false" autofocus placeholder="suggested input" required>
<input type="number" step="5" min="1" value="1">

getElementsByClassName();

Elements deprecated for authors: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes

Attributes deprecated for authors: a (link rev, charset), img (longdesc, name), html (version), th (abbr), td (scope), all-block-level(align), body (background), img (hspace, vspace), table (tr, th, td, bgcolor, table border, cell padding, cell spacing), td (th,height,width), table (valign).

CONTENT MODELS

block: div, form, h1, h6, ol, ul, li, p, pre, table
inline: span, a, em, img, input, label, strong

metadata, embedded, interactive, heading, phrasing (similar to inline), flow (in normal flow of document), sectioning (by article, aside, nav, section)

API

Video and Audio API (Ogg Theora .ogv - Google VP8 .webm)

Inline Editing API

Offline Application API

History API

Web Protocol API

TOOLS

html testing:

outline testing:

backward compatibility:

MORE HTML5