How can I avoid repeating this block of HTML?

Question

I've got a website, where this block of HTML is on all pages:

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

I would like avoid repeating this in the HTML plaintext of the page, so that the website becomes more modular/easier to edit. How do I do this? A natural solution would probably be to integrate it into my CSS stylesheet, but I don't know how.

I would recommend you to use PHP so you can include the page in each other page — julianstark999, Sep 26 '16 at 08:35
I think an interesting solution to your problem would be to create a html page that has everything you want on all the pages to appear. Say header, menu, footer, stuff like that. Then you load all pages with unique content inside this main page, be it through Ajax or iframes. I don't mind writing an example for you, but it would take some time. And it depends on which solution you prefer. — icecub, Sep 26 '16 at 08:42

score 0 · Answer 1 · answered Sep 26 '16 at 08:34

0

I recommend you to use jquery to append this html to each page, like this:

    $('.blocks').append('<div class="about">'+
        +'<p><a href="google.com">lorem ipsum</a></p>'+
        +'</div>');

answered Sep 26 '16 at 08:34

Pedram

12,941
7
35
64

3

And include this bit of JavaScript in each page? – Mr Lister Sep 26 '16 at 08:35
@MrLister yep, put this code in a global `js` file that included to each page, or a `header` module. – Pedram Sep 26 '16 at 08:37

score 0 · Answer 2 · answered Sep 26 '16 at 08:35

0

If you are using C# ASP.NET You can shift this content into a partial view. So you have one view containing this content which you can render everywhere you want by this:

@Html.Partial("yourView")

answered Sep 26 '16 at 08:35

score 0 · Answer 3 · answered Sep 26 '16 at 08:35

Use a function. You don't specify the server side lang you use so i'll put an example on PHP:

<?php
    function printAbout(){
        echo "<div class='about'><p><a href='google.com'>lorem ipsum</a></p></div>";
    }
?>

then you only have to include the page that contains the function in others where you want to print this div, and call to this function where you like it as follows:

<?php
    printAbout();
?>

Note that the styles charged on the page that prints the function will take effect on it as you harcoded it, so it's not necessary to add css or javascript on function, so it's easier to be scalable and editable (and easier to find)

score 0 · Answer 4 · answered Sep 26 '16 at 08:35

0

If you are using PHP, place it in a sepperate .php file, and then include it using <?php include("path to the file.php"); ?>

answered Sep 26 '16 at 08:35

W D

105
2
9

score 0 · Answer 5 · answered Sep 26 '16 at 08:36

0

If you are using php - using partial

about.php

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

main.php

<?php include about.php  ?>

answered Sep 26 '16 at 08:36

Chetan Gawai

2,133
18
34

score 0 · Answer 6 · edited May 23 '17 at 12:01

You can put it in an HTML file and use it in other pages.

Using jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("yourNewPage.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

yourNewPage.html:

<div class="about">
<p> <a href="google.com">lorem ipsum</a> </p>
</div>

For more information please check this link

How can I avoid repeating this block of HTML?

6 Answers6