acerne acerne - 5 months ago 12x
HTML Question

How to properly use same text sections across multiple html pages?

I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.

There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.

Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.

I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.

Can anyone please point me into the right direction here?


I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.

For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:

UPDATE: I did a little test, i created the following JavaScript:

function helloTitle(){
    var text = "Hello World!";
    document.getElementById("title").innerHTML = text;

And referenced it in some HTML pages like this:

<script src="commonText.js" type="text/javascript"></script>

After that i only need to call the function in the element i want it to modify:

<p id="title"><script>helloTitle();</script></p>

This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.

Hope this information could help you!