Accueil » Développement » Apprendre HTML5

Sommaire
  1. Le HTML5 c'est quoi ?
  2. Le HTML5 pour quoi faire ?
  3. Le HTML5 : quoi de nouveau ?
  4. Les principales balises HTML5
  5. Les formulaires en HTML5
  6. Eléments progress / meter
  7. L'élément Canvas
  8. Extraits enrichis
  9. WebGL
  10. Three.js
  11. Pre3d
  12. Aller plus loin

Le HTML5 c'est quoi ?

HTML5 ("HyperText Markup Language 5" en anglais) est la suite logique du HTML4 (Le HTML est un format de données conçu pour représenter les pages web). Pour être plus précis mais concis, après la quatrième version de HTML, il y a eu l'apparition du XHTML(1.0), basé sur XML. Une seconde version verra le jour mais sera abandonnée au profit de HTML5.

Plus d'infos sur ce changement

Ce nouveau langage comprend également une couche application avec de nombreuses API ("Interface de programmation" ou "Application Programming Interface" en anglais), ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme.

Le HTML5 pour quoi faire ?

Simplifié par rapport au HTML4, ce nouveau langage est de plus en plus utilisé par les développeurs. Il sera prochainement la norme à adopter pour réaliser un site web.

Le HTML5 : quoi de nouveau ? (par rapport à HTML4)

Qui dit HTML5 dit nouvelles balises. En effet, on voit apparaître des balises telles que <header> pour désigner l'entête d'un site web ou <footer> pour le pied d'une page web, ceci afin de permettre une "standarisation" des sites sur le web.

Une nouvelle version (HTML5.1) a vu le jour et apporte également son lot de nouveautés (en attendant la deuxième version pour fin 2017).

Les principales balises HTML5 :

  1. <!DOCTYPE html> : permet de déclarer le document comme étant en HTML5.
  2. <header> : cette balise indique l'entête du document.
  3. <main> : cette balise indique la partie principale du document.
  4. <nav> : cette balise indique le menu du document.
  5. <section> : cette balise sert à définir les grandes parties du document.
  6. <article> : cette balise permet de délimiter les différentes sous-parties du document.
  7. <footer> : cette balise indique le pied de page (partie en bas) du document.

Liste complète des balises

Les formulaires en HTML5

Input placeholder

compatibilité navigateurs

Si le champ n'est pas complété, le navigateur affiche une infobulle vous invitant à remplir celui-ci.


<input placeholder="Votre nom" required>

Input url

compatibilité navigateurs

Si le champ n'est pas complété par une url, le navigateur affiche une infobulle vous invitant à remplir correctement l'input.


<input type="url" required>

Input tel

compatibilité navigateurs


<input type="tel" required>

L'exemple ci-dessous propose de vérifier grâce à l'attribut pattern (un contrôle côté serveur sera à mettre en place en corrélation) si un moins un chiffre est renseigné.


<input type="tel" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" required>

Input e-mail

compatibilité navigateurs


<input type="email" required>

Input search

compatibilité navigateurs


<input type="search" required>

Input date, time et datetime

compatibilité navigateurs

Entrez une date :

Exemple input date

Entrez une heure :

Pas de support navigateur pour datetime


<input type="date">
<input type="time">
<input type="datetime">

Input range

compatibilité navigateurs


<input type="range">

Exemple avancé range avec JS
Input color

compatibilité navigateurs

Exemple classique d'input color :

Exemple avec colorpicker Exemple avancé colorpicker

<input type="color">

Input number

compatibilité navigateurs


<input type="number">

Datalist

compatibilité navigateurs


<label for="jeux">Quel est votre jeu vidéo préféré ?</label>
<input list="liste_jeux" type="text" id="jeux">
<datalist class="solid" id="liste_jeux">
<option value="Zelda">
<option value="Call of Duty">
<option value="Fifa">
<option value="Street Fighter">
</datalist>

Il est possible de combiner l'élément datalist avec des champs de formulaire tels que range, number... Une page d'exemples (EN).

Eléments progress / meter

Elément progress

<progress max="100" value="50"></progress>

Elément meter

<meter min="0" max="100" value="50"></meter>

lire article sur progress/meter

L'élément Canvas

L'élément Canvas est une spécificité HTML5 qui permet, au travers de la balise du même nom : <canvas>, de créer une aire de dessin dont il faut préciser la hauteur et la largeur. A l'aide de JavaScript, il est alors possible de générer des formes (plus ou moins complexes) à l'intérieur de cette aire et de les animer.

Débuter avec Canvas

Quelques démonstrations avec l'élément Canvas :

kennethjorgensen.com

chiptune.com

mrdoob.com/clouds

B.D HTML5

canvasquery

Fabric.js : bibliothèque JavaScript HTML5 canvas

Extraits enrichis (microdonnées, microformats, RDFa)

Les extraits enrichis peuvent être intégrés partout dans un document web. Ils permettent un meilleure compréhension de vos contenus pour les moteurs de recherche.

Microdonnées

Microformats

RDFa

WebGL

WebGL permet l'affichage 3D sur les navigateurs web. Ainsi, le navigateur exécute le JavaScript qui fait appel à l'interface WebGL.

A son tour, WebGL appelle le pilote OpenGL de l'OS, qui se charge ensuite d'afficher les images sur l'écran. C'est la carte graphique qui s'occupe de gérer l'environnement en trois dimensions.

Plus d'infos sur WebGL

Projet en WebGL

Chrome WebGL Experiment : un espace d'expérimentation incontournable.

Three.js

Three.js est une bibliothèque JavaScript 3D. Celle-ci facilite l'accès aux routines de WebGL, et permet d'importer de nombreux types d'objets 3D. Cette bibliothèque peut également s'associer avec Canvas.

Quelques démonstrations avec Three.js :

Mer avec Three.js

Jeu avec Three.js

Ville avec Three.js

Formule 1

Télécharger Three.js

Pre3d

Pre3d est une bibliothèque de visualisation d'objets en trois dimensions

Télécharger Pre3D

Exemple avec Pre3D

Aller plus loin :

Pour tout connaître ou presque sur HTML5 :

Tout sur HTML5

L'endroit rêvé pour télécharger des templates gratuits en HTML5 :

html5up