How to separate links for (bootstrap,jquery,css,js) in separate file and attch file link in HTML page?

Question

I am making a simple website using (HTML,CSS, Bootstrap, JavaScript, JQuery).My question's are:

1. How I separate all links or scripts tag in a separate file and then include this file in my index.html?

2. How I can make bootstrap globally accessible to all my project files?

Because without it my head tag is messed up and I want to write clean code.

Answer 1

• It cannot done in pure html If you are using any template-engine you can do so.
• If you want you can do it using JavaScript But it's not a good practice to do so.
  • Make a file tags.txt put all tags there and then
  • Use fetch to fetch the file and put it into html with javascript

fetch('/tags.txt').then(res => {
        res.text().then(data => {
          console.log(data)
          document.querySelector('head').html = data ;
        })
      })