HTML/HTML5

HTML5 is een herwerking en uitbreiding van HTML die nieuwe mogelijkheden biedt voor multimedia (audio, video) en gebruikersinteractie (javascript). Door te definiëren hoe de html-code geparsed moet worden door de browser, worden verschillen tussen browsers (Internet explorer, Safari, Firefox, ...) geminimaliseerd.

Deze nieuwe standaard werd ontwikkeld door de WHAWG (Web Hypertext Application Working Group) vanaf 2004 om ongemakken en problemen in webapplicaties op te lossen. HTML5 bepaalt de inhoud en structuur, CSS3 bepaalt de weergave, en javascript bepaalt het gedrag van de webpagina.

Wat is er nieuw?

Html5 bevat niet alleen nieuwe elementen, maar herdefinieert ook sommige elementen en attributen, zodat het eenvoudiger wordt om html-code te schrijven, en sneller om een pagina te laden in de browser. Bovendien is er een uitgebreide ondersteuning voor interactiviteit en grafische elementen zonder dat er externe API aan te pas komen.

Semantiek

In plaats van onderverdelingen te maken met DIV met een ID, kan men nu eenvoudiger gebruik maken van opmaakcontainers header, hgroup, nav, section, article, aside, footer.

Andere semantische elementen zijn figure, figcaption, time (Gregoriaanse kalender met 24-uursaanduiding), mark.

HTML 5-code: documentstructuur van een html5-pagina

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="utf-8">
    <title>documentstructuur van een html5-pagina</title>
    <link rel="stylesheet" href="css3.css" type="text/css">
    <!--[if lt IE9]>
    <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    </script>
    <![endif]-->
  </head> 
  <body>
    <header>
      <h1>Hoofdtitle testpagina</h1>
      <h2>Ondertitel met meer uitleg</h2>
    </header>
    <nav>
      <h2>Navigatielinken</h2>
      <ul>
        <li><a href="link1.htm">link1</a></li>
        <li><a href="link2.htm">link2</a></li>
      <ul>
    </nav>
    <section>
      <article>
        <h2>Artikel</h2>
        <p>paragraaftekst</p>
        <figure>
          <a href=""><img src="" alt="figuur"></a>
        </figure>
      </article>
    </section>
    <aside>
      <h2>Gerelateerde inhoud</h2>
      <ul>
        <li><a href="link3.htm">link3</a></li>
        <li><a href="link4.htm">link4</a></li>
      </ul>
    </aside>
    <footer>
      <p>Copyright <time>2014</time>
         Alle rechten voorbehouden.
         <mark>Voornaam Achternaam Auteur</mark></p>
    </footer>
  </body>
</html>

Elementen

herwerking

Deze oude elementen werden geherdefinieerd:

dl, dd, dt: definition list, details, details

<dl>
  <dt></dt>
  <dd></dd>
</dl>

b, i, small, strong: vette, schuine, kleine, benadrukte tekstopmaak
hr: horizontale lijn om tekst onder te verdelen
menu: user interface met menukeuzes, toolbars, formulierknoppen

vervanging

Onderstaande elementen werden verwijderd van de officiële specificatie, omdat ze enkel op de tekstopmaak slaan zonder semantische betekenis. Het is mogelijk dat sommige browser ze nog enige tijd zullen blijven ondersteunen:

center: wordt vervangen in CSS door text-align:center of margin:auto
basefont: vervangen door body {font-family: family; font-size: size;}
big: vervangen door font-size: larger
font: vervangen door font-family, font-size, color
s, strike: beiden vervangen door text-decoration:line-through
tt: vervangen door font-family:monospace
u: vervangen door text-decoration:underline

applet: vervangen door object
acronym: vervangen door abbr (abbreviation)
dir: vervangen door ul
frameset, frame: te vervangen door fixed-position element of sourced document
noframes: geen alternatief, aangezien frames niet meer ondersteund worden
isindex: te vervangen door een server-side script

align: vervangen in CSS door text-align of float
alink: vervangen door a: active {color:color-value;}
background, bgcolor: vervangen door background-image , background-color en kortweg background
border: vervangen door border-width en kortweg border
cellpadding, cellspacing: vervangen door padding en margin

frame, height, link, rules: verwijderd

Content types

Flow: article, details, table, form, h1, small
Interactive: audio, video, button, select, textarea
Heading: h1, h2, hgroup
Embedded: audio, video, canvas, embed, svg, img, iframe
Sectioning: header, footer, article, section, aside, nav, title
Metadata: script, link, style, command, title
Phrasing: mark, input, kbc, sub, sup

Gebruikersinteractie

contenteditable

Met dit element is het mogelijk om tekstwijzigingen in dezelfde pagina mogelijk te maken. Met javascript kan de aangepaste tekst naar de server doorgestuurd worden om de wijziging op te slaan.

HTML 5-code: voorbeeld van contenteditable

<!DOCTYPE html>
<html lang="nl">
<body>
<p contenteditable="true">Pas deze tekst aan</p>
</body>
</html>

spellcheck

In combinatie met contenteditable, kan de tekst op spellingsfouten gecontroleerd worden.

HTML 5-code: voorbeeld van spellcheck

<!DOCTYPE html>
<html lang="nl">
<body>
<p contenteditable="true" spellcheck="true">Pas deze tekst met spelfouten aan</p>
</body>
</html>

draggable

Dit attribuut maakt het mogelijk om een figuur te verslepen over de pagina.

HTML 5-code: voorbeeld van draggable

<!DOCTYPE html>
<html lang="nl">
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/37/P_Food.png/30px-P_Food.png" draggable="true">
<p draggable="true">Sleep bovenstaande figuur of deze tekst.</p>
</body>
</html>

Met javascript kunnen de bijhorende events (dragstart, drag, dragend, dragenter, dragover, dragleave, drop) afgehandeld worden. Met dataTransfer kunnen gegevens overgekopieerd worden.

e.dataTransfer.getData("text/html");
e.dataTransfer.setData("text/html","tekst en html-code");

Hulpmiddelen

Ondersteuning voor oudere browsers

Door onderstaande code in de head van de pagina op te nemen, kunnen html5-pagina's toch goed weergegeven worden in oudere browsers:

<!--[if lt IE9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

Modernizr

Modernizr is een javascript-library die kan opsporen of de browser een bepaalde html5- of css3-functionaliteit ondersteunt. Zo kunnen deze zaken opgespoord worden: canvas, canvas text, audio, video, local storage, css animation, css gradient. Op die manier is het mogelijk om alternatieven te voorzien.

HTML 5-code: opsporen van compatibiliteit

<!DOCTYPE html>
<html lang="nl" class="no-js">
<head>
<script type="text/javascript" src="modernizr-1.7.min.js">
</script>
</head>
</html>

Meer informatie

validator.w3.org om na te gaan of de website voldoet aan alle richtlijnen