Contenus interactifs
iframe
La balise <iframe> permet d’incorporer une page web à l’intérieur d’une autre, avec des fonctionnalités plus ou moins réduites.
Elle est notamment utilisée pour intégrer des contenus intégrés (YouTube, Google Maps, SoundCloud…).
La balise <iframe> possède un nombre conséquent d’attributs propres à chaque besoin.
Généralement ces attributs sont déjà ajoutés par les sites depuis lesquels vous copiez/collez l’iframe donné.
Vous pouvez retrouver la liste complète des attributs disponibles sur MDN.
PerformanceIl est théoriquement possible d’avoir une infinité d’
<iframe>au sein d’une page. Néanmoins, chaque embed consomme son propre lot de ressources de votre machine, et donc on peut vite se retrouver à ressentir des lags conséquents. C’est pourquoi il est recommandé de limiter au maximum l’utilisation des<iframe>, puisque nous ne pouvons pas contrôler la qualité de code de ce que nous intégrons de l’extérieur.
embed
La balise <embed> est une relique héritée des précédentes versions de HTML.
À l’époque, il était courant de créer des pages en imbriquant plusieurs “greffons” au sein d’une page principale (le système d’inclusion qui est retrouvé dans les moteurs de tempate aujourd’hui).
Cette balise permettait notamment de créer un cadre dans lequel lancer un script Flash, aujourd’hui dans le cimetière des technologies disparues.
Avec l’arrivée de balises spécifiques dans HTML 5 (<video>, <audio>, <canvas>…), cette balise n’est plus utile aujourd’hui.
object
La balise <object> est une relique héritée des précédentes versions de HTML.
À l’époque, il était courant de créer des pages en imbriquant plusieurs “greffons” au sein d’une page principale (le système d’inclusion qui est retrouvé dans les moteurs de tempate aujourd’hui).
Cette balise permettait notamment de créer un cadre dans lequel lancer un script Flash, aujourd’hui dans le cimetière des technologies disparues.
Avec l’arrivée de balises spécifiques dans HTML 5 (<video>, <audio>, <canvas>…), cette balise peut aujourd’hui servir uniquement à intégrer au sein de la page un document PDF.
Notez que par mesure d’accessibilité, il est quand même nécessaire de mettre à disposition un lien pour accéder directement au fichier en question.
canvas
La balise <canvas> permet de créer un pont dans votre page HTML, dans lequel l’entiéreté du rendu sera géré par le JavaScript.
Très largement utilisée pour réaliser des sites créatifs (ceux qui figurent sur awwwards par exemple), ils ouvrent une nouvelle voie pour créer des expériences encore plus immersives dans le navigateur.
AccessibilitéL’élément
<canvas>n’a pas pour objectif de rendre accessible son contenu. Veillez donc à ne pas utiliser cette balise si vous souhaitez insérer du contenu sémantique et destiné à l’ensemble des utilisateurs.
map
La balise <map> est utilisée pour créer des images cliquables, découpées en sections indépendantes.
Voyez cela comme une carte de la France, et lorsque vous cliquez sur chaque département, cela ouvre une nouvelle fenêtre vers le site du département en question.
Cette balise est très rarement utilisée, mais peut néanmoins correspondre à un besoin très précis.
