---
title: HTML Imports
slug: Web/Web_Components/HTML_Imports
tags:
  - Composants Web
translation_of: Web/Web_Components/HTML_Imports
---
<div>{{DefaultAPISidebar("Web Components")}}</div>

<div class="blockIndicator obsolete">
<p><strong>Obsolète depuis Google Chrome 73</strong><br>
 Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p>
</div>

<div class="warning">
<p>Firefox ne va pas supporter <em>HTML Imports</em> dans sa forme actuelle. Voir cet article en anglais "<a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">status update</a>" pour plus d'informations. Tant qu'aucun consensus sur le standard ou aucun mécanisme alternatif n'aura émergé, il est possible d'utiliser le polyfill <code><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a></code> de Google.</p>
</div>

<p><em>HTML Imports</em> est censé être un moyen de livrer des <a href="/fr/docs/Web/Web_Components">Composants Web</a> dans une page, mais il est aussi possible d'utiliser HTML Imports seul.</p>

<div>On importe un fichier HTML cible à l'aide de la balise <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> dans un document HTML source de la manière suivante : </div>

<div></div>

<pre>&lt;link rel="import" href="myfile.html"&gt;</pre>

<p><span style="line-height: 1.5;">La valeur d'attribut </span><code style="font-style: normal; line-height: 1.5;">import</code><span style="line-height: 1.5;"> de la balise </span><span style="line-height: 1.5;">link est nouveau</span><span style="line-height: 1.5;">.</span></p>

<h2 id="Spécification">Spécification</h2>

<table class="spec-table standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML Imports', "", "")}}</td>
   <td>{{Spec2('HTML Imports')}}</td>
   <td>Définition initiale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("html.elements.link.rel.import")}}</p>