Head Title Tag

MDN
#1

I have a home page that has the basic markup and link to a style sheet .

I would like to reduce duplication and be able to have the linked sheet supply the basic information to the Home page.

The Title tag in the head is the first problem that I want to add to a linked sheet to supply the page heading. Also the meta data.

Best practice please!
Thank you

Add the page Title Information
#2

Hi @kvic and welcome to the community :wave:

That confuses me. This sounds like you want to use a CSS style sheet to provide HTML elements which doesn’t work.

In modern web applications it’s rather the case that you have one HTML file with all the data in the <head> and then a framework like Vue, React or Angular will dynamically replace the content of the <body> with different HTML templates.

Michael

#3

Thanks Michael, sorry to confuse. I just want to change the page title from the external file so that the file contains all the properties that need to be changed like a form for a new application.

The title tag is in the html file with all the other tags.

Of cause the meta tags can provide important information and are in the html file but I would like to apply that information from the external file as well.

Not add or replace the actual tags themselves just the title text and meta content
Thank you

1 Like
#4

You can dynamically change any HTML element with JavaScript.

If you have some text in another file , you could fetch() the file and then assign its content to the <title>:

<!DOCTYPE html>

<html>
  <head>
    <title>Old Title</title>
    <meta name="description" content="Old description">
  </head>
  <body>
    <script>
      /* text file in the same directory with the new title */
      fetch('title.txt')
        .then(response => response.text())
        .then(text => document.title = text)
      
      /* This text could also be fetched from a file */
      document.querySelector('meta[name="description"]').content = 'New description';
    </script>
  </body>
</html>

You could also have all the new data formatted as JSON and saved in a file. You would then use response.json() instead of response.text() to directly parse it into an object.

Does that help you?

Have a nice day,
Michael

#5

Thank you Michael for your help. This solution helped.

1 Like