Accueil    HTML    Présentation du html 5
 



Présentation du html 5  Présentation du html 5

Index des balises html


Présentation



Html5 est la nouvelle spécification relative au html, actuellement dans sa phase finale de validation. Elle va remplacer la version 4.01 datant de 1999 et introduire de nouvelles balises, de nouvelles API et de nouveaux attributs qui vont étendre les capacités du langage html au delà du simple objectif d'afficher des informations.

Les nouvelles balises apportent pour certaines une meilleure approche structurelle et syntaxique et pour d'autres de nouvelles fonctionnalité dans le domaine multimédia (contenu audio vidéo, dessin vectoriel ...).
Les API vont quant à elles proposer des interactions plus fortes et plus agréables pour l'utilisateur avec la gestion par exemple du drag and drop (éléments ou fichiers) la possibilité d'utiliser les websockets pour réaliser du "push" serveur transparent pour l'utilisateur ...

Html5 n'est pas une révision de la précédente version du html mais bien une réelle avancée remettant en question la gestion actuelle du contenu web.

Voici un exemple de document au format html5



Doctype et encodage



Comme pour la version html 4.1, la version html 5 nécessite un doctype qui permet d'indiquer au navigateur la méthode de rendu à appliquer pour afficher le document. Celui-ci ne fait plus référence à un DTD (Document Type Definition) et se déclare comme ceci :


<!DOCTYPE html>


La détection du type d'encodage du document html se fait en vérifiant les éléments suivant dans l'ordre indiqué :
   1 - recherche d'une balise meta de type http-equiv="Content-Type" dans le document
   2 - détection de la marque d'ordre des octets (BOM) en début de fichier indiquant l'encodage
   3 - recherche de la balise meta charset



Les éléments dépréciés



Les balises suivantes ont été dépréciées au bénéfice des styles CSS existant :
basefont et big : style font-size
center : style text-align
font : styles font, font-family, font-size et color
strike : text-decoration (valeur line-through)
tt : font-family (valeur Courier New)
u : text-decoration (valeur underline)

La balise applet est dépréciée en faveur de la balise object, la balise dir en faveur de la balise ul, et les tags acronym et isindex sont également dépréciées.

Finalement les balises frame, frameset et noframes déjà non recommandées sont finalement supprimées en raison des problèmes d'accessibilité et de sécurité qu'elles posaient pour l'utilisateur.



Les nouvelles balises html




<article> Détermine une section de la page propre à un contenu spécifique, comme un article
<aside> Utilisée pour définir des informations complémentaires au sein d'une balise affichant un contenu spécifique
<audio> Permet de faire référence à un média sonore et de le lire (musique, flux audio en streaming)
<bdi> Permet d'isoler du texte dont la direction est différente du reste du texte qui l'entoure
<canvas> Permet d'afficher des éléments graphiques générés en javascript
<command> Définit une commande à exécuter (fonctionnement équivalent à la balise button)
<datalist> Détermine une liste de données sélectionnables
<details> Précise les détails supplémentaires qui peuvent être masqués ou affichés sur demande
<embed> Définit un contenu embarqué, comme un plug-in
<figcaption> Légende pour la balise figure
<figure> définit un bloc d'informations pouvant contenir des images, des diagrammes, des photos, du code ..…
<footer> Définit le pied de page d'une section ou du document.
<header> Représente l'en tête d'une section ou du document.
<hgroup> Défini une section regroupant un ensemble de titres lorsque plusieurs niveaux de titres (de type <h1> ... <h6>) sont présents
<keygen> Permet de générer une clé sécurisée
<mark> Met en valeur un texte marqué en le surlignant
<menu> Définit un menu pouvant être constitué de commandes et d'autres menus enfants
<meter> Permet de situer une mesure entre un minimum et maximum déterminé, pour afficher une jauge
<nav> Définit une section dédiée à la navigation dans le site, comme un menu
<output> Représente le resultat d’un calcul
<progress> Définit une barre de progression permetant de donner l'état d'avancement d'une tâche
<ruby>, <rt> et <rp> Annotations ruby
<section> Définit une section regroupant des éléments d'un même thème dans la page
<source> Permet de définir des contenus alternatifs pour le fichier vidéo (en cas de non support du format)
<summary> Permet de définir un titre visible pour la balise details
<svg> Permet de réaliser des dessins vectoriels
<time> Définit de façon complète la sémantique d'une date ou d'une heure.
<track> Permet d'insérer un sous-titre (au format WebVTT) à une vidéo affichée avec la balise video.
<video> Permet d'insérer un contenu video en streaming
<wbr /> Permet de définir des indications en cas de retour à la ligne au sein d'un texte

D'autre part de nouveaux types sont introduits pour la balise input :
datetime, datetime-local, date, month, week, time, number, range, email, url, search, color




Introduction de nouvelles API



De nouvelles API voient le jour :
    - Gestion du drag and drop avec l'utilisation de l'attribut draggable
    - Réalisation de dessins avec la balise canvas
    - Utilisation des websockets rendant possible le fonctionnement de type push
    - Geolocalisation permettant de récupérer les coordonnées de l'utilisateur (latitude, longitude
      et altitude)
    - Meilleur contrôle sur l'historique du navigateur
    - Stockage local rendant possible la sauvegarde de données dans un fichier sur le poste client
    - Stockage session rendant possible la gestion de données session
    - Stockage des données vers une base de données intégrée au navigateur
    - Capacité d'édition en combinaison avec le nouvel attribut contenteditable
    - Fonctionnement en mode déconnecté par une gestion spécifique du cache
    - Création de taches de fond sous forme de threads