HTML5 Introductie

HTML5 is de laatste en meest geavanceerde versie van HTML, technisch gezien is HTML geen programmeertaal maar een opmaaktaal. In deze introductie geef ik de belangrijkste veranderingen en nieuwe features binnen HTML5 aan, een basiskennis van HTML is hiervoor wel nodig.

HTML5 in vogelvlucht

HTML5 is de volgende grote revisie van de HTML standaard en deze vervangt de laatste versies HTML 4.01 en XHTML 1.1. HTML5 is de nieuwe standaard voor het structureren en presenteren van webcontent en het is een samenwerking van het World Wide Web Consortium (W3C) en de Web Hypertext Application Technology Working Group (WHATWG). Deze nieuwe standaard zal ook voor het eerste dingen als video afspelen en drag-and-drop en uitgebreide grafische mogelijkheden implementeren. Momenteel (begin 2014) ondersteunen de laatste versies van Apple Safari, Google Chrome, Mozilla Firefox en Opera de meeste HTML5 features en Internet Explorer 9.0 zal ook al enige support hebben voor HTML5. Alle mobile web browsers die voorgeïnstalleerde staan op mobiele telefoons en tablets hebben uitstekende support voor HTML5. Binnen Microsoft Windows 8 RT is HTML5 / CSS3 / Javascript zelfs het voorkeur programmeer platform voor apps.

Nieuwe features van HTML5

HTML5 introduceert een aantal nieuwe elementen en attributen die kunnen helpen om moderne websites, maar ook complete web-apps te bouwen.

  • Nieuwe tags om secties binnen uw document beter aan te kunnen geven zoals: <header>, <footer> en <section>.
  • Forms 2.0, veel verbeteringen en uitbreidingen (extra attributen) voor <input> tags.
  • Persistent Local Storage, lokaal opslaan van gegevens zonder extra plugins.
  • WebSocket, de mogelijkheid om bidirectioneel te communiceren vanuit een web applicatie.
  • Server-Sent Events, dit zijn events die geïnitieerd worden door de web server naar de client browsers.
  • Canvas, een hele mooie feature om een grafisch vlak toe te voegen waar men door middel van JavaScript op kan tekenen. Dit maakt het zelfs mogelijk complete grafische platformspellen te programmeren in HTML5 canvas, JavaScript en CSS3.
  • Audio en Video, ook kunt u nu audio en / of video embedden in uw web pagina's zonder gebruik te maken van extra plugins.
  • Geolocation, bezoekers hebben nu de mogelijkheid om hun locatie door te geven aan uw web applicatie.
  • Drag and drop, de mogelijkheid om items te verslepen op uw webpagina.

Backward compatibiliteit

HTML5 is ontworpen om zoveel mogelijk backward compatible te zijn met alle bestaande webbrowsers. Veel nieuwe features bouwen door op al bestaande features en bieden een zogenaamde fallback mogelijkheid voor oudere browsers. Ik ga niet in op de discussie of men nog oudere browsers moet ondersteunen of bezoekers gewoonweg moet weigeren wanneer ze met een verouderde browser de website bezoeken. Toch is het wel handig om de browserversie te detecteren en bepaalde features aan of uit te zetten, maar ook is het nu nog belangrijk om te detecteren of een bepaalde nieuwe feature wel ondersteund wordt door de web browser.

HTML5 Syntax

In veel opzichten is HTML5 minder streng dan HTML4 en XHTML zoals: grote en kleine letter zijn toegestaan voor tag namen (hoewel kleine letter wel het meest gebruikt worden), quotes zijn weer optioneel voor attributen, attribuut waarden zijn optioneel, het sluiten van lege elementen is optioneel.

DOCTYPE

Het DOCTYPE was in oudere versie van HTML veel langer omdat die versie van HTML nog op SGML gebaseerd waren en dus een DTD moesten specificeren. HTML5 gebruikt een zeer korte DOCTYPE:

<!DOCTYPE html>

Character Encoding

Ook de Character Encoding metadata tag is eenvoudiger geworden:

<meta charset="UTF-8">

De <script> en <link> tag

Het type attribuut is bij deze tags komen te vervallen en de syntax is nu:

<script src="scriptfile.js"></script>

<link rel="stylesheet" href="stylefile.css">

HTML5 elementen

Net als in de vorige versie van HTML zijn HTML5 elementen opgemaakt door middel van start tags en eind tags. Tags worden opgemaakt door kleiner en groter dan tekens met daartussen de tagnaam. Het verschil tussen start en eind tags is dat eind tags een / bevatten voor de tagnaam:

<div>...</div>

HTML5 tagnamen kunnen in (gemengd) grote en kleine letters geschreven worden maar gebruikelijk is wel geheel kleine letters. De meeste elementen zoals

omsluiten data maar er zijn ook lege tags die geen data mogen bevatten zoals <br /> en <hr />.

HTML5 attributen

Elementen kunnen attributen hebben die informatie toevoegen aan het element, sommige attributen zijn globaal en kunnen bij elk element gebruikt worden zoals bijvoorbeeld id="naam" en class="naam" meer er zijn ook attributen die alleen maar bij specifieke elementen gebruikt mogen worden. Attributen mogen alleen in de start tag gebruikt worden en ook deze attributen mogen zowel kleine als grote letters bevatten, maar ook hier is het gebruikelijk om alleen kleine letters te gebruiken.

<div class="voorbeeld">...</div>

HTML5 document

De volgende tags zijn toegevoegd om het HTML document beter te structureren:

  • <section> Deze tag geeft een sectie aan binnen een document en kan samen gebruikt worden met de h1 .. h6 tag om het document te structureren.
  • <article> Door middel van deze tag kunt u het begin en het einde van een artikel binnen uw document aangeven.
  • <aside> Door middel van deze tag kunt u aangeven dat deze content zijlings te maken heeft met de content binnen het document.
  • <header> Deze tag omsluit de header van een sectie.
  • <footer> Deze tag geeft de footer van een sectie aan en ka n ook informatie over de auteur , copyright e.d. bevatten.
  • <nav> Deze tag geeft een sectie binnen het document aan dat bedoeld is voor navigatie.
  • <dialog> Door middel van deze tag kunt u een sectie met een dialoog aangeven.
  • <figure> Deze tag kan een sectie aangeven binnen uw document waar een afbeelding of video staat.

Een voorbeeld van het gebruik van deze tags is:

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>...</title>
 </head>
 <body>
 <header>...</header>
 <nav>...</nav>
<article> <section> ... </section> </article>
<aside>...</aside>
<footer>...</footer>
</body>

Standaard attributen

De volgende attributen kunnen toegepast worden op bijna alle HTML5 tags:

AttributenOptionsFunction
accesskeyUser DefinedSpecifies a keyboard shortcut to access an element.
alignright, left, centerHorizontally aligns tags
backgroundURLPlaces an background image behind an element
bgcolornumeric, hexidecimal, RGB valuesPlaces a background color behind an element
classUser DefinedClassifies an element for use with Cascading Style Sheets.
contenteditabletrue, falseSpecifies if the user can edit the element's content or not.
contextmenuMenu idSpecifies the context menu for an element.
data-XXXXUser DefinedCustom attributes. Authors of a HTML document can define their own attributes. Must start with "data-".
draggabletrue,false, autoSpecifies whether or not a user is allowed to drag an element.
heightNumeric ValueSpecifies the height of tables, images, or table cells.
hiddenhiddenSpecifies whether element should be visible or not.
idUser DefinedNames an element for use with Cascading Style Sheets.
itemList of elementsUsed to group elements.
itempropList of itemsUsed to group items.
spellchecktrue, falseSpecifies if the element must have it's spelling or grammar checked.
styleCSS Style sheetSpecifies an inline style for an element.
subjectUser define idSpecifies the element's corresponding item.
tabindexTab numberSpecifies the tab order of an element.
titleUser Defined"Pop-up" title for your elements.
valigntop, middle, bottomVertically aligns tags within an HTML element.
widthNumeric ValueSpecifies the width of tables, images, or table cells.

Zelfgedefinieerde attributen

Een nieuwe toevoeging aan HTML5 is de mogelijkheid om zelf attributen te bedenken, de enige voorwaarde is dat ze met data moeten beginnen. Door middel van deze attributen kunt u dus bijvoorbeeld extra data doorgeven aan de JavaScript routines die iets met deze tags willen doen.

<div class="voorbeeld" data-subject="geografie"> ... </div>

HTML5 events

HTML5 heeft ook een uitbreiding van het aantal events, door middel van deze events kunt u bijvoorbeeld routines in JavaScript aanroepen die bijvoorbeeld handelingen van de gebruiker kunnen verwerken. Een complete lijst van events en wat deze events veroorzaakt kun u elders op Internet vinden.

HTML5 Web Forms 2.0

Web Forms 2.0 is een uitbreiding op de formulier mogelijkheden van HTML4. Het grote voordeel hiervan is dat er meer validatie gedaan kan worden door de browser zonder dat daar extra JavaScript code voor nodig is. Hier is een overzicht van de nieuwe input types:

TypeDescription
datetimeA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601 with the time zone set to UTC.
datetime-localA date and time (year, month, day, hour, minute, second, fractions of a second) encoded according to ISO 8601, with no time zone information.
dateA date (year, month, day) encoded according to ISO 8601.
monthA date consisting of a year and a month encoded according to ISO 8601.
weekA date consisting of a year and a week number encoded according to ISO 8601.
timeA time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
numberThis accepts only numerical value. The step attribute specifies the precision, defaulting to 1.
rangeThe range type is used for input fields that should contain a value from a range of numbers.
emailThis accepts only email value. This type is used for input fields that should contain an e-mail address. If you try to submit a simple text, it forces to enter only email address in email@example.com format.
urlThis accepts only URL value. This type is used for input fields that should contain a URL address. If you try to submit a simple text, it forces to enter only URL address either in http://www.example.com format or in http://example.com format.

HTML5 en SVG

SVG staat voor Scalable Vector Graphics en het is een gestandaardiseerde taal voor het beschrijven van 2D afbeeldingen die gerenderd kunnen worden door een SVG viewer. SVG is ideaal voor bijvoorbeeld diagrammen. Bijna alle moderne browsers kunnen SVG weergeven net als PNG, GIF, en JPG. Alleen moeten sommige Internet Explorer gebruikers eerste de Adobe SVG Viewer installeren. Hier is een voorbeeld van een HTML5 SVG cirkel.

<h1>HTML5 SVG Cirkel</h1>
<svg id="svgelem" height="120" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

Wanneer uw browser SVG kan weergeven ziet u hier nu een cirkel.

U kunt ook vierkanten, rechthoeken, lijnen, ellipsen weergeven.

<h1>HTML5 SVG rechthoek</h1>
<svg id="svgelem" height="120" xmlns="http://www.w3.org/2000/svg"> <rect id="redrect" width="300" height="100" fill="red" /> </svg>

HTML5 en webSockets

Web Sockets is nieuw bidirectionele communicatie technologie voor web applicaties waarbij men via JavaScrip direct kan communiceren met een server. Een webapplicatie kan dus data in de achtergrond verzenden en ontvangen waarbij bijvoorbeeld niet de gehele pagina opnieuw geladen hoeft te worden. Een voorbeeld hiervan zou een kleine online chat applicatie kunnen zijn. Op het moment dat u een Web Socket verbinding heeft met een web server kunt u data verzenden vanuit uw webapplicatie door middel van send() en data ontvangen door middel van een onmessage event handler.

var Socket = new WebSocket(url, [protocol] );

Het eerste argument is een url waarmee verbinding gemaakt moet worden, en door middel van het tweede optionele argument kunt u een protocol aangeven dat de server wel moet ondersteunen.

HTML5 en canvas

Een van de leukste features van HTML5 is het <canvas> element die u een krachtig grafisch canvas geeft waar u door middel van JavaScript grafische bewerkingen kunt uitvoeren. Het canvas element heeft maar een twee eigen attributen en kan verder gebruik maken van alle andere standaard attributen. Hier is een voorbeeld van een canvas met de naam mycanvas van 100 pixels breed en 100 pixels hoog:

<canvas id="mycanvas" width="100" height="100"></canvas>

Het canvas is dan eenvoudig te vinden in uw JavaScript door middel van:

var canvas = document.getElementById("mycanvas");
Het <canvas> blok is in eerste instantie blanco en om iets te kunnen weergeven moet eerst de rendering context opgehaald worden waarna er op het canvas getekend kan worden:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

Zelfgemaakte HTML5 apps

Zelf gebruik ik tegenwoordig HTML5 / JavaScript / CSS3 als programmeer platform om web applicaties te ontwikkelen en apps voor het Android platform. Ik zou ook voor andere platformen kunnen ontwikkelen omdat apps die gemaakt zijn door middel van HTML5 / Javascript en CSS3 zonder verdere aanpassing te compileren zijn voor bijna elk platform zoals Windows 8, IOS en zelf Chrome os. Het is zelfs mogelijk om vanuit deze apps rechtstreeks Facebook apps te genereren. Wat geen enkel programmeer platform tot nu to voor elkaar gekregen heeft gaat waarschijnlijk lukken met de nieuwe HTML5 standaard. Ik ontikkel zelf door middel van de tool construct 2, die als uitvoer pure HTML5 / Javascript / CSS3 applicaties kan genereren. Als build omgeving voor apps gebruik ik de XDK van Intel, die gratis te downloaden is en ook gratis in gebruik is. Deze kan HTML5 code builden voor bijna elk platform, via een eenvoudige en goede grafische IDE. Ook is het mogelijk om via de ingebouwde ontwikkel IDE en wizzards, zelf snel HTML5 apps te onteikkelen en rechtstreeks te te testen op meerdere ge-emuleerde toestellen.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van de Intel XDK.
Het spellingspel.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van de Intel XDK.
Het spel rekenmemory.

Dit spel is gemaakt door middel van Construct 2 (HTML5 en Canvas) en de app versie is gemaakt door middel van cocoonjs.
Het spel rainbowcat.



Last update: 14-05-2015
 Binnen dit thema



 Meer thema's


 Lees hier de privacyverklaring van deze site.

Disclaimer.

Hoewel de heer Hein Pragt de informatie beschikbaar op deze pagina met grote zorg samenstelt, sluit de heer Pragt alle aansprakelijkheid uit met betrekking tot de informatie die, in welke vorm dan ook, via zijn site wordt aangeboden. Het opnemen van een afbeelding of verwijzing is uitsluitend bedoeld als een mogelijke bron van informatie voor de bezoeker en mag op generlei wijze als instemming, goedkeuring of afkeuring worden uitgelegd, noch kunnen daaraan rechten worden ontleend. Op de artikelen van de heer Pragt op deze Internetsite rust auteursrecht. Overname van informatie (tekst en afbeeldingen) is uitsluitend toegestaan na voorafgaande schriftelijke toestemming van de rechthebbende. Voor vragen over copyright en het gebruik van de informatie op deze site kunt u contact opnemen met: (email: mail@heinpragt.com). Dit is mijn