What is the HTML equivalent to a stylesheet for CSS?

Question

I want to insert a navigation div inside all of my HTML documents. Is there a way to do so without putting the entire div inside of every document? I figured the solution would be similar to a CSS stylesheet.

I don't know of anyway of doing this without Javascript or jQuery, which I want to avoid using if possible.

<html>
 <body>
  <div>
   //CONTENT//
  <div>
 </body>
</html>

I want to put the div inside of a separate document and put in a link of some sort to substitute that in every document that contains the div.

Google `SSI - Serverside Includes`. Aside from that (or a PHP-based solution) you're bound to use Javascript. HTML has no import mechanism. — connexo, Mar 23 '19 at 20:17
Are you using a server-side language at all, or is this pure 100% HTML? — Ben Chamberlin, Mar 23 '19 at 20:27

score 0 · Answer 1 · edited Mar 24 '19 at 09:00

Edit: I Haven't notice that you also don't want to use JS. I'll leave this answer as a partial solution for you problem.

The Solution:

If you don't want to use ANY Library like JQuery or frameworks like Angular/React/Vue then you have the option to use Web components (I've added the description from the link below).

Notice: Don't forget to check for Browser support.

With that you can choose HTML templates or Custom elements.

Let's take an example of HTML template:

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis:

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    var template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    var tbody = document.querySelector("tbody");
    var clone = document.importNode(template.content, true);
    var td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    var clone2 = document.importNode(template.content, true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

What is web components (From the developer.mozilla.org docs)?

As developers, we all know that reusing code as much as possible is a good idea. This has traditionally not been so easy for custom markup structures — think of the complex HTML (and associated style and script) you've sometimes had to write to render custom UI controls, and how using them multiple times can turn your page into a mess if you are not careful.

Web Components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.

Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element's features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

The author said he wants to avoid JavaScript (not just jQuery) — Ben Chamberlin, Mar 23 '19 at 20:24
Correct, I didn't notice. But I'll leave this here maybe it will help other people. — RtmY, Mar 23 '19 at 20:30

What is the HTML equivalent to a stylesheet for CSS?

1 Answers1