Introduction à HTML5

html5

 

Introduction

HTML5 est la nouvelle spécification pour le HTML, le langage de programmation standard pour décrire le contenu et l’apparence des pages Web. HTML5 a été adopté par le nouveau groupe de travail HTML du World Wide Web Consortium (W3C) en 2007. HTML5 introduit un certain nombre de nouveaux éléments et attributs qui reflètent l’utilisation typique sur les sites Web modernes. Plus encore, HTML5 spécifie l’application de script interfaces de programmation (API).
HTML5 incorpore également Web Forms 2.0 ainsi qu’une autre spécification WHATWG.

Avantages

  • S’exécute directement dans le navigateur sans plug-ins supplémentaires
  • Une base de code permet de lancer des jeux sur tous les appareils compatibles avec HTML5
  • Permettre de créer des jeux pour appareils mobiles et ordinateurs
  • Les Jeux fonctionnent sans avoir besoin de les installer sur l’appareil
  • Offrir la possibilité de créer des jeux multi-joueurs en utilisant, par exemple, la technologie des WebSockets pour la communication client

Inconvénients

  • Absence du support de WebGL ou partiellement sur les appareils mobiles
  • Spécification encore incomplète
  • Faible efficacité sur les appareils mobiles si l’optimisation n’est pas effectuée

Nouveautés

Sous HTML5, il y a quelques éléments passionnants :

  • Un élément pour vous donner un espace de dessin en JavaScript sur vos pages Web
  • Il vous permet d’ajouter des images ou des graphiques à bulles ou simplement de créer des graphiques dynamiques sur vos pages Web
  • L’ajout de la vidéo à vos pages Web.
  • L’ajout du son à vos pages Web.

Les notions de type « en ligne » et « bloc » semblent donc remplacées par un nouveau schéma, les éléments HTML sont à présent uniquement regroupés en catégories, sachant que les éléments peuvent apparaître dans plusieurs catégories :

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

Les Balises principales

  • Doctype

L’ancien doctype :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Le doctype est simplifié :

<!DOCTYPE html>

Documentation sur l’élément Doctype

  • <header>

Cet élément est utilisé pour définir une en-tête pour une partie d’une page Web, que ce soit une page entière, un élément <article>, ou d’un élément <section>.

Documentation sur l’élément Header

  • <footer>

Comme l’élément <header>, ce nouvel élément définit un pied de page pour une partie d’une page.

Documentation sur l’élément Footer

  • <nav>

Ceci est un conteneur pour les principaux liens de navigation sur une page Web. Cet élément n’est pas destiné à être utilisé avec tous les groupes de liens mais il doit être utilisé pour les grands blocs de navigation seulement. Si vous avez un élément <footer>  qui contient des liens de navigation, vous ne devez pas envelopper ces liens dans un élément <nav>, car l’élément <footer> suffira.

Documentation sur l’élément Nav

  • <Article>

L’élément <article> est utilisé afin de définir un élément indépendant sur la page, comme un élément de nouvelles, post de blog ou un commentaire. Ces articles sont généralement inclus en utilisant les flux RSS.

Documentation sur l’élément Article

  • <Section>

Cet élément représente une section d’un document ou application, comme un chapitre ou une section d’un article ou d’un tuteur. Par exemple, la section que vous lisez en ce moment pourrait être entourée par un élément <section> en HTML5.

Documentation sur l’élément Section

  • <a side>

Ce nouvel élément peut être utilisé pour marquer une barre latérale ou un autre contenu qui est considéré comme un peu séparé pour le contenu autour d’elle.

Un exemple de cela pourrait être des blocs publicitaires.

Documentation sur l’élément Aside

  • <hgroup>

Dans certains cas, une page, un article ou chapitre peuvent nécessiter plus d’un titre, par exemple lorsque vous avez un titre et un sous-titre.

Documentation sur l’élément Hgroup

  • <Figure>

L’élément <figure> peut être utilisé pour regrouper des éléments tels que des images ou des vidéos avec leur légende <figcaption>.

Documentation sur l’élément Figure

  • <audio> et <video>

Ces éléments sont utilisés pour les contenus multimédia.

Documentation sur l’élément Audio et Video

  • Canvas

L’élément <canvas> a été initialement développé par Apple pour une utilisation sous Mac OS X widgets Dashboard et Safari, mais ensuite ça été adopté par Mozilla® et Opera® sur leurs navigateurs Web. L’élément a été normalisé et inclus dans la spécification HTML5, avec une série d’API de dessin 2D qui peuvent être utilisés pour créer des formes, du texte, des transitions et des animations à l’intérieur de l’élément.

Beaucoup croient que l’élément <canvas> est l’un des aspects les plus importants de HTML5, car elle facilite la production de graphiques, jeux interactifs, les applications de peinture, et d’autres graphiques à la volée sans avoir besoin de plug-ins externes tels que Adobe Flash.

Documentation sur l’élément Canvas

  • Géolocalisation

L’API Géolocalisation introduite par le W3C permet aux pages web d’interroger le navigateur sur la position de l’utilisateur (latitude, longitude).

Documentation sur Géolocalisation

  • D’autres nouvelles balises

<embed>, <mark>, <meter>, <progress>, <time>, <command>, <details>, <datalist>, <keygen>, <bb>, <output>, <ruby>, <rt> et <rp> <datatemplate>, <rule>, <nest>, <summary> et <details>

Structure HTML5

shema

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *