How to call a HTML class inside another HTML class?

Question

Right now I have two HTML classes and a CSS file. One HTML file is used for writing HTML code and another one is for putting large text/paragraph. Now I want to reference that HTML file (which includes a big paragraph) into my main html file.

How could it be done? Is it a good practice? Or is there any alternative way to do that?

The code I wrote:

main.html:

    <!--
All the html code will go in this file. This is the main core file of any website.
-->
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>


<!--<img src="bricks.JPG" alt="blue bricks" width="300" height="1000">-->
<style type="text/css">

</style>
</head>

<body>


<h1 id="style_header">Welcome to my green world!</h1></div>


<div id="menu_area" >


<div id="home">HOME</div><br /><br /><br /> 
<div id="about_me">ABOUT ME</div><br /><br /> <br />
<div id="gallery">GALLERY</div><br /><br /> <br />
<div id="contact_me">CONTACT ME</div><br /><br /> <br />
<div id="my_diary">MY DIARY</div><br /><br /> <br />
<div id="blog">BLOG</div><br /><br /> <br />


</div>
<p id="paragraph_home">paragraph.</p>

<!-- I want to call the home.html class here so that the paragraph is shown in my homepage under the home menu.-->

<div id="footer">Developed by Jabir Al Fatah</div>

</body>
</html>

main_design.css:

    /*
All the css properties will go in this file. CSS properties design the site to look it prettier.
*/

#style_header {
    background-color:blue;
    text-align:center;
    padding:20px;
    margin:-8px;
    border:4px solid red;
}

#paragraph_home{
    text-align:center;
    display:inline-block;
    width:300px;
    vertical-align:top;
}
#menu_area {
    border:4px solid red;
    margin:-8px;
    background-color:#FFD700;
    padding-top:30px;
    margin-top:4px;
    height:600px;
    width:150px;
    display:inline-block;
    vertical-align:top;
}
body {
    background-image:url(green.JPG);
    background-repeat:no-repeat;
}
#footer {
    background-color:blue;
    margin:-8px;
    border:2px solid red;
    text-align:center;
}
#home {
    font:bold 20px Tahoma;
    text-align:left;
}
#about_me {
    font:bold 20px Tahoma;
    text-align:left;
}
#gallery {
    font:bold 20px Tahoma;
    text-align:left;
}
#contact_me {
    font:bold 20px Tahoma;
    text-align:left;
}
#my_diary {
    font:bold 20px Tahoma;
    text-align:left;
}
#blog {
    font:bold 20px Tahoma;
    text-align:left;
}

home.html

    <!--
The text I want to add in the home link will go here. As soon as an user
loads the page will be able to see the paragraph. This paragraph should also be shown when the user clicks on Home menu.

-->

<!--
Now, basically I want to call this class in my "main.html" class. how to do that?
The reason I want to do that because I really don't like this giant paragraph in my "main.html" class.
-->

    <p id="paragraph_home">I was born in a beautiful small village <!--Just an example paragraph-->
     of.......
     The villagers were relatively peaceful, almost free from crime 
     and sadness, besides they were very merciful and happy. The 
     reason I was born there is long long time ago my father’s 
     pre-generations were settled in the region. To live for his 
     own, my father had to move in a new village. Our new home was 
     just a kilometer away from my grandfather’s place. I came to 
     hear many legendary tales about that piece of land where our 
     current home is located. People use to say that there was 
     jungle and some evil’s residence long time ago. From our 
     village, some seniors of mine saw some shocking scenery with 
     monster shape in that bush. By the time my father cut the 
     jungle to settle residence. My father was a school teacher. 
     And my mom is a homemaker. I am the fourth child of my parents.
     Among five siblings, my only and one sister is the second child.</p>

[NOTE: I want that all of my paragraph or text should appear next to the menu area and below the heading.]

You can put the content in the css file , and change the text in the little HTML with `content: "New text"`, see here - http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css — URL87, Jul 31 '14 at 21:37

score 0 · Answer 1 · answered Jul 31 '14 at 21:37

HTML out of the box doesn't support this. You would need to use a dynamic language like PHP or ASP.NET. You would need to store your text in a variable, and call that on your main page. Here is a PHP example of how I accomplished this a while back:

First you would store your paragraph in another PHP file, lets call it paragaph.php.

//paragraph.php

var myParagraph = '<p>your paragraph text here</p>';

Lets call the main file index.php

//index.php
//Put your include statement in your <head> tag
<?php include('paragraph.php'); ?>

//And this would be your paragraph
<p id="paragraph_home">paragraph.</p>
<?php echo myParagraph; ?>
<div id="footer">Developed by Jabir Al Fatah</div>

The only catch is you will need something like WAMP installed on your computer to test this because browsers dont support PHP. They needs server side processor to create the HTML for them.

Good luck!

No doesn't work. Exactly did the same thing according to your instruction. Installed the Wamp, apache is running in my computer. All files are saved in the same folder. Look at my code in my first google post: https://plus.google.com/u/0/100402704740320621129/posts — Jabir AL Fatah, Jul 31 '14 at 22:43
Your posts look like they are all pictures and videos. By default, WAMP servers up pages from INSTALLDIR\www\ INSTALLDIR is generally C:\wamp. Just make sure your files are named with the .php extension instead of .html or .htm — Brian Morrison, Aug 01 '14 at 16:43

score 0 · Answer 2 · answered Jul 31 '14 at 21:41

The iframe option works well, but there is a new method (requires a bit of work)

Using web components it would look like this:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

You are going to want to include backwords support via jquery so I'd recommend taking a look at this guys tutorial:

Web Components Tutorial

Good Luck!

score 0 · Answer 3 · answered Jul 31 '14 at 21:47

Assuming I understood your problem correctly, I see two possible approaches:

client-side: load your "home.html" via an ajax call (downside of this approach is the dependence upon javascript, which the user may have decided to disable)
server-side: different server-side technologies (php, asp.net, etc.) have some sort of include mechanism

I tend to go with the 2nd approach because it doesn't rely on the presence of javascript, but it's your call.

Here's some resources:

jquery ajax | jquery load | php include

How to call a HTML class inside another HTML class?

3 Answers3