How To Create Website With No HTML In Source Code

534 Views Asked by At

I've wondered this before, but never gotten an answer. Then just today I came across another site: http://ruralcoz.com/ with no html in the source code. Only a minified script. Does anyone know how the developer built this site, and why they chose to replace all the html with javascript? What's the benefit of this? How is this done?

Thanks!

2

There are 2 best solutions below

2
On BEST ANSWER

That's a React app. React uses JavaScript to create everything on the page and then loads it into the one root div on the page.

There are advantages to doing it this way and you can read more about it here

1
On

That site does have HTML in the source code, specifically:

<!doctype html>
<html lang="en">
  <head>
    <title>Four Points Funding</title>
    <link href="/static/css/main.d6132581.css" rel="stylesheet">
    ...
  </head>

  <body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.0673017f.js"></script>
  </body>

</html>

All of the above is HTML markup, and pages must have HTML to be rendered as HTML pages. There's no way around that.

What this site is lacking is content in the <body>, which might seem a bit odd, but is very doable. Javascript can be used to create elements and to insert them into the HTML, which is happening here. For example:

<script>
  const div = document.createElement('div');
  div.textContent = 'Body content!';
  document.body.appendChild(div);
</script>