HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> L'attribut lang (sur <html>) Initializr
HTML5 : Éléments <figure> et <figcaption> L'élément <figure> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas. Illustration légendée Inaugurés avec HTML5, les éléments <figure> et <figcaption> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>Légende associée</figcaption></figure> Élément <figure> <figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Élément <figcaption> Enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Quelques applications dans le monde du livre Compatibilité navigateur des éléments <figure> et <figcaption> Applications sur le web Démonstration Une vidéo
Les 5 mythes et vérités de HTML5 Les mythes Avec HTML5, mon site sera plus beau HTML5 dispose certainement d'un beau logo orange rayonnant inauguré par le W3C pour en faire la promotion, cependant il fonctionne toujours en osmose avec CSS pour régir l'apparence, la présentation, la disposition du contenu. Cela signifie donc que rien ne change par rapport aux précédentes versions de HTML : il vous faudra toujours jongler avec habileté entre CSS, les images issues de la maquette graphique, éventuellement des effets en JavaScript, du SVG, voire Canvas, pour construire le côté visuel d'un document ou d'une page web. Avec HTML5, mon site sera plus dynamique et réactif Là aussi, les mêmes arguments de conception entrent en jeu : sans JavaScript et l'API DOM, l'interactivité reste coite. HTML5 apporte donc des fonctionnalités, mais pas de "rapidité" au sens strict du terme. Avec HTML5, je devrai tout réapprendre depuis zéro Avec HTML5, je suis dans le Cloud Et si vous changez le doctype par <! Les vérités HTML5 est vaste
HTML5 : L'élément <datalist> Avec l'annonce d'HTML5, de grandes nouveautés accompagnent les formulaires. Ils peuvent enfin s'enrichir afin de s'adapter au plus près des nouveaux besoins. Ainsi l'élément <datalist> fait son entrée. Des suggestions de choix Inauguré avec la vague HTML5, <datalist> est un élément de formulaire permettant de lier une liste de choix à un élément input. Par défaut, <datalist> demeure invisible. Compatibilité navigateur de l'élément <datalist> Un navigateur ne supportant pas l'élément n'affichera aucune suggestion. Utilisation classique Dans la majorité des situations, il sera utile d'associer un champ d'entrée texte <input type="text"> à une liste de suggestions. <label for="choix_bieres">Indiquez votre bière préférée :</label><input list="bieres" type="text" id="choix_bieres"><datalist id="bieres"><option value="Meteor"><option value="Pils"><option value="Kronenbourg"><option value="Grimbergen"></datalist> Démonstration Aperçu sous Internet Explorer 10 Utilisation multiple Démonstration
HTML5 : Nouveaux éléments de section, article, header, footer, aside, nav Les éléments de section HTML5, une nouvelle façon de penser Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document ou de l'application web, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu'à regrouper d'autres éléments HTML pour leur affecter un style CSS commun, voire pour interagir avec eux via le DOM... Il ne s'agit donc pas de nouveaux éléments avec des noms génériques : c'est bien plus que ça ! HTML5 inclut la majorité des éléments HTML4 pour assurer une rétro-compatibilité avec les navigateurs. Par exemple, une majorité des sites contiennent des informations supplémentaires relatives ou non au contenu principal (que l'on nomme sidebar ou barre latérale). Liste récapitulative des éléments de section HTML5 Un cas particulier : Internet Explorer <9 Exemples de documents Exemple minimal L'en-tête <header> Le <footer> Remarque
L'élément <mark> pour attirer l'attention Sortez votre feutre jaune Nouveau venu en HTML5, l'élément <mark> est un surligneur de texte. Il marque un , que l'on souhaite mettre en valeur d'une façon particulière, pour attirer l'attention. Son style par défaut est celui d'un texte surligné en jaune (dans les navigateurs qui le reconnaissent). Pour les anciens navigateurs qui ne comprendraient pas ce style par défaut, il suffit de l'ajouter à votre feuille CSS, voire de le personnaliser en choisissant d'autres couleurs. Usages Que peut-on imaginer comme usages pratiques à cette balise ? Démonstration de l'élément mark Marquer les mots trouvés dans des résultats de recherche Par exemple sur la page de résultats, les passages surlignés seront ceux qui correspondent exactement aux termes recherchés. <p>5 résultats pour le mot "HTML"</p><ul><li>... Marquer une portion de texte Marquer une portion de code source Un passage spécifique peut être surligné pour s'y référer ultérieurement. Marquer le jour actif d'un calendrier Prise en charge
Formulaires HTML5 : placeholder, required, pattern et validation HTML5 introduit de nombreuses nouveautés pour les formulaires pour améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. Plusieurs attributs simples à mettre en place améliorent la prise en charge des formulaires, tout en se passant de JavaScript. placeholder est un attribut qui permet de renseigner un texte indicatif par défaut dans un champ de formulaire. Mise en place Ce comportement a très longtemps été mis en place grâce à JavaScript et des techniques dans ce genre : Avec l'arrivée de HTML5, la syntaxe se simplifie pour donner : La présence d'un placeholder ne vous dispense pas de renseigner un label pertinent. Démonstration Éléments compatibles L'attribut placeholder peut être placé sur les éléments : <input> : de type text, search, password, url, tel, email <textarea> Compatibilité de l'attribut placeholder Styler le placeholder Ce contenu éphémère peut être distingué du contenu entré par l'utilisateur grâce à une pseudo-classe (ou pseudo-élément) CSS.
Formulaires HTML5 : nouveaux types de champs HTML 4 était bien limité concernant les types de champs. HTML5 apporte énormément en terme de nouveautés. Ces innovations sont réunies sous un nom : les Web Forms (ou HTML5 Forms). Souvenez vous des éléments de saisie et de soumission de formulaire en HTML4 assez peu nombreux : <textarea> <select> (<option> et <optgroup>) <button> <input> (text, password, file, radio, checkbox, submit, image, hidden, reset,button) Grâce à l'apport de HTML5 et des Web Forms, de nouveaux éléments et types d'éléments arrivent dans nos formulaires. Les nouveaux types d'<input> Comme listés précédemment, les types de champs n'étaient pas nombreux. Au moment de mes tests, j'ai constaté que Chrome - qui prenait en charge certains types d'input de type datation dans ses versions précédentes - a revu ses compétences à la baisse dans la version 16. La plupart des nouveaux types non pris en charge par un navigateur sont traduits par un champ de type text. Les nouveaux éléments de formulaire
Géolocalisation en HTML5 Tutoriel issu de ma présentation à la KiwiParty 2011. La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité. Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques : Plans/cartes, calculs de position et d'itinéraires Renseignements locaux en mobilité (points d'intérêts proches) Résultats contextualisés sur les moteurs de recherche Méta-informations jointes aux photos/vidéos De quelles informations a-t-on besoin pour se géolocaliser ? Dans l'espace, trois coordonnées sont nécessaires : Une quatrième coordonnée peut être prise en compte pour les puristes : le temps. L'API donne aussi accès lorsqu'il y a déplacement à la vitesse et à la direction (en ° par rapport au nord géographique). De quels moyens dispose un navigateur pour se géolocaliser ? Disponibilité de l'API ? L'API repose sur l'objet geolocation membre de navigator. Confidentialité <!