Does Repl.it Support `<link rel="import" />`?

This doesn’t seem to be working:

<link href="team-records.html" rel="import" />

https://replit.com/@johnaweiss/Import-Issue#index.html

Hi @johnaweiss thanks for your question.

HTML imports have been depreciated by browsers for a few years now. Can you provide a bit more context so the community can advise you? What would you like to use import for?

1 Like

According to this article, it’s a new HTML5 feature.

"Thanks to the new HTML5 Imports, we can now use the element to load one HTML file into another. Embedding an HTML file is simple. All we need to do is use the common „“ element. Then we add the value „import“ to the „rel“ attribute. Using „href“ we attach the URL of the HTML file, just like we are used to when it comes to stylesheets and scripts.

<link href="extern.html" rel="import" />

This article may give some insight.

To access the content of an import, you have to write some JavaScript.
HTML5 Imports: Embedding an HTML File Inside Another HTML File

i’m not getting php either.

<?php include "team-records.html" ?>

to import html into an html file.

is the php include supported.

Hey there, John. The ability to import an html file into another is a terrible practice in terms of accessibility since it’s only supported by chrome. The best way to embed external HTML into your page is to use an iframe tag.

A possible solution that you might want to consider is using javascript to read the contents of the HTML file and appending it to the body of your page.

1 Like

what specific import method is only supported by chrome?

is the php include supported by repl? Do i need to enable something in repl?

the following fails

<?php
    $message = "PHP is so cool!!";
    echo "<p>Hello repl.it. <strong>$message</strong></p>";
?>

outputs

Hello repl.it. 
''$message "; ?>`

https://replit.com/talk/learn/PHP-tutorial-No-1-Introduction/15442

(btw, i believe “accessibility” usually refers to access by people with physical disabilities. i may be wrong, but i think it doesn’t usually refer to browser support)

HTML Imports are deprecated and was removed from Chrome in February 2020 .

HTML Imports only worked on Chrome 36-72

HTML5 was initially released in January 2008, so a ‘new’ feature, released in HTML5 feature could be pretty old. HTML imports are actually much more recent that HTML5, however they were still deprecated around two years ago (different sources seem to state different dates, this probably partially depends on what browser the author of each source refers to).

PHP won’t work in a HTML, CSS, & JS Repl, make sure you create a PHP WebServer Repl if you want to run PHP code.

Could you give some more information as to why you want to import HTML and what you would use this to achieve?

Accessibility refers to how easy it is for anyone to access anything, it does not refer to access by people with physical disabilities. It refers to things that are designed so that anyone, which includes people with any sort of disability, can use it.

1 Like

Thanks for the PHP info.

My intention is to separate data from HTML (ie, separate content from presentation) and import content which JS will subsequently load into HTML elements.

My preference is client-side options for this particular project.

I found a variety of possible options, like fetch, XMLHttpRequest + Filesystem API, server-side includes, php include. My favorite one is pure HTML.

<object id="records" type="text/html" data="https://bayviewboom.org/readme.txt" ></object>

However i’m having trouble obtaining the contents of the remote file in javascript, even tho’ the remote contents are visible on the page.


You may be totally right about “accessibility”. However, I believe the most commonly understood meaning is access for disabled persons. It’s about the users, not the equipment.

"Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

“Microsoft accessibility features: There is no limit to what people can achieve when technology reflects the diversity of all who use it.”