<embed /> tag: Is including an html page through the tag the right way?

Going through the lesson of semantic html, while playing around with the embed tag to include another HTML page into the index.html page, there seemed to have a specific height to the element. What I originally wanted was to include content from another HTML but when I used embed tag there was extra space below the content. Even after removing the CSS for the embed tag from the style.css.
The reason I wanted to do that was that I was thinking if we are building a dynamic website and want to include the header and footer on each page then rather than copy-pasting that part we can just embed it with embed tag. but there seems to be this height issue that was not resolving even after adding the auto height in CSS. Is this the right way to add an html page to another html page?

It has been a while since I’ve done any HTML, but if I remember correctly, you can use an anchor tag to a local file. For example:

<a href="#filename"></a>

You can also use <link></link> tags.

Is this the right way to add an html page to another html page?

No, it’s not.

You’ll generally use <embed> to add external multimedia content to the page (like audio or video), although now we have <audio> and <video> for these.

Unfortunately, HTML doesn’t provide an easy solution such as, say, <include>, for example. But there are many ways to include a header / footer to the page. Let’s keep it simple though.

You could use <iframe>. It was designed to embed an entire web document into another one. For example, when you see a YouTube video on a third-party site, the code used is an iframe.

You could also use JavaScript to do this, and jQuery makes it particularly easy

$("#header").load("header.html"); 
$("#footer").load("footer.html"); 

Or you could also use a server-side language. PHP, for example, could do it like this

<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>

There are other ways, but I think it’d be a bit much for the time being. For now, if you want to stick to HTML, try playing around with iframes to see how it works :wink:

1 Like

Let me test that and check what is the result.

Thank you for the detailed answer. I was really looking to some insight about what should be done to include an html page into another html page. I will definitely test <iframe> tag. Also, when you said that we could do this through server-side language then wouldn’t it require to have an .php page rather than a .html page for it to run.

My pleasure.

If you’re using PHP as your server-side language then yes, that’s absolutely right.

Later you’ll likely come across frameworks that allow you to get this done through view templates – but for now stick to the basics, it’s important. And you don’t necessarily have to use PHP, it’s just one of many languages. :wink:

1 Like