Skip to content

Latest commit

 

History

History
42 lines (36 loc) · 1.16 KB

README.md

File metadata and controls

42 lines (36 loc) · 1.16 KB
Raw

Include HTML from other HTML files

🌌 What is an HTML import?
It's a <link rel="text/html" href="some_url"> element.

🌄 What does it do
Your <link> will get replaced by the HTML (CSS too) at the url inside href=""

🌆 How does it work?
The JavaScript library will grab all <link> element that include rel="text/html". Then it downloads the content from the page at the link. Finally, it replaces your <link> using the HTML or CSS downloaded.


Live CDN link

<script src="https://cdn.jsdelivr.net/gh/VSADX/html-imports@main/html-imports.js" type="module"></script>

Examples

The basics

  1. Here's how you use HTML imports, there are just two files here (header.html, about-us.html).
  2. header.html is going to get imported into about-us.html
  3. Your main page needs a normal <body> element, but don't put one in your mini-pages.

header.html

<header>
  <h1> Wow brand! </h1>
</header>

about-us.html

<body>
  <link rel="text/html" href="./header.html">
  <div>
    Welcome to our page, see our brand above! <br>
    We are so professional
  </div>
</body>