Can I link to a tag in a separate file to avoid having to change them all if I make a change?

Question

I want to create a website, where instead of copying the <head> tag to each new page. I want to put it in its own file just reference it in each page.

I tried using <object data="head.html">, with head.html having a link to style.css. But instead of changing the entire body background color to red, it just made a small red rectangle.

index.html

<!DOCTYPE html>
<html>
    <head>
        <object data="head.html"></object>
    </head>
    <body>
        <p>Hello</p>
    </body>
</html>

style.css

body{
    background-color:red;    
}

head.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
</html

I expected it to make the entire page red with the word "Hello" in it, but it made a small red rectangle with "Hello" under the rectangle.

I see that other question, however I'm not very experienced with using java script in web pages.

Possible duplicate of [Put HTML head in another file](https://stackoverflow.com/questions/26618893/put-html-head-in-another-file) — obscure, Apr 16 '19 at 18:17
What language you are using for web. Templates are mostly used for this purpose, not only for css, you can use templates for fixed headers or footers for every page. — Khurram Ishaque, Apr 16 '19 at 18:19

score 2 · Answer 1 · answered Apr 16 '19 at 18:18

2

You should use a programming language like PHP where you can include another file.

answered Apr 16 '19 at 18:18

Richard Lindhout

2,038
2
23
38

1

I'm not familiar with PHP. – Eyyo Apr 16 '19 at 18:26

score 2 · Accepted Answer · answered Apr 16 '19 at 18:28

I think your question is how to involve a certain html code from outside and use it twice or more ... Like using a paritcular design in all the web pages in the project folder. Try this..

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

If you are using PHP then it is the best way to include HTML code..

include_once('stuff.html');

score 0 · Answer 3 · answered Apr 16 '19 at 18:17

0

The problem is probably that the height of your html and body tags are just as large as it's contents. Try setting this in your CSS

html, body {
    height: 100%;
}

That will make it expand to be the browser windows size.

answered Apr 16 '19 at 18:17

webdevdani

1,062
7
11

Hmm, that doesn't change anything. – Eyyo Apr 16 '19 at 18:26

Can I link to a tag in a separate file to avoid having to change them all if I make a change?

index.html

style.css

head.html

3 Answers3