Le langage de balisage hypertexte (HTML) est une technologie de base pour le Web depuis le début des années 1990. Tim Berners-Lee a créé HTML en 1989 comme un moyen simple mais efficace d'encoder des documents électroniques. En fait, le but initial d'un navigateur Web était de servir de lecteur pour de tels documents. Deux décennies plus tard, le navigateur lui-même est devenu un portail vers un monde de médias en ligne. C'est pourquoi HTML5 n'est pas simplement une autre révision HTML, mais une norme complète sur le fonctionnement des pages Web .
Pour mieux comprendre ce qui rend HTML5 unique, revenons un peu en arrière. En 1994, HTML en était encore à sa première révision, Mosaic et Netscape dominaient le marché des navigateurs, et la plupart des gens n'avaient pas encore expérimenté cette nouvelle chose appelée le World Wide Web. Cette année-là, le créateur HTML Berners-Lee dirigeait un nouveau groupe de normalisation Web connu sous le nom de World Wide Web Consortium (W3C).
Bien que le W3C soit aujourd'hui une autorité de normalisation respectée, les acteurs commerciaux du marché des navigateurs des années 1990 ont largement ignoré ces normes et tracé leur propre chemin. En 1995, le W3C avait publié la deuxième révision de la norme HTML, et le nouveau venu sur le Web, Microsoft , gagnait du terrain avec son navigateur Internet Explorer (IE). Microsoft a largement ignoré les normes et Netscape a eu du mal à conserver une part de marché respectable alors qu'IE commençait à dominer [source : Harris].
Au cours de ces premières guerres de navigateurs, les développeurs Web ont été mis au défi de maintenir la compatibilité de leurs sites avec chaque nouvelle version des principaux navigateurs ainsi qu'avec les navigateurs moins utilisés Opera et Apple Safari. Même si le W3C avait publié HTML 3.2 en 1997, suivi de HTML 4 en 1998, suivre les normes semblait moins important que de suivre les fonctionnalités spécifiques au navigateur. Cela a duré jusqu'en 2003, lorsque la fondation communautaire Mozilla a rompu la tendance. Après sa version originale du navigateur Mozilla, suivie de son navigateur Firefox en 2004, Mozilla a rapidement piraté la domination d'IE. De plus, ces nouveaux navigateurs suivaient en fait les normes W3C existantes.
Alors que Firefox de Mozilla continuait de croître en utilisant la norme HTML 4 vieillissante, Mozilla a rejoint Apple et Opera en 2004 pour former un groupe appelé le groupe de travail sur la technologie des applications hypertextes Web (WHATWG). L'objectif de WHATWG est de maintenir le développement HTML en vie. Bien qu'il ait hésité à l'origine, le W3C a rejoint le renouveau HTML en 2006. Ensemble, WHATWG et W3C ont combiné les spécifications existantes pour HTML et XHTML et les ont développées pour créer la nouvelle spécification HTML5. Cette spécification est actuellement maintenue et publiée par le W3C [source : W3C , WHATWG ].
Cet article explore cette nouvelle technologie HTML5. Nous examinerons XHTML et d'autres technologies qui sont entrées dans HTML5 et couvrirons les points de base sur la façon d'utiliser HTML5 pour créer un contenu Web attrayant et conforme aux normes. Nous découvrirons également des façons passionnantes d'utiliser HTML5 sur le Web. Commençons par examiner les objectifs de HTML5 et pourquoi c'est bien plus que du HTML.
- HTML5 va au-delà du HTML
- Technologies de base HTML5
- Contenu HTML de base
- Formes
- Éléments sémantiques
- Les éléments multimédias et la rivalité Flash
- La toile
- Créer le look avec CSS3
- JavaScript comme composant central
- Technologies d'applications Web
- Preuves de concept révolutionnaires
HTML5 va au-delà du HTML
En soi, HTML se concentre sur la présentation de documents statiques, c'est-à-dire du texte, des liens et rien d'autre. Grâce à HTML 4, la norme HTML ne faisait qu'un avec la syntaxe HTML utilisée pour atteindre cet objectif. La norme HTML5 a un objectif beaucoup plus large pour décrire le contenu, le style et les interfaces d'application derrière une page Web lorsqu'elle est chargée dans votre navigateur. Plus précisément, HTML5 établit une syntaxe unique pour interagir avec tous les éléments que la page Web a chargés dans la mémoire de votre ordinateur.
Il y a un point de confusion potentiel que nous devrions clarifier au sujet du terme "HTML5" avant de continuer. Il existe une nouvelle version du langage de balisage lui-même appelé HTML5. Cependant, ce langage n'est qu'une partie de la norme plus large qui partage le nom HTML5. Cet article couvre tous les composants de la norme HTML5, dont le langage HTML5 est une pièce maîtresse.
Avec cette distinction à l'esprit, comment le navigateur charge-t-il une page écrite selon la nouvelle norme HTML5 et non selon le langage HTML 4 de longue date ? Après tout, nous comptons généralement sur nos navigateurs pour charger des pages Web sans nous soucier du code HTML qui les sous-tend. La réponse est simple : tant que le navigateur lui-même peut prendre en charge HTML5, il peut gérer tout ce que vous lui lancez sans avoir à faire la distinction entre les révisions HTML.
Pour que cette magie opère, la norme HTML5 intègre de nouvelles versions de plusieurs technologies travaillant ensemble vers des objectifs communs. Ces objectifs comprennent les suivants :
- Garder le langage simple et intuitif
- S'assurer que le code est facile à lire et à maintenir
- Adressage des pages comme des applications interactives plutôt que comme des documents statiques
- S'appuyer sur des feuilles de style en cascade (CSS) pour styliser le contenu
- Reconnaître JavaScript en tant que composant de script central pour les pages Web
- Adopter du contenu dynamique à partir de technologies côté serveur telles que PHP et ASP
Maintenant que vous savez que le HTML5 est plus que le balisage HTML lui-même, examinons les technologies de base de la norme.
Technologies de base HTML5
Un langage de balisage utilise une série de balises pour marquer les éléments d'un fichier. Le balisage repose sur une sorte de modèle qui définit ce que sont ces éléments et comment les utiliser. Étant donné que HTML a toujours consisté à encoder des documents, il s'appuie sur ce qu'on appelle un modèle d'objet de document (DOM). Le DOM est incorporé dans l'application de navigateur Web elle-même. Ainsi, le langage de balisage n'est qu'un moyen de donner au navigateur des instructions basées sur un modèle qu'il comprend déjà.
Pour mieux comprendre la relation entre un DOM et HTML, considérez le DOM comme une boîte de tampons en caoutchouc. Chaque tampon est un élément différent dans le DOM. Chaque page écrite en HTML n'est qu'une série d'empreintes réalisées à partir des tampons, qui sont remplies avec votre propre contenu personnalisé. Le navigateur Web peut afficher tout ce qui a été créé à partir des tampons de cette zone.
Techniquement parlant, le DOM est une interface de programmation d'application (API) fournissant un moyen indépendant de la plate-forme de traiter des documents HTML ou XML. (Extensible Markup Language, ou XML, ressemble à HTML, mais il permet au programmeur d'ajouter un ensemble personnalisé d'éléments que vous pouvez utiliser dans un document.) La norme HTML5 nécessite le DOM connu sous le nom de DOM5 HTML. Préparées pour la croissance du HTML5, les dernières versions des navigateurs Chrome , Firefox , IE, Safari et Opera peuvent toutes traiter des pages sous le DOM5 HTML.
Une autre base importante pour HTML5 est ses types MIME (Multipurpose Internet Mail Extensions) associés . MIME est une norme IETF (Internet Engineering Task Force) pour alerter les logiciels compatibles Internet du type de contenu qu'ils essaient de traiter. Cela correspond généralement à un type de fichier spécifique, tel qu'un document HTML ou un fichier audio MP3.
Les développeurs Web spécifient les types MIME lorsqu'ils encodent une page Web. Cela invite le navigateur à charger les fichiers correspondants de manière appropriée en fonction de leurs types. Deux types MIME rejoignent le HTML DOM5 pour former la base du nouveau standard HTML5 : le type HTML MIME (text/html) et le type XML MIME (application/xhtml+xml). HTML5 inclut des mises à jour dans la syntaxe de ces deux types MIME.
En bref, les technologies fondamentales du standard HTML5 sont le HTML DOM5 et les types MIME compatibles HTML5 pour HTML et XML. Passons maintenant à la création d'une page Web à l'aide de HTML5.
Contenu HTML de base
Au minimum, HTML5 inclut la version 5 de la syntaxe HTML de base. L'exemple de code dans la barre latérale de cette page montre à quoi pourrait ressembler ce code HTML pour une page Web de base. Lorsque vous naviguez sur le Web, utilisez l'option "Afficher la source" ou une option similaire de votre navigateur pour voir le code HTML (et autre code) chargé pour créer la page que vous consultez actuellement. Tout le code présenté dans notre exemple est également rétrocompatible avec HTML 4, ce qui signifie qu'il ne contient aucun des nouveaux ajouts disponibles dans HTML5.
Bien qu'il ne soit pas présent dans toutes les pages Web, il est recommandé de commencer votre fichier HTML avec une déclaration de type de document (doctype), comme indiqué dans l'exemple. Cela confirme que le navigateur doit s'attendre à du HTML standard lors de l'interprétation du document. Certains développeurs s'appuient sur des extensions de la norme HTML, qui utilisent des fichiers de définition de type de document (DTD). Si tel est le cas, le développeur spécifie l'emplacement de la DTD dans le cadre de ce doctype.
Outre le doctype, le code restant dans l'exemple est la syntaxe HTML standard. Si vous n'êtes pas familier avec cette syntaxe, consultez notre article Comment fonctionnent les pages Web .
Alors, quoi de neuf dans ces éléments de base en HTML5 ? Voici la liste, et nous examinerons de plus près chacun dans les pages qui suivent.
- Éléments de formulaire nouveaux et mis à jour - présentation de la structure du formulaire et traitement des entrées de formulaire de l'utilisateur
- Éléments sémantiques -- identification du contenu en fonction de son rôle dans une page Web
- Éléments multimédias - intégration de l'audio, de la vidéo et d'autres médias interactifs sans avoir besoin d'extensions de navigateur tierces
- Éléments Ruby -- prise en charge de l'internationalisation des pages Web en langue asiatique
Formes
Bien que les formulaires (sections d'un site Web où les utilisateurs peuvent saisir des données spécifiques, telles que des noms, des adresses, etc.) faisaient partie des premiers éléments disponibles en HTML, ils manquaient de nombreuses fonctionnalités utiles avant HTML5. Pour compenser cela, des développeurs tiers ont créé un logiciel de formulaire Web qui rend les formulaires HTML de base presque obsolètes. Cependant, HTML5 a insufflé une nouvelle vie aux formulaires, avec de nouveaux éléments de formulaire, des types de saisie et des attributs pour les éléments existants.
Sans faire la distinction entre l'ancienne et la nouvelle syntaxe, examinons l'approche globale de la création d'un formulaire pour votre page Web à l'aide de HTML5. Voici quelques étapes recommandées pour commencer :
- Créer un bloc formulaire à l'aide de la
- Désignez un bloc de champs dans le formulaire à l'aide de la
- Disposez chaque champ de l'ensemble de champs à l'aide de
- Dans chaque balise d'étiquette, ajoutez le nom du champ tel que vous voulez qu'il s'affiche, plus letag pour le champ lui-même.
- Utilisez l'attribut type dans la balise d'entrée () qui invite le navigateur à valider l'entrée de l'utilisateur en fonction de ce type. Cela élimine le besoin de code supplémentaire pour gérer la validation et l'invite de ressaisie. HTML5 inclut les types d'entrée suivants : date, heure, date-heure, date-heure locale, mois, semaine, numéro, e-mail, tél, URL, plage, couleur et recherche. Vous pouvez également utiliser l'attribut pattern avec une expression régulière pour créer un modèle de validation personnalisé.
- Indiquez les champs obligatoires en ajoutant l'attribut required pour un élément d'entrée.
- Utilisez l'attribut autofocus pour définir un élément d'entrée particulier comme premier élément du formulaire. C'est là qu'un navigateur Web placera automatiquement le curseur de l'utilisateur après avoir chargé le formulaire.
- Utilisez l'attribut d'espace réservé si vous le souhaitez pour ajouter des conseils textuels sur ce qu'il faut saisir dans un champ donné.
- Définissez des styles CSS pour ":required" et ":invalid" afin que l'utilisateur ait un repère visuel sur les informations ou les entrées manquantes qui ne seront pas validées pour un type d'entrée donné.
Consultez un guide de référence HTML5 à jour pour obtenir une liste complète des éléments de formulaire et de leurs attributs. Notez également que la prise en charge de certains champs de formulaire varie d'un navigateur Web à l'autre. Assurez-vous de tester votre formulaire dans chaque type de navigateur que votre site Web doit prendre en charge.
Alors que les éléments de formulaire HTML ont plus de fonctionnalités dans la version 5, le type d'élément suivant est complètement nouveau dans HTML5.
Éléments sémantiques
Les éléments sémantiques en HTML5 sont, comme leur nom l'indique, ceux qui font référence à la signification de certains contenus. L'utilisation de balises seules ne suffit pas, car la plupart des sites Web contiennent aujourd'hui plusieurs types de contenu différents sur une seule page. Les développeurs Web doivent appliquer des règles distinctes pour l'apparence ou le comportement de chaque type de contenu.
Sans éléments sémantiques, les développeurs Web ont utilisé
Au fil du temps, certains types de contenu sont devenus très courants sur les sites Web, tels que les en-têtes, les pieds de page, les menus et les points de navigation. HTML5 les intègre en ajoutant des éléments sémantiques standard. Cela signifie que vous pouvez décomposer votre bloc en éléments sémantiques utiles plutôt qu'en une série de
Voici la liste des éléments de page sémantique avec une brève définition de chacun. Assurez-vous de trouver une référence HTML5 fiable pour obtenir une liste complète des attributs valides et des éléments enfants pour chaque élément sémantique.
Éléments de bloc :
- section - une division de page générique utilisée pour aider à diviser un plus grand bloc de contenu
- article -- contenu provenant à l'origine d'une source extérieure, parfois ajouté dynamiquement au chargement de la page à l'aide d'un script d'agrégation
- en-tête et pied de page - blocs qui apparaissent en haut et en bas de chaque page
- hgroup -- un regroupement de plusieurs en-têtes liés, comme un titre et un sous-titre
- menu -- une liste de commandes (voir l'élément de commande) et des attributs qui spécifient le comportement du menu
- nav -- identifie un bloc strictement réservé à la navigation sur le site Web, généralement une liste non ordonnée de liens vers d'autres pages du site
- adresse -- comprend les coordonnées de l'auteur du contenu d'un bloc, tel qu'un article, une section ou le corps d'une page entière
- de côté -- indique que le contenu doit être traité comme une barre latérale
Éléments en ligne :
- résumé et détails - basculer entre un teaser/résumé et des détails complets pour le même contenu
- figure et figcaption - éléments utilisés pour appliquer un comportement commun aux images, quels que soient les éléments multimédias (img, svg ou canvas) utilisés pour les inclure
- heure -- texte représentant une date calendaire, une heure d'horloge ou les deux, formaté de manière à ce que le navigateur puisse s'adapter aux différences de fuseau horaire si nécessaire
- commande -- une étiquette et un comportement associé à cette étiquette lorsque vous utilisez le clavier ou la souris pour interagir avec elle, généralement utilisée à l'intérieur d'un bloc de menu
- dfn -- un terme qui est défini dans le contenu
- wbr - une balise indiquant un endroit acceptable pour casser du texte dans un mot lorsqu'il s'étend sur plusieurs lignes
Les éléments sémantiques ont été créés comme une amélioration par rapport aux éléments HTML plus génériques. Le prochain nouveau type d'élément, cependant, vise à remplacer complètement les extensions multimédias tierces dans les navigateurs Web.
Espace ou pas d'espace ?
Vous avez peut-être remarqué que lorsque nous nous référons à d'autres versions de HTML, comme HTML 4, il y a un espace avant le numéro, alors qu'il n'y a pas d'espace dans les références à HTML5. Il y a eu beaucoup de discussions et de débats sur ce problème au sein de la communauté HTML, mais finalement, le WHATWG et le W3C ont adopté HTML5 comme orthographe officielle pour maintenir la cohérence de la documentation.
Les éléments multimédias et la rivalité Flash
L'une des fonctionnalités les plus discutées de HTML5 est sa nouvelle approche d'intégration de contenu multimédia sur une page Web . Nous examinerons quelques applications étonnantes de cette fonctionnalité HTML5 plus loin dans cet article. HTML5 accomplit cette intégration sans nécessiter de plug-in de navigateur externe. Voici les éléments multimédias disponibles en HTML5 :
- audio -- intègre l'audio dans la page et inclut des attributs pour spécifier comment le lire ; les formats de fichiers pris en charge varient selon les navigateurs Web
- vidéo -- intègre la vidéo dans la page et inclut des attributs pour spécifier comment la lire ; les formats de fichiers pris en charge varient selon les navigateurs Web
- source -- utilisé avec des éléments audio ou vidéo pour identifier une source ; plusieurs sources peuvent être spécifiées pour un seul élément
- embed - intègre et spécifie le type de média pour le contenu qui pourrait ne pas être pris en charge dans d'autres éléments multimédias
- toile -- met de côté une partie de la page, ou l'écran de l'ordinateur, où JavaScript peut dessiner des images ; à venir, nous en saurons plus sur le fonctionnement de cette importante nouvelle fonctionnalité
- svg - intègre des graphiques vectoriels encodés avec le langage de balisage SVG, ce qui leur permet d'être mis à l'échelle dynamiquement en fonction de la zone de la page dans laquelle ils sont chargés sans perte de qualité graphique
Au fur et à mesure du développement de HTML5, les experts du marché se sont demandé s'il remplacerait Flash, qui est actuellement contrôlé par Adobe. Flash est un lecteur multimédia que vous pouvez ajouter en tant que plug-in à votre navigateur Web. Étant donné que Flash possède toutes les fonctionnalités nécessaires pour qu'un site intègre différents types de médias, des sites comme YouTube en dépendent depuis des années. Certaines applications Web reposent même entièrement sur Flash pour alimenter leurs interfaces interactives. L'adoption de Flash était si répandue en 2007 que, lors de la sortie du très attendu iPhone d'Apple, de nombreux consommateurs ont été contrariés d'apprendre que son système d'exploitation , Apple iOS, ne prenait pas en charge Flash.
Lorsque Google , sans doute la plus grande marque sur Internet, s'est lancée tête première dans le développement de ses applications avec HTML5, les partisans de Flash l'ont remarqué. Avant HTML5, la seule menace à la domination de Flash était les développeurs d'applications Web désireux de créer et de maintenir des alternatives HTML/JavaScript personnalisées. Avec HTML5, de telles personnalisations fastidieuses ne sont plus nécessaires lors de la création d'une expérience multimédia interactive pour rivaliser avec la technologie Flash.
Alors, qui va gagner : Flash ou HTML5 ? La réponse courte est "Aucun". Chaque technologie a ses propres caractéristiques, avantages et inconvénients. De plus, Adobe et Google ont travaillé sur des outils de conversion Flash vers HTML5. Au moment d'écrire ces lignes, il semble que bien que HTML5 gagne en statut, Flash devrait également conserver sa propre popularité pendant un certain temps.
Passez à la page suivante où nous décomposerons l'élément canvas et comment l'utiliser dans vos pages Web HTML5.
La toile
L'une des nouvelles fonctionnalités les plus importantes de HTML5 est le canevas. La fonctionnalité de canevas vous permet d'identifier une section d'une page Web , d'y dessiner du contenu et d'ajouter des fonctionnalités interactives. Tout cela est possible grâce à une combinaison de code HTML et JavaScript . Examinons les trois parties dont vous aurez besoin pour configurer un canevas en HTML5 :
Partie 1 : Utilisez le
largeur="400"
hauteur="300>
Si vous voyez ce texte, votre navigateur
ne prend pas en charge le canevas HTML5.
Partie 2 : Créer le JavaScript qui attire le contenu dans le canevas. Plus tard, nous verrons comment ajouter et gérer le code JavaScript associé à une page Web HTML5. Ici, regardons quelques exemples de JavaScript que vous pouvez utiliser pour les objets canvas. Le code suivant dessine un rectangle dans le canevas ci-dessus :
fonction dessinerRectangle() {
var targetCanvas = document.getElementById("sampleCanvas");
var rectContext = sampleCanvas.getContext("2d");
rectContext.fillStyle = "bleu" ;
rectContext.fillRect(50, 25, 150, 100);
}
Cette fonction dessine un rectangle bleu uni dans votre canevas. Les deux lignes "var" créent des variables que vous pouvez utiliser. Le premier (targetCanvas) identifie l'élément canvas que vous ciblez à l'aide de son ID à partir du code HTML. Le second (rectContext) définit un contexte bidimensionnel pour le dessin. Considérez le contexte comme une couche de verre transparente posée sur le canevas, et vous appellerez des fonctions pour dessiner sur ce verre.
La ligne "fillStyle" identifie la couleur bleue par son nom, que HTML reconnaît et associe à l'une de ses couleurs nommées. Vous pouvez également utiliser n'importe quelle couleur, motif ou dégradé comme vous le feriez lors de l'écriture de code de style en HTML ou CSS. La ligne "fillRect" dessine le rectangle en partant d'un décalage par rapport au coin supérieur gauche, les deux premiers nombres étant les décalages x et y comme si le coin supérieur gauche du canevas était aux coordonnées (0,0). Les deux chiffres suivants indiquent respectivement la largeur et la hauteur du rectangle.
Partie 3 : appelez la fonction JavaScript à partir du code HTML. Cela lie les deux pièces ensemble. Vous pouvez appeler la fonction dès que la page Web se charge, ce qui est logique si vous utilisez canvas pour dessiner le contenu d'une page interactive qui doit apparaître dès que la page se charge. Une autre option consiste à créer un bouton, un menu ou un autre élément dans le HTML qui déclenche l'événement de dessin. Voici un exemple de bouton que vous pouvez utiliser pour exécuter l'exemple de script ci-dessus :
Plongez dans HTML5 propose un guide facile à suivre pour créer des éléments de canevas pour vos pages Web. De plus, une référence HTML5 fiable devrait fournir des ressources étendues pour dessiner des graphiques sophistiqués, fixes et animés. Si vous souhaitez faire un usage intensif du canevas en HTML5, vous devrez être à l'aise avec la programmation en JavaScript. Ensuite, explorons comment CSS3 crée l'apparence d'une page Web HTML5.
Créer le look avec CSS3
Chaque élément HTML a un certain nombre d'attributs que vous utilisez dans le code pour modifier l'apparence ou la fonction de cet élément. Le style et les attributs associés ajustent la taille, la couleur, le placement, les bordures et d'autres aspects physiques de l'élément. Au fil des années de la vie du Web, les développeurs de sites ont largement adopté la pratique consistant à séparer le style du contenu. En faisant cette séparation, les développeurs bénéficient des avantages suivants :
- Moins de code à maintenir : plusieurs éléments sur plusieurs pages Web peuvent partager les mêmes styles sans répéter le code de style pour chacun.
- Maintenance plus facile au fil du temps : la mise à jour vers un nouveau style ou la correction d'un style existant signifie la modification d'un seul élément de code de style plutôt que la mise à jour de chaque élément à l'aide de ce code.
Par conséquent, bien que le style puisse être aligné sur le code HTML, le choix le plus populaire pour les développeurs Web consiste à utiliser des feuilles de style en cascade (CSS) pour gérer tout le code de style associé à un site Web. Le code HTML de chaque page peut référencer une ou plusieurs feuilles de style, que votre navigateur doit charger lors du chargement de la page. Ces feuilles de style, sous forme de fichiers CSS, sont destinées à imiter ce que vous pourriez entrer en utilisant
