Alternatives to iFrame tag in HTML?

Although is not equivalent of iFrame but you can use these :

1. you can use <embed> element

<embed id="123" src="http://google.com" />

works fine in chrome ,safari and firefox, to make it work in firefox, you need wrap it with object

<object data="url" type=text/html>
   <embed src="url" id=123>
   </embed>
</object>

2.  Another way is to Use AJAX call and load the URL into div , like below example

$("#area").load("example.html #content");

That finds the content in the file example.html within the element with an ID of contentand puts it on to the current page, inside the element with an ID of area.

3. HTML Imports

You can import external HTML file

<!-- Resources on other origins must be CORS-enabled. -->

<link rel="import" href="http://somedomain.com/elements.html">

In this way, you can also divide HTML components and re-use same html code.

Content inside iFrame is not indexed by Google and hence no good for SEO, so to avoid it best solution will be jQuery method like below

  <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 

This will include paste html from url http://example.com/included.html inside div with id='include-from-outside'

I would like to add one more way, since "HTML Import" is obsolete now in most of the major browsers, you can use Javascript's "fetch" to get external HTML into the page.

This can be the example of it

class SampleComponent extends HTMLElement {

    async connectedCallback() {
        let res = await fetch( 'your-component.html' )

        this.innerHTML = await res.text()
    }

}
customElements.define('your-component', SampleComponent)

Since, 'fetch' is an asynchronous function so you will have to use async/await or Promises, as shown above, thanks