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
Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. The design used as of 2014 was largely created by Lennart Schoors. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY 4.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Which features do you choose to add to this list?
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
HTML5 Please - Use the new and shiny responsibly 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 Cross Browser Polyfills · Modernizr/Modernizr Wiki The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas FlashCanvas by Shinya Muramatsu Reported to have 33x better performance than excanvasexcanvas by Google, Erik Arvidssonslcanvas project (Original Silverlight bridge)canvas-textOnly necessary for canvastext in IE, reallyfxCanvasKinetic.js by Eric Drowell Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions Sectioning Elements Video VTT: Video Timed Track (subtitles) Audio Audio Data API Ruby
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
4.5 Text-level semantics — HTML5 4.5 Text-level semantics 4.5.1 The a element Categories: Flow content. Phrasing content. Interactive content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model: Transparent, but there must be no interactive content descendant. Content attributes: Global attributes href - Address of the hyperlink target - Default browsing context for hyperlink navigation and form submission download - Whether to download the resource instead of navigating to it, and its file name if so rel - Relationship between the document containing the hyperlink and the destination resource hreflang - Language of the linked resource type - Hint for the type of the referenced resource Tag omission in text/html: Neither tag is omissible Allowed ARIA role attribute values: link (default - do not set), button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab or treeitem Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLAnchorElement
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