I have a lot of repeating imports inside my html <head></head> tag and I want to know if it's possible to import it instead of copying it in all the html files.
Example head.html module:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Chrome, Firefox OS and Opera -->
<link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png" />
<link rel="shortcut icon" href="../icons/favicon.ico" />
<!-- Tab Color iOS Safari -->
<meta name="apple-mobile-web-app-title" content="Interface" />
<meta name="application-name" content="Interface" />
<!-- Tab Color Android Chrome -->
<meta name="theme-color" content="#e11422" />
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
<!-- General CSS Style -->
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<!-- JS Modules -->
<script src="../css/bootstrap.js" defer type="module"></script>
<script src="../js/controller.js" defer type="module"></script>
I have tried using HTML Imports but later I found that they are deprecated.
Since the JS script imports are inside the module, I can't use JS in the main file unless I import another JS file defeating the purpose of the head.html module. And I certainly don't like using script tags and adding JS inside those.
I am not interested in using JQuery.
I am using Parcel as a bundler and Vanilla JS to write this interface.
I would like to know if it can be done with the above mentioned tools. If not, so be it; I will copy-paste the head tag contents on each page.
I would also like to know if the repeating code affects performance in some way. Because if it does not, then I don't have a problem that needs fixing.
You can't import head Tags into HTML Files, however, this does not have a significant impact on performance