background preloader

HTML5 : Éléments <figure> et <figcaption>

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 Related:  Apprendre le HTML5

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Une deuxième solution, conseillée par Microsoft et Alsacréations (que du beau monde :)), est d’utiliser les commentaires conditionnels. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Cependant, dans la pratique, une feuille de style corrective pour Internet Explorer ne suffira pas. Une alternative ?

Les commentaires conditionnels pour Internet Explorer Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions. Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer. Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10. Syntaxe de base L'exemple le plus simple de commentaire conditionnel est le suivant: Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS. Exemple d'utilisation: Viser une version ou un éventail de versions

Afficher une icône favicon dans le navigateur Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d'adresses ou de titre, les favoris (le terme est d'ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis. (source : Wikipedia) Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. Une fois votre fichier favicon.ico en ligne, il ne vous restera plus qu'à l'appeler depuis votre page. Les navigateurs modernes acceptent d'autres types de fichiers d'image comme le PNG qui est un format libre et compressé, mieux adapté au web. Il n'existe pas de type MIME officiel pour les fichiers .ico mais le type image/x-icon est très répandu et conforme au standard de formation des types MIME.

Introduction à WAI ARIA (traduction) · Les intégristes Grégoire Dierendonck Cet article est destiné à des personnes ne connaissant pas ARIA. Vous devriez avoir une bonne connaissance du langage HTML et des problèmes que peuvent rencontrer les personnes handicapées sur le web. Connaître quelques application web « riches » (RIA) d’un point de vue utilisateur serait un plus. Après avoir lu cet article, vous comprendrez à quoi sert ARIA, comment l’intégrer à vos sites, et comment l’utiliser dès immédiatement et même sur le plus simple des sites pour le rendre plus accessible. Introduction Le langage HTML (HyperText Markup Language) n’a pas été conçu pour créer des applications web. Malheureusement, les techniques utilisées pour outrepasser ces limitations ne sont absolument pas accessibles. Les mises à jour sont souvent mal perçues par les personnes utilisant une technologie d’assistance. Petit historique du langage HTML Applications web Reproduction d’applications bureau Requêtes serveur en arrière plan Reproduire des composants riches (widgets) main

Related: